/* 重置所有元素的 margin 和 padding */
* {
    /* 设置 margin 为 0 */
    margin: 0;
    /* 设置 padding 为 0 */
    padding: 0;
}

/* 设置 html 和 body 的基本样式 */
html,
body {
    /* 设置 margin 为 0 */
    margin: 0;
    /* 设置字体 */
    font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}

/* 防止页面内容溢出 */
body {
    /* 设置 overflow 为 hidden */
    overflow: hidden;
}

/* 设置 .main 的样式 */
.main {
    /* 宽度为视口的 100% */
    width: 100vw;
    /* 所有属性的过渡效果 */
    transition: all .7s ease-in-out;
}

/* 设置 .main .list 的样式 */
.main .list {
    /* 宽度为视口的 100% */
    width: 100vw;
    /* 高度为视口的 100% */
    height: 100vh;
    /* 原本用于移动元素位置的属性，现在被注释掉了 */
    /* transform: translateY(-100vh); */
}

/* 设置第一个 .main .list 的样式 */
.main .list:first-of-type {
    /* 设置背景图片 */
    background-image: url(./images/Universum_TV_Multispiel_2006.jpg);
    /* 背景图片覆盖整个元素 */
    background-size: cover;
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 子元素沿着垂直方向排列 */
    flex-direction: column;
    /* 子元素在垂直方向上居中 */
    justify-content: center;
    /* 子元素在水平方向上居中 */
    align-items: center;
}

/* 设置第一个 .main .list 下的 h1 的样式 */
.main .list:first-of-type h1 {
    /* 文字居中 */
    text-align: center;
    /* 设置背景色，黑色半透明 */
    background-color: rgba(0, 0, 0, 0.7);
    /* 设置文字颜色为白色 */
    color: white;
    /* 设置内边距 */
    padding: 1em 2em;
    /* 设置字体大小 */
    font-size: 6em;
}

/* 设置第二个 .main .list 的样式 */
.main .list:nth-of-type(2) {
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 设置背景色 */
    background-color: #BE8E70;
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 子元素之间有等量的空间 */
    justify-content: space-between;
    /* 子元素在垂直方向上居中 */
    align-items: center;
    /* 设置左边距 */
    padding-left: 5%;
    /* 设置右边距 */
    padding-right: 5%;
    /* 设置 box-sizing 为 border-box，这样 padding 和 border 的宽度会被包含在元素的总宽度和高度内 */
    box-sizing: border-box;
}

/* 设置第二个 .main .list 下的 p 的样式 */
.main .list:nth-of-type(2) p {
    /* 文字两端对齐 */
    text-align: justify;
    /* 设置宽度 */
    width: 50%;
    /* 设置字体大小 */
    font-size: 2em;
}

/* 设置 .fly-image 的样式 */
.fly-image {
    /* 文字居中 */
    text-align: center;
    /* 在垂直方向上移动元素 */
    transform: translateY(-50%);
    /* 设置宽度 */
    width: 40%;
    /* 所有属性的过渡效果 */
    transition: all 1s;
}

/* 定义一个名为 fly-in 的关键帧动画 */
@keyframes fly-in {

    /* 动画开始时 */
    0% {
        /* 元素从下方移入 */
        transform: translateY(100%);
        /* 元素完全透明 */
        opacity: 0;
    }

    /* 动画结束时 */
    100% {
        /* 元素停在原位 */
        transform: translateY(0);
        /* 元素完全不透明 */
        opacity: 1;
    }
}

/* 设置第三个和第四个 .main .list 的样式 */
.main .list:nth-of-type(3),
.main .list:nth-of-type(4) {
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 设置溢出内容为可滚动 */
    overflow-x: auto;
    /* 子元素之间有等量的空间 */
    justify-content: space-between;
    /* 设置背景色为浅粉色 */
    background-color: #FFD1DC;
    /* 设置左边距 */
    padding-left: 5%;
    /* 设置右边距 */
    padding-right: 5%;
    /* 设置 box-sizing 为 border-box，这样 padding 和 border 的宽度会被包含在元素的总宽度和高度内 */
    box-sizing: border-box;
}

