@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root {
    --primary-color: #007af3;
}

body {
    background: #f2f2f2;
    margin: 0;
    font-family: "Poppins";
}

section {
    padding: 5em 2em;
}

.navbar {
    background: white;
    padding: 1em;
}

.navbar .logo {
    text-decoration: none;
    font-weight: bold;
    color: black;
    font-size: 1.2em;
}

.navbar .logo span {
    color: var(--primary-color);
}

.navbar nav {
    display: block;
}

.navbar .container {
    display: flex;
    flex-direction: row;
    place-content: space-between;
}

/* 表示class有menu-btn的时候再right 0 */
nav.menu-btn {
    right: 0;
}

nav {
    position: fixed;
    z-index: 999;
    width: 55%;
    /* 一开始直接在看不到的地方站着 */
    right: -80%;
    top: 0;
    background: #20272e;
    height: 100vh;
    padding: 1em;
    transition: right 0.5s ease;
}

nav .first-ul {
    margin-top: 5em;
}

nav li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.5em;
    font-size: 1.3em;
    text-align: right;
}

nav li:hover {
    font-weight: bold;
}

.exit {
    margin: 0.5em;
    cursor: pointer;
}

a {
    color: #444444;
    text-decoration: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar nav.menu-btn {
    right: 0;
}

.exit {
    margin: 0.5em;
    cursor: pointer;
}

nav li:hover {
    font-weight: bold;
}

h1 {
    font-size: 3em;
    margin: 0;
}

.subhead {
    font-weight: bold;
    color: gray;
    letter-spacing: 0.3em;
    margin: 0;
    text-align: center;
}

.main {
    position: relative;
}

.main .so {
    display: none;
    width: clamp(280px, calc(10vw + 150px), 350px);
    border: 4px solid var(--primary-color);
    border-radius: 1em;
    position: absolute;
    /* fixed可以不用 relative */
    right: -80%;
    transition: right 0.5s ease;
    opacity: 0.9;
    top: 250px;
}

.main {
    width: 100%;
    position: relative;
    background: url("../image/PixPin_2024-07-26_19-38-57.png") no-repeat center center/cover;
}

.main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: inset 120px 100px 250px rgba(255, 255, 255, 0.41), inset -120px -100px 250px #00000050;
}

.main {
    min-height: 500px;
    /* 最小高度 300px */
    max-height: 130vh;
    /* 最大高度为视窗的 65% */
    height: auto;
    /* 高度根据内容动态调整 */
    position: relative;
    /* border: 1px solid #ccc; 增加边框，方便查看窗口大小 */
    padding: 0em;
    display: flex;
    flex-direction: column;
}

.main h1 {
    color: #fff;
    display: flex;
    justify-content: center;
}

.main h2 {
    font-size: 1.2em;
    color: rgba(0, 0, 0, 0.839);
}

.main .container {
    padding: 1em;
    z-index: 2;
}

.main .unfinish {
    display: flex;
    flex-direction: column;
}

.main .unfinish .top {
    display: flex;
}

.main .unfinish .top img {
    width: 1.5em;
    margin-bottom: 0.15em;
}

.main .unfinish .container.collapsed {
    max-height: 0;
    /* 使内容不可见 */
    opacity: 0;
    padding: 0;
}

.main .unfinish .container {
    display: block;
    max-height: 33vh;
    /* 最大高度为视窗的 50% */
    height: auto;
    /* 高度根据内容动态调整 */
    background: #444444;
    padding: 2em;
    border-radius: 0.5em;
    opacity: 1;
    /* 设置透明度 */
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow-y: auto;
    /* 当内容超出 max-height 时，显示垂直滚动条 */
    scrollbar-width: thin;
    /* 适用于 Firefox 的滚动条宽度 */
    scrollbar-color: var(--primary-color) #444444;
}

.main .unfinish .container .container::-webkit-scrollbar {
    width: 4px;
    /* 滚动条宽度（适用于 WebKit 浏览器如 Chrome, Safari） */
}

.main .unfinish .container .container::-webkit-scrollbar-track {
    background: #444444;
    /* 滚动条背景 */
}

.main .unfinish .container .container::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    /* 滚动条滑块颜色 */
    border-radius: 10px;
    /* 圆角 */
}

.main .unfinish .container .task {
    align-items: center;
    /* 垂直居中对齐 */
    display: flex;
    padding: 7px 0;
    /* 任务项的内边距，上下留白 */
    border-bottom: 1px solid #ddd;
    /* 每个任务的下划线 */
    font-size: 1.1em;
    /* 适当调整字体大小 */
}

.main .unfinish .container .task .complete-btn {
    font-weight: bold;
    background-color: var(--primary-color);
    /* 按钮背景颜色 */
    color: white;
    /* 按钮文字颜色 */
    border: none;
    /* 移除默认边框 */
    padding: 7px 12px;
    /* 按钮内边距 */
    border-radius: 5px;
    /* 按钮圆角 */
    cursor: pointer;
    /* 鼠标移上去时变成手形 */
    transition: background-color 0.3s ease;
    /* 背景色过渡效果 */
}

