/* =========================================================
   alright lets make the internet slightly worse
   ========================================================= */

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


html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


body {
    background: #050a35;
    color: #f4f0d8;

    font-family: "Silkscreen", sans-serif;

    cursor: default;
}


/* =========================================================
   THE BIG FUCKING STAR CANVAS
   ========================================================= */

#starfield {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
}


/* =========================================================
   VIGNETTE
   Because apparently the edges of space need to be dramatic.
   ========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0, 0, 15, 0.18) 70%,
            rgba(0, 0, 15, 0.58) 100%
        );
}

/* =========================================================
   NYAN CAT
   tiny airborne bastard
   ========================================================= */

#nyan-link {
    position: fixed;

    width: 91px;
    height: 56px;

    z-index: 3;

    display: none;

    /*
        YES, IT IS CLICKABLE.

        NO, WE ARE NOT GIVING IT SOME GOD-AWFUL
        BLUE UNDERLINE LIKE IT'S 2007.
    */

    text-decoration: none;
    outline: none;
    border: none;

    cursor: pointer;

    pointer-events: auto;
}


#nyan-cat {
    display: block;

    width: 91px;
    height: 56px;

    object-fit: contain;

    image-rendering: pixelated;

    pointer-events: none;

    /*
        JS handles rotation.

        Don't put transition here.
        We want this fucker to immediately change direction.
    */
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.landing {
    position: relative;

    width: 100%;
    height: 100dvh;

    min-height: 500px;

    display: flex;
    flex-direction: column;

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

    z-index: 4;

    /*
        Canvas can still receive mouse events because the
        content itself doesn't need them.
    */
    pointer-events: none;
}


.hero {
    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

    transform: translateY(-2%);
}


/* =========================================================
   TITLE
   ========================================================= */

h1 {
    font-size: clamp(3rem, 7vw, 6.5rem);

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.02em;

    color: #f8f3d9;

    text-shadow:
        3px 3px 0 #c9c5ae;

    margin-bottom: 2.5rem;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.description {
    font-size: clamp(0.75rem, 1.5vw, 1.15rem);

    line-height: 2;

    color: #aeb7ed;

    text-shadow:
        1px 1px 0 #343b76;

    margin-bottom: 2.8rem;
}


/* =========================================================
   ENTER BUTTON
   ========================================================= */

.enter-button {
    position: relative;

    pointer-events: auto;

    display: flex;

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

    gap: 1rem;

    min-width: 240px;
    height: 76px;

    padding: 0 2rem;

    color: #f8f3d9;

    background: rgba(5, 10, 53, 0.45);

    border: 4px solid #f4f0d8;

    font-family: inherit;

    font-size: 1.35rem;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        5px 5px 0 #555a91;

    transition:
        transform 100ms ease,
        box-shadow 100ms ease,
        background 100ms ease;
}


.enter-button span {
    font-size: 1rem;
}


/*
    Fake little corner cutouts.
    Is this necessary? No.
    Does it look cool? Also yes.
*/

.enter-button::before,
.enter-button::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    background: #050a35;
}


.enter-button::before {
    top: -4px;
    left: -4px;
}


.enter-button::after {
    right: -4px;
    bottom: -4px;
}


.enter-button:hover {
    background: rgba(244, 240, 216, 0.08);

    transform: translate(3px, 3px);

    box-shadow:
        2px 2px 0 #555a91;
}


.enter-button:active {
    transform: translate(5px, 5px);

    box-shadow: none;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    position: absolute;

    bottom: 7%;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 0.75rem;

    color: #aeb7ed;

    font-size: clamp(0.6rem, 1vw, 0.8rem);

    text-align: center;

    text-shadow:
        1px 1px 0 #343b76;
}


.footer-sub {
    display: flex;

    align-items: center;

    gap: 0.6rem;
}


.alien {
    font-size: 1.1rem;
}


/*
    This link is intentionally NOT styled like some
    corporate ass website hyperlink.
*/

.footer-sub a {
    color: inherit;

    text-decoration: none;

    border: none;
}


.footer-sub a:hover {
    color: #f8f3d9;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .landing {
        min-height: 450px;
    }


    h1 {
        margin-bottom: 1.8rem;

        text-shadow:
            2px 2px 0 #c9c5ae;
    }


    .description {
        line-height: 1.8;

        margin-bottom: 2.2rem;

        padding: 0 1rem;
    }


    .enter-button {
        min-width: 200px;

        height: 64px;

        font-size: 1rem;

        border-width: 3px;

        box-shadow:
            4px 4px 0 #555a91;
    }


    footer {
        bottom: 5%;

        font-size: 0.55rem;

        padding: 0 1rem;
    }


    #nyan-cat {
        width: 91px;
        height: 56px;
    }
}


/* =========================================================
   DON'T MAKE PEOPLE WITH MOTION SENSITIVITY SUFFER
   ========================================================= */

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

    .enter-button {
        transition: none;
    }
}