/* 引入手写风格的字体 */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

#experiment_title {
    font-size: 6vw;                      /* 使用 vw 单位来调整字体大小，响应式 */
    font-family: "SimSun", "宋体", serif; /* 使用手写风格字体 */
    font-weight: bold;                   /* 字体加粗 */
    margin-top: 20vh;                    /* 将标题从页面的上下 1/3 的地方开始，使用 vh 单位 */
    margin-bottom: 5vh;                  /* 底部间距使用 vh 单位 */
    text-align: center;                  /* 水平居中 */
    color: #333;                         /* 字体颜色 */
}

/* 按钮容器 */
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 10vh;                    /* 使用 vh 单位来调整上方间距 */
}

/* 手绘风格按钮 */
#start-btn {
    font-family: "SimSun", "宋体", serif;
    font-size: 4vw;                      /* 按钮字体大小使用 vw 单位 */
    padding: 1.5vw 3.5vw;                /* 内边距使用 vw 单位 */
    border: 0.2vw solid black;           /* 边框宽度使用 vw 单位 */
    background: white;
    color: black;
    cursor: pointer;
    outline: none;
    position: relative;
    transition: all 0.1s ease-in-out;
    box-shadow: 0.3vw 0.3vw 0px black;    /* 阴影使用 vw 单位 */
    border-radius: 1vw;                  /* 圆角大小使用 vw 单位 */
}

/* 按钮悬停 - 颜色更深 + 阴影变化 + 放大效果 */
#start-btn:hover {
    background: #c6dcfd;
    box-shadow: 0.4vw 0.4vw 0px black;    /* 阴影效果变化 */
    transform: scale(1.1);                /* 鼠标悬停时按钮放大10% */
}

/* 按钮按下 - 按压效果 */
#start-btn:active {
    transform: translateY(0.5vw) scale(1); /* 按下时保持原尺寸 */
    box-shadow: 0.2vw 0.2vw 0px black;    /* 阴影效果变化 */
}

/* 让按钮更像是“手绘”风格 */
#start-btn::before {
    content: "";
    position: absolute;
    top: -0.2vw;
    left: -0.2vw;
    width: 100%;
    height: 100%;
    border: 0.2vw solid black;
    border-radius: 2vw;                  /* 边框圆角 */
    opacity: 0.7;
    transform: rotate(-2deg);
}

#start-btn::after {
    content: "";
    position: absolute;
    top: 0.2vw;
    left: 0.2vw;
    width: 100%;
    height: 100%;
    border: 0.2vw solid black;
    border-radius: 2vw;                  /* 边框圆角 */
    opacity: 0.7;
    transform: rotate(3deg);
}