@font-face {
    font-family: "GenshinImpactZhLv1";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url(./gichn.woff2) format("woff");
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translateY(-50px); /* 从上方开始 */
    }
    50% {
        transform: translateY(10px); /* 弹跳到下方 */
    }
    70% {
        transform: translateY(-5px); /* 稍微向上回弹 */
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0); /* 停在原位 */
    }
}

@keyframes blurFadeIn {
    0% {
        backdrop-filter: blur(0); /* 从不模糊开始 */
        -webkit-backdrop-filter: blur(0);
        opacity: 0; /* 从透明开始 */
    }
    100% {
        backdrop-filter: blur(5px); /* 结束时模糊5px */
        -webkit-backdrop-filter: blur(5px);
        opacity: 1; /* 最终完全可见 */
    }
}

:root {
    color-scheme: light dark;
}

body {
    --primary: #7287fd;
    --card-hover: rgba(220, 224, 232, 1);
    --primary-hover: #5871fc;
    --card-bg: rgba(239, 241, 245, 0.8);
    --card-shadow: rgba(124, 127, 147, 0.5);
    --card-text: #4c4f69;
    --card-border-color: #8c8fa13a;
}

body.dark-mode {
    --primary: #b4befe;
    --primary-hover: #a3a5f2;
    --card-hover: rgba(17, 17, 27, 1);
    --card-bg: rgba(30, 30, 46, 0.8);
    --card-shadow: rgba(17, 17, 27, 0.5);
    --card-text: #cdd6f4;
    --card-border-color: #585b70;
}

.hidden {
    visibility: hidden;
}

body {
    font-family: "GenshinImpactZhLv1", "Arial", sans-serif;
    background: url('./img/genshinLaunch.jpg') no-repeat center center fixed;
    background-size: cover;
    animation: blurFadeIn 1s ease-out forwards;
    -webkit-animation: blurFadeIn 1s ease-out forwards;
    align-items: center;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.dark-mode {
    background-image: url(./img/dark.jpg);
}

h1 {
    color: var(--card-text);
    margin: 10px;
    background-color: var(--card-bg);
    padding: 10px;
    font-size: 28px;
    border-radius: 0.8rem;
    border: 1px solid var(--card-border-color);
    box-shadow: 5px 5px 10px var(--card-shadow);
    animation: bounce-in 0.3s ease-out forwards;
    -webkit-animation: bounce-in 0.3s ease-out forwards;
    max-width: min(100%,68rem);
    transition: 0.4s;
}

h1:hover {
    background-color: var(--card-hover);
    transition: 0.4s;
}

.nav-container {
    /* display: flex;
    flex-wrap: wrap;
    flex-direction: row; */
    margin: auto 0;
    gap: 10px;
    display: grid;
    grid-template-rows: repeat(auto-fill,1fr);
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    width: 90%;
    max-width: min(100%, 68rem);
    height: auto;
    /*max-height: calc(100vh - 6rem);*/
    padding: 10px;
}

.nav-link {
    /* background-color: rgba(255, 255, 255, 0.7); */
    display: flex;
    height: 13rem;
    padding: 20px 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: auto;
    /* border: black solid 1px; */
    /* border-radius: 20px; */
    box-shadow: 5px 5px 10px var(--card-shadow);
    animation: bounce-in 0.3s ease-out 0.3s forwards;
    -webkit-animation: bounce-in 0.3s ease-out 0.3s forwards;
    box-sizing: border-box;
    flex-direction: column;
    color: var(--card-text);
    border: 1px solid var(--card-border-color);
    background-color: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: .8em;
    transition: .4s;
}

.nav-link:hover {
    background-color: var(--card-hover);
    transition: 0.4s;
}

/*.nav-link.dark-mode {
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    padding: 20px 10px;
    text-align: center;
    margin-top: auto;
    border: black solid 1px;
    border-radius: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
    color: #ffffff;
    animation: bounce-in 0.3s ease-out 0.3s forwards;
}*/

.nav-image {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: .75rem;
}

.site-footer {
    width: min(100vw,100%);
    /* background-color: rgba(255, 255, 255, 0.7); */
    /* padding: 20px 10px; */
    text-align: center;
    /*margin-top: auto;*/
    /* border: black solid 1px; */
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 5px 5px 10px rgba(30, 30, 46, 0.7);
    /* color: #000000; */
    animation: bounce-in 0.3s ease-out 0.6s forwards;
    -webkit-animation: bounce-in 0.3s ease-out 0.6s forwards;
    box-sizing: border-box;
    border: 1px solid var(--card-border-color);
    color: var(--card-text);
    background-color: var(--card-bg);
    padding: 1rem 1rem .5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.site-footer:hover {
    background-color: var(--card-hover);
    transition: 0.4s;
}

/* .site-footer.dark-mode {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px 10px;
    text-align: center;
    margin-top: auto;
    border: black solid 1px;
    border-radius: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
    color: #ffffff;
    animation: bounce-in 0.3s ease-out 0.6s forwards;
} */

.footer-content {
    margin: 0 auto;
}

.social-links {
    /* margin: 10px 0; */
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
    margin: 1rem;
}

a {
    text-decoration: none;
    color: var(--primary);
    transition: color .25s ease-in-out;
}

a:hover {
    color: var(--primary-hover);
}

/*svg {
    fill: currentColor;
}*/

.no-underline {
    text-decoration: none;
}

/*@media (max-width: 1400px) {
    .site-footer {
        position: static;
    }
}*/