@font-face {
    font-family: "unifont";
    src: url("../src/font/unifont-17.0.04.otf");
}


/* 横向盒子布局 */
.style_hboxcontainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: unifont;
    /* outline: 2px solid rgb(255, 0, 115); */
}


/* 纵向盒子布局 */
.style_vboxcontainer {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    font-family: unifont;
    /* outline: 2px solid rgb(0, 157, 255); */
}


/* 盒子布局内的卡片 */
.style_card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

    padding: 10px;
    backdrop-filter: blur(10px);

    /* 默认没有阴影 */
    box-shadow: none;

    /* 让 hover 动画更顺滑 */
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.style_card:hover {
    transform: translateY(-2px);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    border-color: rgba(252, 0, 80, 0.411);
    box-shadow: 0 20px 60px rgba(250, 0, 0, 0.422),
                0 0 20px rgba(255, 0, 98, 0.514);
}


/* 超链接 */
a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-family: unifont;
    font-weight: bold;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}
a:hover {
    color: rgb(0, 0, 0);
    text-shadow: 0 0 10px rgba(255, 43, 149, 0.431);
}


/* 需要使用卡片样式的按钮 */
button.style_card {
    all: unset;
    display: block;
    cursor: pointer;
    font: inherit;   /* 保持字体一致 */
}