.main .unfinish .container .task .complete-btn:hover {
    background-color: #005bb5;
    /* 悬停时的背景颜色 */
}

.main .unfinish .container .task span {
    margin-left: 1em;
    margin-top: 0.15em;
    color: #e8e8e8;
}

.main .finish {
    display: flex;
    flex-direction: column;
}

.main .finish .top {
    display: flex;
}

.main .finish .top img {
    width: 1.5em;
    margin-bottom: 0.15em;
}

.main .finish .container.collapsed {
    max-height: 0;
    /* 使内容不可见 */
    opacity: 0;
    padding: 0;
}

.main .finish .container {
    display: block;
    max-height: 33vh;
    /* 最大高度为视窗的 50% */
    height: auto;
    /* 高度根据内容动态调整 */
    background: #444444;
    padding: 2em;
    border-radius: 0.5em;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow-y: auto;
    /* 当内容超出 max-height 时，显示垂直滚动条 */
    scrollbar-width: thin;
    /* 适用于 Firefox 的滚动条宽度 */
    scrollbar-color: var(--primary-color) #444444;
}

.main .finish .container .container::-webkit-scrollbar {
    width: 4px;
    /* 滚动条宽度（适用于 WebKit 浏览器如 Chrome, Safari） */
}

.main .finish .container .container::-webkit-scrollbar-track {
    background: #444444;
    /* 滚动条背景 */
}

.main .finish .container .container::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    /* 滚动条滑块颜色 */
    border-radius: 10px;
    /* 圆角 */
}

.main .finish .container .task {
    align-items: center;
    /* 垂直居中对齐 */
    display: flex;
    padding: 7px 0;
    /* 任务项的内边距，上下留白 */
    border-bottom: 1px solid #ddd;
    /* 每个任务的下划线 */
    font-size: 1.1em;
    /* 适当调整字体大小 */
}

.main .finish .container .task .uncomplete-btn {
    font-weight: bold;
    background-color: var(--primary-color);
    /* 按钮背景颜色 */
    color: white;
    /* 按钮文字颜色 */
    border: none;
    /* 移除默认边框 */
    padding: 7px 12px;
    /* 按钮内边距 */
    border-radius: 5px;
    /* 按钮圆角 */
    cursor: pointer;
    /* 鼠标移上去时变成手形 */
    transition: background-color 0.3s ease;
    /* 背景色过渡效果 */
}

.main .finish .container .task .uncomplete-btn:hover {
    background-color: #005bb5;
    /* 悬停时的背景颜色 */
}

.main .finish .container .task span {
    margin-left: 1em;
    margin-top: 0.15em;
    color: #f6f5f5;
}

.main .add {
    /* position: fixed; */
    /* bottom: 0; 元素不会随着页面滚动移动，它始终保持在你设置的固定位置。*/
    width: calc(100% - 2em);
    padding-top: 1em;
    margin-top: auto;
}

.main .add #task-input {
    padding: 7px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 4px;
    width: 35%;
    transition: border-color 0.3s ease-in-out;
}

.main .add #task-input:focus {
    border-color: var(--primary-color);
    /* 聚焦时改变边框颜色 */
    outline: none;
    /* 去掉默认的外边框 */
}

.main .add #add-task-btn {
    margin-left: 10px;
    padding: 7px 20px;
    font-size: 16px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.main .add #add-task-btn:hover {
    background-color: #0056b3;
}

/* CSS: 添加动画效果 */
.task {
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateX(0);
}

.task.fade-out {
    opacity: 0;
    transform: translateX(20px);
    /* 向右移动 */
}

.task.fade-in {
    opacity: 0;
    transform: translateX(-20px);
    /* 初始向左移动 */
}

.task.fade-in.show {
    opacity: 1;
    transform: translateX(0);
    /* 回到原位 */
}

.progress-bars {
    background: #141414;
}

.progress-bar-container {
    width: 100%;
    background-color: #c2bcbc44;
    border-radius: 15px;
    height: 20px;
    position: relative;
}

.progress-bar {
    height: 100%;
    border-radius: 10px;
    background-color: #007af3;
    width: 0%;
    /* 初始进度为30% */
    transition: width 0.5s ease;
}

.present {
    font-weight: bold;
    color: white;
    position: absolute;
    right: 0;
}

.footer {
    color: #fff;
    padding: 1em 0;
    background: #161616ec;
}

.tab-1,
.tab-2,
.tab-3 {
    display: none;
    opacity: 0;
}

.ba {
    font-size: clamp(1.3em, calc(2vw + 0.5em), 2.3em);
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.2em;
    text-shadow: 20px 11px 6px black;
}

.wen {
    font-size: clamp(1.3em, calc(2vw + 0.5em), 2.3em);
    color: rgba(11, 215, 11, 0.845);
    font-weight: 700;
    line-height: 1.2em;
    text-shadow: 20px 11px 6px black;
}

.tab-1 {
    margin: 2em 0;
    position: relative;
}

.tab-1 img {
    width: 60%;
}

.tab-1 .text-1 {
    display: flex;
    flex-direction: column;
    margin-right: 1em;
}

.tab-1 .text-1-1 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 33%;
    right: 8%;
}

