/* v 260526.0000 UTC */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

body {
    background: #061b68;
}

.landing-page {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background-color: #020817;

    background-image: url('/assets/images/background.png');

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    isolation: isolate;
}

.landing-page::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;
    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,0.18) 78%,
            rgba(0,0,0,0.42) 100%
        );
}

.sprite-field {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.sprite {
    position: absolute;
    width: var(--sprite-size);
    opacity: var(--sprite-opacity);
    transform: translate(-50%, -50%) rotate(var(--sprite-rotate));
    animation: drift var(--sprite-speed) ease-in-out infinite;
    animation-delay: var(--sprite-delay);
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.25));
}

.vardaxis-wordmark {
    position: absolute;
    z-index: 10;

    left: 48.3%;
    top: 50%;

    width: max(108vw, 88vh);

    height: auto;
    max-width: none;
    max-height: none;

    object-fit: contain;

    transform: translate(-50%, -50%);

    pointer-events: none;
    user-select: none;

    filter:
        drop-shadow(0 0 24px rgba(0,0,0,0.55))
        drop-shadow(0 12px 36px rgba(0,0,0,0.45));
}

@keyframes drift {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: var(--sprite-drift-x) var(--sprite-drift-y);
    }
}

@media (max-width: 700px) {

    .vardaxis-wordmark {
        width: 112vw;
        max-height: 72vh;
    }

}