:root {

    --background: #0D1117;
    --foreground: #F8FAFC;
    --secondary: #94A3B8;
}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {

    font-size: 16px;
}

body {

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 2rem;

    font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

    color: var(--foreground);

    background:
            radial-gradient(
                    circle at top,
                    #151A21 0%,
                    #0D1117 55%,
                    #090C10 100%
            );

    overflow: hidden;
}

.hero {

    width: min(720px, 95vw);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    animation: fade .9s ease;
}

.brand {

    width: min(160px, 45vw);

    height: auto;

    margin-bottom: 4rem;

    animation: float 8s ease-in-out infinite;
}

.brand {

    transition:

            transform .3s ease,

            opacity .3s ease;
}

.brand:hover {

    transform:

            translateY(-6px)

            scale(1.03);
}

h1 {

    font-size: clamp(2.8rem, 6vw, 5rem);

    font-weight: 700;

    line-height: 1.05;

    letter-spacing: -.05em;

    margin-bottom: 2rem;
}

.description {

    max-width: 520px;

    color: var(--secondary);

    font-size: 1.15rem;

    line-height: 1.8;

    margin-bottom: .8rem;
}

.status {

    color: var(--secondary);

    opacity: .75;

    font-size: 1rem;
}

@keyframes fade {

    from {

        opacity: 0;

        transform: translateY(15px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-6px);
    }
}

footer {

    position: fixed;

    bottom: 32px;

    left: 50%;

    transform: translateX(-50%);

    font-size: .85rem;

    color: var(--secondary);

    opacity: .45;

    user-select: none;
}

::selection {

    background: #d4af37;

    color: white;
}

.version {

    position: fixed;

    bottom: 32px;

    right: 32px;

    color: var(--secondary);

    opacity: .45;

    font-size: .8rem;
}


@media (max-width: 700px) {

    .brand {

        width: 130px;

        margin-bottom: 3rem;
    }

    h1 {

        font-size: 2.7rem;
    }

    .description,
    .status {

        font-size: 1rem;
    }

    .version {

        right: 20px;
        bottom: 20px;
    }
}


@media (prefers-reduced-motion: reduce) {

    * {

        animation: none !important;
        transition: none !important;
    }
}