/* 外部容器使用 Grid 布局 */
.outer-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* 每个外部框的样式 */
.outer-box {
    border: 5px solid #2c2c2c;
    padding: 10px;
    /* 内部元素使用 Flexbox 布局实现竖排 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 添加圆角效果，值越大圆角越明显 */
    border-radius: 8px;
    /* 添加背景颜色 */
    /* background-color: #791515; */
    /* 添加阴影效果，增强立体感 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 过渡效果，让鼠标悬停时的变化更平滑 */
    transition: all 0.3s ease;
}

/* 鼠标悬停时的样式 */
.outer-box:hover {
    /* 悬停时稍微放大 */
    transform: scale(1.02);
    /* 悬停时阴影加深 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 内部链接的样式 */
.inner-link {
    text-decoration: none;
    color: #333;
}

/* 媒体查询：当屏幕宽度大于等于 768px 时 */
@media (min-width: 768px) {
    .outer-container {
        /* 将容器划分为 3 列 */
        grid-template-columns: repeat(3, 1fr);
    }
}


a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#ffffff;}  /* 已访问链接 */
a:hover {color:#5cbd58;}  /* 鼠标移动到链接上 */
a:active {color:#494949;}  /* 鼠标点击时 */

.item {
    font-family: system-ui;
    color:rgb(255, 255, 255);
    margin: 8px auto;
    width: 80%;
    border: 3px solid rgb(133, 77, 77);
    padding: 10px;
    border-radius: 30px;
    text-align: center;
    font-size : 2vw;
    background: rgb(133, 77, 77);
    box-shadow: 2px 2px 2px #1e222b;
}
body {
    font-family: system-ui;
    background: #363e4e;
}
h1 {
    font-family: system-ui;
    background: #363e4e;
    color: white;
    text-align: center;
    font-size : 5vw;
}