section {
    /* 相对定位 */
    position: relative;  display: flex;  overflow: hidden;  align-items: center;  justify-content: center;  min-height: 100vh;

/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

/* 背景颜色 */

section .color {
    /* 绝对定位 */
    position: absolute;

/* 使用filter(滤镜) 属性，给图像设置高斯模糊*/

    filter: blur(200px);
}

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

section .color:nth-child(1) {
    top: -350px;  width: 600px;  height: 600px;  background: #ff359b;
}

section .color:nth-child(2) {
    bottom: -150px;  left: 100px;  width: 500px;  height: 500px;  background: #fffd87;
}

section .color:nth-child(3) {
    right: 100px;  bottom: 50px;  width: 500px;  height: 500px;  background: #00d2ff;
}
.box {
    position: relative;
}


.menu-container {
    overflow: hidden;  width: 100%;  margin: 0 auto;  border-radius: 12px;  background: white;  box-shadow: 0 4px 6px rgba(0, 0, 0, .1);

    ;
}

.menu {
    list-style: none;
}

.menu-item {
    position: relative;  border-bottom: 1px solid #eee;

    ;
}

.menu-item:last-child {
    border-bottom: 0;
}

.menu-link {
    font-size: 14px;  display: flex;  align-items: center;  padding: 1rem 1.5rem;  transition: background .3s ease;  text-decoration: none;  color: #333;
}

.menu-link:hover {
    background: #f8f9fa;
}

.menu-link i {
    margin-right: 12px;  color: #666;
}

.submenu {
    overflow: hidden;  max-height: 0;  transition: max-height .3s ease-out;  background: #f8f9fa;
}

.submenu.active {
    max-height: 500px;
}

.submenu .menu-link {
    padding-left: 2.5rem;
}

.arrow {
    margin-left: auto;  transition: transform .3s ease;
}

.arrow.active {
    transform: rotate(180deg);
}

@media(max-width:480px) {
    body {
        padding: 1rem;
    }

    .menu-link {
        padding: .8rem 1rem;
    }

    .submenu .menu-link {
        padding-left: 2rem;
    }
}