.tab-1 .text-1-2 {
    font-size: clamp(1em, calc(2vw + 0.6em), 2.2em);
    position: absolute;
    top: 42%;
    right: 19%;
}

.tab-1 .text-1-3 {
    font-size: clamp(1em, calc(2vw + 0.6em), 2.2em);
    position: absolute;
    top: 51%;
    right: 7%;
}

.tab-1 .text-1-4 {
    font-size: clamp(1em, calc(2vw + 0.6em), 2.2em);
    position: absolute;
    top: 61%;
    right: 1%;
}

.tab-1 .text-1-5 {
    font-size: clamp(1em, calc(2vw + 0.6em), 2.2em);
    position: absolute;
    top: 71%;
    right: 5%;
}

.tab-2 {
    width: 100%;
    position: relative;
    font-weight: 550;
}

.tab-2 img {
    width: 100%;
}

.tab-2 .text-2 {
    display: flex;
    flex-direction: column;
    margin-right: 1em;
}

.tab-2 .text-2-1 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 0%;
    right: 1%;
}

.tab-2 .text-2-2 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 9%;
    right: 2%;
}

.tab-2 .text-2-3 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 9%;
    right: 67%;
}

.tab-2 .text-2-4 {
    color: rgba(128, 128, 128, 0.35);
    font-size: clamp(1em, calc(2vw + 0.3em), 2em);
    position: absolute;
    top: 33%;
    right: 67%;
}

.tab-2 .text-2-5 {
    color: rgba(128, 128, 128, 0.35);
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 41%;
    right: 69%;
}

.tab-2 .text-2-6 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 70%;
    right: 65%;
}

.tab-3 {
    padding-top: 2em;
    flex-direction: column;
    position: relative;
    height: auto;
    overflow: hidden;
}

.tab-3 img {
    width: 60%;
}

.tab-3 .img2 {
    align-self: flex-end;
    transform: translate(-20px, -23vw);
    /* 向上移动 */
    margin-bottom: -23vw;
    /* 抵消移动造成的空白 */
}

.tab-3 .text-3-1 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 0%;
    right: 61%;
}

.tab-3 .text-3-2 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 11%;
    right: 73%;
}

.tab-3 .text-3-3 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 8%;
    right: 6%;
}

.tab-3 .text-3-4 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 16%;
    right: 5%;
}

.tab-3 .text-3-5 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 61%;
    right: 50%;
}

.tab-3 .text-3-6 {
    font-size: clamp(1.2em, calc(2vw + 0.8em), 2.2em);
    position: absolute;
    top: 69%;
    right: 50%;
}

.shownow {
    display: flex !important;
    opacity: 1 !important;
    transition: font-size 0.3s ease-in-out;
}

@media only screen and (min-width: 768px) {
    .navbar.container {
        display: grid;
        justify-content: unset;
        grid-template-columns: 182px auto;
    }

    .navbar .logo {
        white-space: nowrap !important;
        /* 添加 !important 来强制应用样式 */
        margin-right: 2em;
    }

    /* 是优先级的问题导致单写nav不显示，因为css不是从上到下来渲染的，
    所以单写nav优先级别不够，但是加上navbar之后更加具体，优先级更高 */
    .navbar nav {
        display: flex;
        /* !important;  这样可以提高优先级别*/
        justify-content: space-between;
        background: none;
        position: unset;
        height: auto;
        width: 100%;
        padding: 0;
        /* 描写的越详细就优先级就越高 */
    }

    .navbar nav ul {
        display: flex;
    }

    .navbar nav a {
        color: black;
        font-size: 1em;
        padding: 0.1em 1em;
    }

    .navbar nav ul.first-ul {
        margin: 0;
    }

    .navbar nav li.current a {
        font-weight: bold;
    }

    .navbar nav li.Learn-More a {
        color: var(--primary-color);
        border: 3px solid var(--primary-color);
        font-weight: bold;
        border-radius: 5em;
        margin-top: -0.2em;
    }

    .navbar nav li.Learn-More a:hover {
        background: var(--primary-color);
        color: white;
    }

    .more,
    .exit {
        display: none;
    }
}

@media only screen and (min-width: 1208px) {
    .container {
        width: 1080px;
        margin: 0 auto;
    }

    .unfinish .container,
    .finish .container {
        width: 868px;
    }

    .add .container {
        width: 898px;
    }

    .main .so {
        display: none;
        right: 0;
    }

    .footer {
        position: relative;
    }

    .footer::before {
        content: "";
        position: absolute;
        width: 10%;
        height: 20em;
        background: var(--primary-color) !important;
        left: 0;
        top: -4em;
    }

    .footer:after {
        content: "";
        position: absolute;
        width: 200px;
        height: 20em;
        background: url("../image/dots.svg") no-repeat;
        left: 4.5em;
        top: 2em;
    }
}

@media screen and (min-width: 1450px) {
    .footer-container {
        width: 1320px;
        margin: 0 auto;
    }

    .footer-container .img2 {
        transform: translate(-20px, -334px);
        /* 向上移动 */
        margin-bottom: -334px;
        /* 抵消移动造成的空白 */
    }
}