#loading-screen {
    position: fixed;
    user-select: none;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background-color: #222222d2;
    z-index: var(--z-index-loading-screen);
    transition: var(--transition-10);
    cursor: wait;
}

#loading-screen.hidden {
    top: -100%;
}

#loading-screen .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60%;
}

#loading-screen .container .name * {
    font-size: var(--fs-12);
}

#loading-screen .container .loading-text {
    margin-block: 2vw;
}

#loading-screen .container .loading-text,
#loading-screen .container .loading-text * {
    font-size: var(--fs-18);
}

#loading-screen .choice-box {
    text-align: center;
}

#loading-screen .choice-box .choice-language {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--black);
    padding: 20px;
    border-radius: 6px;
    border: var(--border-global);
    gap: 10px;
}

#loading-screen .choice-box * {
    font-size: var(--fs-16);
    transition: var(--transition-1);
}

#loading-screen .choice-box .clickable {
    background-color: var(--black-dark);
    cursor: pointer;
    user-select: none;
    width: 80%;
    border: var(--border-global);
    border-radius: 4px;
}
#loading-screen .choice-box .clickable:hover {
    transform: scale(1.05);
}

#loading-screen .choice-box .clickable.clicked {
    box-shadow: 0 0 5px #eee2;
    opacity: .9;
    font-weight: 600;
    color: var(--font-blue);
}

span.cursor-key {
    display: inline-block;
    animation: cursor-key 1.2s steps(1, start) infinite;
}
span.cursor-key::before {
    content: "II";
}

@keyframes cursor-key {
    from {
        background-color: var(--white);
        color: var(--white);
    }
    50% {
        background-color: transparent;
        color: transparent;
    }
    to {
        background-color: var(--white);
        color: var(--white);
    }
}