@font-face {
    font-family: 'Nunito';
    font-weight: 400;
    src: url(/fonts/Nunito.woff2) format('woff2');
} 
@font-face {
    font-family: 'Iconfont';
    src: url(/fonts/iconfont.woff) format('woff');
}
@font-face {
    font-family: 'Number';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/Number.woff2) format('woff2');
} 
@font-face {
    font-family: Roboto;
    src: url(/fonts/Roboto.woff2) format('woff2');
}
@font-face {
    font-family: Bottom;
    src: url(/fonts/tab.ttf) format('truetype');
}
footer {
    animation: fade-in 0.3s 0.3s ease-in both;
}
.iconbtn span:nth-child(2) { 
    font-family: Bottom, sans-serif;
    font-size: 0.90rem;
    display: none;
}
body > container > *:not(.current, footer) { 
    position: fixed;
    top: 200vh;
}
body:has(footer + *) {
    overflow: hidden;
}
body > container {
    transition: transform var(--duration-thin) ease-in-out;
    /* overflow-x: hidden; */
}
img.ok {
    --duration: 2.0s;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    animation: fade-in-out var(--duration) both;
    --width: 25vw;
    width: var(--width);
    height: var(--width);
} 
img.close {
    position: fixed;
    aspect-ratio: 1;
    top: calc(var(--safe-top, 0) + 4vw);
    right: 4vw;
    width: 70px;
    cursor: pointer;
    border-radius: 50%;
    background: #ffffff08;
    padding: 10px;
}
body[loading] > :is(container, footer) {
    display: none;
}
body[loading] > .loading {
    display: block!important;
    position: fixed;
    width: 25vw;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: grayscale(0.5) opacity(0.3);
    animation: fade-in 2s ease-in-out both infinite alternate;
}