@font-face {
    font-family: "Perfect DOS VGA 437";
    src: url('VGA.ttf');
}

@font-face {
    font-family: "Zpix (最像素)";
    src: url('zpix.ttf');
}

body {
    font-family: 'Perfect DOS VGA 437', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    position: relative;
    background: black;
}

img {
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 2px solid rgb(0, 0, 0); 
    box-shadow: 0 0 20px rgba(255, 255, 255); 
    max-width: 150px; 
}

.spacer {
    height: 20px;
}

.smallspacer {
    height: 15px;
}

.icon-icons {
    font-size: 28px;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 20px rgba(255, 255, 255);
}

#song-time {
    margin-top: 15px;
    color: rgb(255, 255, 255);
}

.infobox button {
    margin-top: 14px;
    margin-right: -1px;
    position: relative;
}

.infobox button .button-tooltip {
    font-family: 'VCR OSD Mono', monospace;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.infobox button:hover .button-tooltip {
    visibility: visible;
    opacity: 1;
}

button {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    margin: 5px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0);
}

button:hover {
    transform: translateY(-3px);
}

video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.proceed-button {
    background-color: transparent;
    border: none;
    font-size: 40px;
    color: rgb(255, 255, 255);
    position: fixed;
}

.proceed-button:hover {
    color: gray;
    animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
    from { text-shadow: 0 0 20px rgba(255, 255, 255); }
    to { text-shadow: 0 0 30px rgba(255, 255, 255); }
}

.glass-box {
    color: rgb(255, 255, 255);
    text-shadow: 0 0 10px rgba(255, 255, 255);
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0px);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icons {
    color: rgb(255, 255, 255);
    margin-top: -20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.icon-container {
    position: relative;
}

.icon-text {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    height: 20px;
    overflow: hidden;
}

.icon-container:hover .icon-text {
    visibility: visible;
    opacity: 1;
}

.typewriter {
    position: relative;
    top: 4px;
    right: 0px;
    color: rgb(255, 255, 255);
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid rgba(255, 175, 231);
    animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite, flicker 0.15s infinite;
}

@keyframes typing {
    0% {
        width: 0
    }

    50% {
        width: 100%
    }

    100% {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgb(255, 255, 255)
    }
}

.snowflake {
    top: 0;
    left: 0;
    position: fixed;
    color: #fff;
    font-size: 15px;
    z-index: 9999;
    pointer-events: none;
    animation-name: snowflakes-fall, glow;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite;
    animation: flicker 0.15s infinite;
}

@keyframes snowflakes-fall {
    100% {
        transform: translateY(-10vh) rotateZ(0deg);
        opacity: 0;
    }
    100% {
        transform: translateY(100vh) rotateZ(360deg);
        opacity: 1;
    }
}

@keyframes flicker {
    0% {
        opacity: 0.27861;
    }

    5% {
        opacity: 0.34769;
    }

    10% {
        opacity: 0.23604;
    }

    15% {
        opacity: 0.90626;
    }

    20% {
        opacity: 0.18128;
    }

    25% {
        opacity: 0.83891;
    }

    30% {
        opacity: 0.65583;
    }

    35% {
        opacity: 0.67807;
    }

    40% {
        opacity: 0.26559;
    }

    45% {
        opacity: 0.84693;
    }

    50% {
        opacity: 0.96019;
    }

    55% {
        opacity: 0.08594;
    }

    60% {
        opacity: 0.20313;
    }

    65% {
        opacity: 0.71988;
    }

    70% {
        opacity: 0.53455;
    }

    75% {
        opacity: 0.37288;
    }

    80% {
        opacity: 0.71428;
    }

    85% {
        opacity: 0.70419;
    }

    90% {
        opacity: 0.7003;
    }

    95% {
        opacity: 0.36108;
    }

    100% {
        opacity: 0.24387;
    }
}

a {
    text-decoration: none;
    color: #ffffff00;
}

a:hover {
    text-decoration: underline;
}