/* 设置 .box 的样式 */
.box {
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 子元素沿着垂直方向排列 */
    flex-direction: column;
    /* 子元素在水平方向上居中 */
    align-items: center;
    /* 子元素在垂直方向上居中 */
    justify-content: center;
    /* 设置宽度 */
    width: 30%;
    /* 文字居中 */
    text-align: center;
}

/* 设置 .box img 的样式 */
.box img {
    /* 设置宽度 */
    width: 100%;
    /* 图片保持原始比例 */
    object-fit: contain;
    /* 设置图片圆角 */
    border-radius: 5%;
    /* 设置过渡效果，所有属性变化在 0.5 秒内完成 */
    transition: all 0.5s ease;
}

/* 设置鼠标悬停在 .box img 上时的样式 */
.box img:hover {
    /* 放大图片 */
    transform: scale(1.2);
}

.box figcaption {
    /* 设置图注的字体大小 */
    font-size: 1em;
    /* 设置图注的颜色 */
    color: #666;
    /* 在图注和下面的介绍之间添加 1em 的空间 */
    margin-bottom: 1em;
}

/* 设置 .box p 的样式 */
.box p {
    /* 设置宽度 */
    width: 100%;
    /* 高度自动 */
    height: auto;
    /* 设置字体大小 */
    font-size: 1.3em;
}

/* 设置 .box a 的样式 */
.box a {
    /* 设置字体大小 */
    font-size: 14px;
}

/* 设置第五个 .main .list 的样式 */
.main .list:nth-of-type(5) {
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 设置元素的定位类型为相对定位 */
    position: relative;
    /* 设置背景色为绿色 */
    background-color: #E2F0D9;
    /* 子元素沿着垂直方向排列 */
    flex-direction: column;
    /* 子元素在水平方向上居中 */
    align-items: center;
    /* 子元素在垂直方向上靠近顶部 */
    justify-content: flex-start;
    /* 设置文字对齐方式为居中 */
    text-align: center;
    /* 设置高度为 100vh，确保容器元素填满整个视口 */
    height: 100vh;
}

/* 设置 .box-final 的样式 */
.box-final {
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 子元素沿着垂直方向排列 */
    flex-direction: column;
    /* 子元素在水平方向上居中 */
    align-items: center;
    /* 子元素在垂直方向上靠近顶部 */
    justify-content: flex-start;
    /* 设置文字对齐方式为居中 */
    text-align: center;
    /* 设置字母间距为 1px */
    letter-spacing: 1px;
    /* 设置上端页边距 */
    margin-top: 5%;
    /* 设置宽度 */
    width: 100%;
    /* 设置左边距 */
    padding-left: 5%;
    /* 设置右边距 */
    padding-right: 5%;
}

/* 设置 .box-final 中的文本框的宽度 */
.box-final textarea {
    /* 设置宽度为 60% */
    width: 60%;
    /* 设置高度为 40vh */
    height: 40vh;
}

.copyright {
    /* 设置为绝对定位 */
    position: absolute;
    /* 从底部开始 */
    bottom: 0;
    /* 文本居中 */
    text-align: center;
    /* 宽度为 100% 以确保文本在中心 */
    width: 100%;
}

/* 隐藏元素 */
.hidden {
    /* 不显示 */
    display: none;
}

/* 设置 .back-button 的样式 */
.back-button {
    /* 设置为绝对定位 */
    position: absolute;
    /* 从顶部和左侧开始 */
    top: 0;
    left: 0;
    /* 移除边框 */
    border: none;
    /* 移除背景色 */
    background: none;
    /* 移除内边距 */
    padding: 0;
    /* 设置字体大小和颜色 */
    font-size: 16px;
    color: #000;
    /* 设置鼠标悬停时的样式 */
    cursor: pointer;
    /* 设置字体大小 */
    font-size: 1.5em;
}

#copyright-page {
    /* 设置上边距 */
    margin-top: 2%;
    /* 设置宽度 */
    width: 100%;
}

#copyright-page ul {
    /* 设置左边距 */
    padding-left: 5%;
    /* 设置右边距 */
    padding-right: 5%;
    /* 设置文本对齐方式为左对齐 */
    text-align: left;
}