:root {
    --primary-color: #00aaaa;
    --bg-light: #f9fbfb;
    --text-dark: #1a2a2a;
    --text-light: #ffffff;
    --link-light: #cce0e0;
    --link-hover: #40bbbb;
}

/* 基础重置，兼容性更好 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 背景 + 字体全局设定 */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--bg-light);
    color: var(--text-dark);
    padding: 2rem;
}

/* 居中容器，让内容不至于太宽 */
.container {
    max-width: 900px;
    margin: 0 auto;
}

main {
    min-height: 600px;
}

/* 标题样式 */
h1 {
    font-size: 2.5rem;
    margin-bottom: .75em;
    color: var(--text-dark);
}

h2 {
    font-size: 1.75rem;
    margin-bottom: .75em;
    color: var(--text-dark);
}

/* 段落间距 */
p {
    margin-bottom: 2rem;
    font-size: 1.125rem;
}

a {
    text-decoration: none;
    color: #0066cc;
}

a:hover {
    text-decoration: underline;
}

.border {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--text-dark);
    border-radius: .5rem;
    padding: 2rem;
}

/* 链接列表样式 */
.links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* 当宽度不足时自动换行 */
    gap: .75rem;
    /* 项目之间的间距 */
}

.links a {
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: .25rem;
    background-color: var(--link-light);
    /* 浅灰背景，点亮链接 */
    color: var(--text-dark);
    /* 深灰文字 */
    transition: all .15s ease-in-out;
}

.links a:hover,
.links a:focus {
    background-color: var(--link-hover);
    /* 蓝色高亮 */
    color: var(--text-light);
}