* {
    padding: 0;
    margin: 0;
    line-height: 1.1;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: "Space Grotesk", sans-serif;
}

:root {
    font-size: 18px;
    --gap: 20px;
    --globalGap: var(--gap);
    --black: #000;
    --trans-black: rgba(0, 0, 0, 0.5);
    --white: #fff;
    --green: #05ea1b;
    --yellow: #fdec80;
    --constantSpace: 5px;
    --shadow1: var(--constantSpace) var(--constantSpace) 0 var(--trans-black);
    --shadow2: var(--constantSpace) var(--constantSpace) 0 var(--trans-black);
    --max-width: 1200px;
    --padding: max(calc((100vw - var(--max-width)) / 2), 20px);
    --paraBackgroundPosition1: 0;
    --paraBackgroundPosition2: 0;
    position: relative;
    color: var(--white);
    scroll-behavior: smooth;
    overflow-x: hidden;
    scroll-padding-top: 200px;
    background: url(../assets/images/only-small-stars.webp);
    background-attachment: fixed;
    background-position: 50%;
    &::after, &::before {
        content: '';
        position: absolute;
        inset: 0;
        will-change: background-position;
        z-index: -2;
    }
    &::after {
        background: url(../assets/images/only-medium-stars.webp);
        background-position: 50% var(--paraBackgroundPosition1);
    }
    &::before {
        background: url(../assets/images/only-large-stars.webp);
        background-position: 50% var(--paraBackgroundPosition2);
        z-index: 0;
    }
}

:root:has(nav button.open) {
    overflow: hidden;
}

:root.no-trans * {
    transition: none !important;
}

body {
    overflow-x: hidden;
}

em {
    font-weight: 600;
}

nav {
    padding: 20px min(var(--padding), 100px);
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    align-items: center;
    transition: background-color linear 0.25s;

    &:has(button.open) {
        background: transparent
    }

    &.show {
        background-color:  var(--black);
    }

    & .logo {
        width: 100px; 
    }

    & .button:not(.alt) {
        padding: 0;
        transform: none;
        background-color: transparent;
        border: none;
        color: var(--white);
        &:is(:hover, :focus) {
            color: var(--green);
        }
    }

    & button {
        display: none;
    }

    & ul {
        display: flex;
        flex-direction: row;
        list-style-type: none;
        gap: 20px;
        margin-left: auto;
        align-items: center;
    }

    @media (max-width: 900px) {
        & ul {
            display: none; 
        }

        & button {
            margin-left: auto;
            background: transparent;
            border: none;
            font-size: 0;
            cursor: pointer;
            display: flex;

            & span,
            & span::before,
            & span::after {
                content: '';
                display: block;
                width: 50px;
                height: 5px;
                background-color: var(--white);
                position: relative;
                transition: all linear 0.25s;
                transform-origin: 50%;
            }

            & span::before,
            & span::after {
                position: absolute;
                top: 15px;
            }

            & span::after {
                top: -15px;
            }

            &.open span {
                background-color: transparent;
            }

            &.open span::before { 
                top: 0;
                transform: rotate(45deg)
            }

            &.open span::after {
                top: 0;
                transform: rotate(-45deg)
            }

            & + ul {
                position: fixed;
                inset: 0;
                background-color: rgba(0, 0, 0, 0.85);
                z-index: -1;
                display: flex;
                flex-direction: column;
                gap: var(--gap);
                pointer-events: none;
                opacity: 0;
                transition: opacity linear 0.25s;
                justify-content: center;
                text-align: center;
                font-size: 2rem;
            }

            &.open + ul {
                opacity: 1;
                pointer-events: auto;
            }
        }
    }   
}

header {
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 100px var(--globalGap) 0 var(--globalGap);

    & a {
        display: block;
        width: 100%;
        max-width: 250px;
    }

    & img {
        
        display: block;
        filter: drop-shadow(var(--shadow1)) drop-shadow(var(--shadow2));
    }

    &.large {
        height: 100lvh;
        padding: var(--globalGap);
        & a {
           max-width: 500px;
        }
    }
    
}

.green { color: var(--green) }

h1 {
    font-size: 3rem; 
    line-height: 1.25;
    -webkit-text-stroke: var(--constantSpace) var(--black);
    paint-order: stroke fill;
}
h2 { font-size: 2.75rem; line-height: 1.25; }
h3 { font-size: 1.75rem; line-height: 1.25; }
h4 { font-size: 1.5rem; line-height: 1.25; }
h5, h6 { font-size: 1.25rem; line-height: 1.25; }

