/* 默认样式 */
body,html {
    height: 100%;
    background-color: var(--color-bg);
    /* 使用CSS变量设置背景颜色 */
    margin: 0; /* 移除默认外边距 */
}
body{
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
}
header{
    display: flex;
    flex-direction: row; /* 水平排列子元素 */
    align-items: center; /* 垂直居中对齐 */
    gap: 300px;
}
.container {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto; /* 自动水平居中 */
    padding: 0px; /* 移除默认内边距 */
    flex-grow: 1; /* 占据剩余空间 */
}

.bar ul{
    display: flex;
    display: flex;
    list-style-type: none; /* 移除列表默认样式 */
    padding: 0; /* 移除默认内外边距 */
}
.bar ul li{
    margin-right: 20px ;
}

a{
    color: var(--font-color-main);
    text-decoration: none; /* 删除链接的下划线 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-family: -apple-system;
}

a:hover{
    color: #1565c0; /* 鼠标悬停时链接颜色 */
    text-decoration: underline; /* 鼠标悬停时链接添加下划线 */
}
h1{
    color: var(--font-color-main);
    font-size: 32px;
    font-family: -apple-system;
}
h2{
    color: var(--font-color-main);
    font-size: 21px;
}
li{
    color: var(--font-color-main);
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 垂直对齐到容器底部 */
    text-align: center; /* 使文本居中 */
    height: 100%; /* 高度占满父容器 */
    margin-bottom: auto; /* 底部外边距自动分配 */
}
.p{
    width: 400px;
}
p{
    color: var(--font-color-main);
}
span{
    color: var(--font-color-main);
}
.fixed-button {
    position: fixed; /* 固定定位 */
    bottom: 30px;
    right: 30px;
    background: linear-gradient(to right,var(--font-color-main) 30%, var(--color-bg) 70%);
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block; /* 内联块级元素 */
    cursor: pointer; /* 鼠标指针为手型 */
    width: 30px;
    height: 30px;
    border: 4px solid var(--font-color-main);
    border-radius: 50%; /* 圆角边框 */
    transition: transform 0.1s; /* 添加过渡效果 */
}

.fixed-button:hover {
    transform: scale(1.5); /* 鼠标悬停时放大按钮 */
}

.goals-table th,
.goals-table td {
    border: 1.5px solid var(--font-color-main);
    color: var(--font-color-main);
    padding: 8px;
    text-align: left; 
}


/* 全局样式变量 */
:root{
    /* 背景色/边框颜色/主色/辅色/其他色 */
    --color-border:#deddee;
    --color-main:#ffae00;
    --color-auxiliary:#00ff11;
    --color-other:#00ffdd;
    --color-bg:#1f1f21;
    --font-color-main:#ffffff;
    --font-color-secondary:#ffffffb3;
    --font-color-auxiliary:#ffffff3b;
    /* 字号和字体颜色 */
    --font-root:1rem;
    --font-32px:2rem;
    --font-20px:1.25rem;
    --font-18px:1.125rem;
    --font-16px:1rem;
    --font-14px:.875rem;
    --font-12px:.75rem;
    --font-10px:.625rem;
    /* 层级 */
    --z-index10:10;
    --z-index100:100;
    --z-index1000:1000;
    /* 间距 */
    --spacing-2:.125rem;
    --spacing-4:.25rem;
    --spacing-6:.375rem;
    --spacing-8:.5rem;
    --spacing-10:.625rem;
    --spacing-12:.75rem;
    --spacing-14:.875rem;
    --spacing-16:1rem;
    --spacing-20:1.25rem;
    --spacing-24:1.5rem;
    --spacing-30:1.875rem;
    --spacing-40:2.5rem;
    --spacing-50:3.125rem;
    --spacing-60:3.75rem;
}
/* 集合属性（主题样式） */
[data-theme="dark"] {
    --color-bg:#212121;
    --color-btn:#ffffff;
    --color-btn-font:#333333;
    --color-border:#deddee;
    --color-main:#ffae00;
    --color-auxiliary:#00ff11;
    --color-other:#00ffdd;
    --font-color-main:#ffffff;
    --font-color-secondary:#ffffffb3;
    --font-color-auxiliary:#ffffff3b;
}
[data-theme="light"] {
    --color-bg:#fafafa;
    --color-btn:#000000;
    --color-btn-font:#ffffff;
    --color-border:#deddee;
    --color-main:#ffae00;
    --color-auxiliary:#00ff11;
    --color-other:#00ffdd;
    --font-color-main:#333333;
    --font-color-secondary:#777777;
    --font-color-auxiliary:#aaaaaa;
}

/**
字体图标样式
 */
.demo-icon {
    font-family: "fontello"; /* 字体图标库 */
    font-style: normal;
    font-weight: normal;
    speak-as: never;

    display: inline-block;
    text-decoration: inherit; /* 继承文本装饰 */
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
     font-size: 30px;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* You can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}