body {
    overflow: hidden;
}

.pixel-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 20%, rgba(13, 60, 104, 0.8), transparent 36vw),
        radial-gradient(circle at 80% 65%, rgba(17, 48, 93, 0.68), transparent 34vw),
        radial-gradient(circle at 50% 105%, rgba(28, 88, 153, 0.28), transparent 42vw),
        #16315b;
}

#localtime,
main {
    z-index: 1;
}

#localtime {
    position: relative;
}

.pixel-background span {
    position: absolute;
    width: 58vw;
    height: 58vw;
    min-width: 420px;
    min-height: 420px;
    background: rgba(49, 124, 168, 0.46);
    border-radius: 44% 56% 62% 38%;
    filter: blur(28px);
    opacity: 0.8;
    animation: pixelFloat 5s infinite alternate ease-in-out;
}

.pixel-background span:nth-child(1) {
    left: -18vw;
    top: -20vw;
}

.pixel-background span:nth-child(2) {
    right: -24vw;
    top: 12vh;
    background: rgba(29, 88, 154, 0.56);
    border-radius: 62% 38% 36% 64%;
    animation-name: pixelFloatReverse;
    animation-duration: 7s;
}

.pixel-background span:nth-child(3) {
    left: 18vw;
    bottom: -30vw;
    background: rgba(45, 112, 145, 0.34);
    border-radius: 34% 66% 58% 42%;
    animation-duration: 8s;
}

.pixel-background span:nth-child(4) {
    right: 18vw;
    bottom: -20vw;
    width: 46vw;
    height: 46vw;
    background: rgba(18, 64, 130, 0.58);
    border-radius: 58% 42% 48% 52%;
    animation-name: pixelDrift;
    animation-duration: 6s;
}

.pixel-background::before {
    content: "";
    position: absolute;
    inset: -12%;
    background:
        linear-gradient(120deg, transparent 0 26%, rgba(80, 190, 255, 0.24) 26% 42%, transparent 42% 100%),
        linear-gradient(28deg, transparent 0 54%, rgba(20, 72, 160, 0.34) 54% 70%, transparent 70% 100%);
    filter: blur(10px);
    animation: pixelBand 9s infinite alternate ease-in-out;
}

.pixel-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(120, 215, 255, 0.24) 0 1.4px, transparent 1.5px),
        repeating-linear-gradient(0deg, rgba(80, 190, 255, 0.1) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, rgba(80, 190, 255, 0.1) 0 1px, transparent 1px 8px);
    background-size: 8px 8px, 8px 8px, 8px 8px;
    mix-blend-mode: overlay;
    opacity: 0.9;
}

@keyframes pixelFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 44% 56% 62% 38%;
    }

    to {
        transform: translate3d(12vw, 8vh, 0) scale(1.18);
        border-radius: 62% 38% 42% 58%;
    }
}

@keyframes pixelFloatReverse {
    from {
        transform: translate3d(0, 0, 0) scale(1.08);
        border-radius: 62% 38% 36% 64%;
    }

    to {
        transform: translate3d(-14vw, 10vh, 0) scale(0.94);
        border-radius: 38% 62% 68% 32%;
    }
}

@keyframes pixelDrift {
    from {
        transform: translate3d(0, 0, 0) scale(0.92);
        border-radius: 58% 42% 48% 52%;
    }

    to {
        transform: translate3d(-8vw, -12vh, 0) scale(1.15);
        border-radius: 36% 64% 60% 40%;
    }
}

@keyframes pixelBand {
    from {
        transform: translate3d(-3vw, -2vh, 0) rotate(0deg);
    }

    to {
        transform: translate3d(5vw, 4vh, 0) rotate(4deg);
    }
}

@media (max-width: 700px) {
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}