.ben-day-dots {
    
    &::before,
    &::after {
        content: '';
        position: absolute;
        mask-image: url(/assets/images/ben-day-dots.png);
        mask-size: 75px;
        display: block;
        inset: 0;
        border-radius: 50%;
        z-index: 0;
    }

    &::before {
        background-color: var(--end);
        mask-position: 0;
        top: 7.5px;
        left: 7.5px;
        z-index: 3;
    }
    
    &::after {   
        background-color: var(--mid);
    }
}

.outlined-text {
    -webkit-text-stroke: var(--constantSpace) var(--black);
    paint-order: stroke fill;
}

.textblock {
    max-width: var(--max-width);
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: var(--globalGap);
    justify-content: center;
    position: relative;
    min-height: 100lvh;

    /* & h1, h2, p {
        opacity: 1;
        transition: none; 
    } */

    & p {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    & img { max-width: 500px; margin: auto }

}

.universal {
    position: relative;
    max-width: 600px;
    width: 100%;
    background-size: contain;
    margin: auto;

    & img {
        width: 100%;
        filter: drop-shadow(var(--shadow1));
    }

    /* &::before {
        position: absolute;
        inset: 0;
        content: '';
        mask-image: var(--image);
        mask-size: contain;
        mask-repeat: no-repeat;
        background-image: url(../assets/images/ben-day-dots.png);
        background-size: 75px;
        margin: auto;
        opacity: 0.25;
        z-index: 10;
    } */
}

.planets {

    margin-bottom: 100px;

    @media (max-width: 990px) {
        display: flex;
        flex-direction: column;
        gap: 100px;
    }
 
    & .planet-wrap {
        display: flex;
        gap: 50px;
        --columns: 2;
        --gap: 50px;
        padding: 0 var(--padding);
        margin: auto;
        background-size: cover;
        background-position: 0 100%;
        min-height: 150vh;
        background-image: var(--background);
        background-repeat: no-repeat;
        background-attachment: fixed;
        position: relative;
        max-width: 100%;
        

        @media (max-width: 990px) {
            flex-direction: column;
            background-size: 100% auto;
        }

        &.reverse {
            flex-direction: row-reverse;
            @media (max-width: 990px) {
                flex-direction: column;
            }
        }

        & div.column {
           flex: 0 1 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
           display: flex;
           padding: 100px 0;
           position: relative;
           @media (max-width: 990px) {
                padding: 0;
            }
        }

        & article {
            border-radius: 0;
            padding: 30px;
            padding-bottom: 60px;
            color: var(--black);
            flex-direction: column;
            display: flex;
            justify-content: center;
            gap: calc(var(--gap) / 2);
            align-self: center;
            position: relative;

            & ul {
                flex-direction: column;
                display: flex;
                gap: calc(var(--gap) / 2);
            }

            * {
                position: relative;
                z-index: 5;
            }

            &::after,
            &::before {
                content: '';
                position: absolute;
                inset: -20px;
                border-radius: 0;
                clip-path: polygon(0% 0%, 95% 5%, 100% 90%, 5% 100%);
                background-color: var(--yellow);
                background-image: url(../assets/images/ben-day-dots.png);
                background-blend-mode: overlay;
                @media (max-width: 900px) {
                    inset: -10px;
                }
            }

            &::before {
                background-color:  var(--trans-black);
                transform: translate(var(--constantSpace), var(--constantSpace));
                box-shadow: var(--shadow1), var(--shadow2);
            }

        }

        & .planet {
            position: relative;
            width: calc(500px * var(--scale, 1));
            background-size: contain;
            margin: auto;
            & img {
                width: 100%;
            }
        }

        &.reverse {
            & article::after,
            & article::before  {
                clip-path: polygon(5% 5%, 100% 0%, 95% 100%, 0% 90%);
            }
        }

    }
}


.riverflow {
    max-width: var(--max-width);
    margin: auto;
    @media (max-width: 990px) {
        display: flex;
        flex-direction: column;
        gap: 100px;
    }

 
    & .riverflow-wrap {
        display: flex;
        padding: var(--globalGap);
        gap: 50px;
        --columns: 2;
        --gap: 50px;

        @media (max-width: 990px) {
            flex-direction: column;
        }

        &:nth-child(even) {
            flex-direction: row-reverse;
            @media (max-width: 990px) {
                flex-direction: column;
            }
        }

        & div.column {
           flex: 0 1 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
           display: flex;
           padding: 100px 0;
           position: relative;
           @media (max-width: 990px) {
                padding: 0;
            }
        }

        & article {
            border-radius: 0;
            padding: 30px;
            padding-bottom: 60px;
            color: var(--black);
            flex-direction: column;
            display: flex;
            justify-content: center;
            gap: calc(var(--gap) / 2);
            align-self: center;
            position: relative;

            & ul {
                flex-direction: column;
                display: flex;
                gap: calc(var(--gap) / 2);
            }

            * {
                position: relative;
                z-index: 5;
            }

            &::after,
            &::before {
                content: '';
                position: absolute;
                inset: -20px;
                border-radius: 0;
                clip-path: polygon(0% 0%, 95% 5%, 100% 90%, 5% 100%);
                background-color: var(--yellow);
                background-image: url(../assets/images/ben-day-dots.png);
                background-blend-mode: overlay;
                @media (max-width: 900px) {
                    inset: -10px;
                }
            }

            &::before {
                background-color:  var(--trans-black);
                transform: translate(var(--constantSpace), var(--constantSpace));
                box-shadow: var(--shadow1), var(--shadow2);
            }

        }

        &:nth-child(even) {
            & article::after,
            & article::before  {
                clip-path: polygon(5% 5%, 100% 0%, 95% 100%, 0% 90%);
            }
        }

        & .img-wrap {
            position: relative;
            width: calc(500px * var(--scale, 1));
            background-size: contain;
            margin: auto;
        }

        & img {
            margin: 0 auto;
            height: auto;
            width: 100%;
            align-self: center;
            filter: drop-shadow(var(--shadow1));
        }

    }
}

.riverflow .riverflow-wrap img {
    width: auto;
    display: block;
    max-width: min(100%, 300px);
    max-height: 400px;
    object-fit: contain;
}

:is(.planets, .riverflow) :is(.planet-wrap, .riverflow-wrap):not(.reverse) a {
    transform: skew(-15deg, 0deg);
    & span {
        transform: skew(15deg, 0deg);
    }
    &:is(:hover, :focus) {
        transform: skew(0deg, 0deg);
        & span {
            transform: skew(0deg, 0deg);
        }
    }
}

.asteroids {
    overflow: hidden;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 100px 0;
    min-height: 100lvh;
    justify-content: center;

    @media (max-width: 990px) {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    & h2 {
        text-align: center;
        padding: 0 var(--padding);
    }
    & .asteroids-wrap {
        padding: var(--gap) 0;
        display: flex;
        width: fit-content;
        align-items: center;
        animation: asteroids 40s linear infinite;
        gap: var(--gap);
        --columns: 4;

        &:hover {
            animation-play-state: paused;
        }

        @media (max-width: 990px) {
            animation: none;
            overflow: auto;
            flex-wrap: nowrap;
            scroll-padding: 0px 20px;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            width: 100%;
            padding: 0 20px;
        }
           
       
    }
}

.single-asteroid {
    --start:#3E3B47;
    --mid: #705E4D;
    --end: #8C96A2;
    filter: drop-shadow(var(--shadow1));
    flex: 0 0 90%;
    max-width: 400px;
    margin: auto;
    position: relative;
    z-index: 50;

    &:nth-child(even),
    &.alt {
        transform: rotate(180deg);
        & .asteroid .asteroid-text { 
            transform: rotate(180deg);
        }
    }

    @media (max-width: 990px) {
        &.clone { display: none }
    }

    & .asteroid {
        padding: 50px 60px;
        color: var(--black);
        flex-direction: column;
        display: flex;
        justify-content: center;
        gap: calc(var(--gap) / 2);
        position: relative;
        min-height: 250px;

        & .asteroid-text { 
            position: relative;
            z-index: 50;
            text-align: center;
            color: var(--white);
            display: flex;
            flex-direction: column;
            gap: var(--gap);
            text-shadow: 1px 1px 0 var(--black);
        }

        & h3, p {
            z-index: 1;
        }

        & p {
            font-weight: 500;
        }

        & .mask {
            position: absolute;
            inset: 0;
            background-color: var(--start);
            background-image: url(../assets/images/asteroid-texture.webp);
            mask-image: url(../assets/images/asteroid.svg);
            mask-size: 100% 100%;
            background-blend-mode: luminosity;
            &::after,
            &::before {
                border-radius: 0;
                opacity: 0.35;
            }
        }
        
    }

}

@keyframes asteroids {
    from { transform: translateX(0%); }
    to { transform: translateX(calc( -50% - (var(--gap) / 2))) }
}

.button {
    width: fit-content;
    padding: 5px 10px;
    background-color: var(--black);
    border: var(--constantSpace) solid var(--black);
    color: var(--yellow);
    font-weight: bold;
    text-decoration: none;
    transition: background linear 0.25s, color linear 0.25s, transform linear 0.25s;
    -webkit-text-stroke: 0;
    display: block;
    cursor: pointer;
    transform: skew(15deg, 0deg);

    & span {
        transform: skew(-15deg, 0deg);
        transition: inherit;
        display: block;
    }

    &:is(:hover, :focus) {
        background-color: transparent;
        color: var(--black);
        transform: skew(0, 0deg);
        & span {
            transform: inherit;
        }
    }
    &.big {
        padding: 10px 20px;
        margin: 0 auto;
        font-size: 1.5em;
    }
    &.alt {
        background-color: var(--green);
        color: var(--black);
        &:is(:hover, :focus) {
            background-color: var(--black);
            color: var(--green);
        }
    }
}

form, .full-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 50px;
    color: var(--black);
    position: relative;
    z-index: 5;

    & a:not(.button) {
        font-weight: bold;
        color: var(--black);
        text-decoration: none;
        transition: color linear 0.25s;
        &:is(:hover, :focus) {
            text-decoration: underline;
            color: var(--green);
        }
    }

    & label {
        font-weight: bold;
    }

    & .input-wrapper {
        display: flex;
        gap: var(--gap);
        flex-direction: column;
    }

    & .two-columns {
        display: flex;
        gap: var(--gap) var(--gap);
        flex-wrap: wrap;
        --columns: 2;
        @media (max-width: 600px) {
            --columns: 1;
        }
        & > div {
            flex: 0 1 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
        }
    }

    &::after,
    &::before {
        content: '';
        position: absolute;
        inset: -20px;
        border-radius: 0;
        z-index: -1;
        clip-path: polygon(0% 0%, 97% 3%, 100% 90%, 3% 100%);
        background-color: var(--yellow);
        background-image: url(../assets/images/ben-day-dots.png);
        background-blend-mode: overlay;
        @media (max-width: 900px) {
            inset: -10px;
        }
    }

    &::before {
        background-color: var(--trans-black);
        transform: translate(var(--constantSpace), var(--constantSpace));
        box-shadow: var(--shadow1), var(--shadow2);
    }

    & :is(input, textarea) {
        width: 100%;
        padding: calc(var(--constantSpace) * 2);
        background-color: var(--white);
        border: var(--constantSpace) solid var(--black);
    }

    & textarea {
        height: 200px;
        resize: none;
    }

    & .response-text {
        font-weight: bold;
    }
}

.full-content {
    margin: 100px auto 0 auto;
}

footer {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: center;
    text-align: center;
    padding: 100px 0;
    line-height: 2;
    overflow: hidden;
    position: relative;

    & img {
        max-width: 100px;
    }

    * a {
        color: var(--white);
        text-decoration: none;
        &:is(:hover, :focus) {
            color: var(--yellow);
        }
    }
}

.surface {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 100%;
    position: relative;
    @media (max-width: 900px) {
        background-size: 100% auto;
    }
}

.surface.mercury {
    background-image: url(../assets/images/mercury-surface.webp);
}

.surface.mars {
    background-image: url(../assets/images/mars-surface.webp);
}

.surface.saturn {
    background-image: url(../assets/images/saturn-surface.webp);
}

.surface.pluto {
    background-image: url(../assets/images/pluto-surface.webp);
}

[class*="transition-"] {
    transition: transform 0.25s linear var(--delay, 0s), opacity 0.25s linear var(--delay, 0s);
}

/* Entrance positions */
.transition-from-left {
    transform: translateX(-100px) !important;
    opacity: 0.01 !important;
}

.transition-from-right {
    transform: translateX(100px) !important;
    opacity: 0.01 !important;
}

.transition-from-top {
    transform: translateY(-50px) !important;
    opacity: 0.01 !important;
}

.transition-from-bottom {
    transform: translateY(50px) !important;
    opacity: 0.01 !important;
}

.transition-from-small {
    transform: scale(0.5) !important;
    opacity: 0.01 !important;
}

/* Delay classes */
.transition-delay-25 {
    --delay: 0.25s;
}

.transition-delay-50 {
    --delay: 0.5s;
}

.transition-delay-75 {
    --delay: 0.75s;
}

.transition-delay-100 {
    --delay: 1s;
}