:root {
    --clr-primary--100: white;
    --clr-primary--400: #777777;
    --clr-primary--600: #474748;
    --clr-primary--900: #000000;

    --clr-accent-400: #ffcc06;

    --ff-headers: 'Nikea';
    --ff-sub-headers: 'BebasNeue-Regular';
    --ff-collegate: 'SF Collegiate';
    --ff-copy: 'BebasNeue-Pro-Regular';

    --fs-200: 0.75rem;
    --fs-300: 1rem;
    --fs-400: 1.25rem;
    --fs-500: 1.375rem;
    --fs-600: 1.75rem;
    --fs-900: 2.125rem;

    --border-radius: 5px;

    --spacer: 5rem;
    --wall-size: 3rem;
}

.desktop-only {
    display: none;
}

@media (min-width: 40rem) {
    :root {
        --fs-500: 1.75rem;
        --fs-600: 2.125rem;
        --fs-900: 4.25rem;
    }

    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: initial;
    }
}

@font-face {
    font-family: 'Nikea';
    src: url('fonts/NIKEA.otf') format('opentype');
}

@font-face {
    font-family: 'SF Collegiate';
    src: url('fonts/SF Collegiate Solid.ttf') format('truetype');
}

@font-face {
    font-family: 'BebasNeue-Regular';
    src: url('fonts/BebasNeue-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'BebasNeue-Pro-Regular';
    src: url('fonts/Bebas-Neue-Pro-Regular.ttf') format('truetype');
}

/* reset */

*, *::before, *::after {
    box-sizing: border-box;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    line-height: 1.2;
}

body, h1, h2, h3, h4, p, figure {
    margin: 0;
}

ul[class] {
    list-style: none;
    padding: 0;
    margin: 0;
}

input,
button,
textarea,
select {
    font: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    line-height: 1.6;
    font-family: var(--ff-copy), sans-serif;
    font-size: var(--fs-500);
}

/* typography */


h2 {
    font-family: var(--ff-headers), sans-serif;
    text-align: center;
}

.nav-link, h3 {
    font-family: var(--ff-sub-headers), sans-serif;
}

.text-collegiate {
    font-family: var(--ff-collegate), sans-serif;
}

/* general layout */

.container {
    max-width: 50rem;
    padding: 2rem;
    margin-inline: auto;
}

section {
    padding-block: 2.5rem;
}

section[id] {
    scroll-margin-top: 5rem; /* Adjust this value to your header's height */
}

@media (min-width: 40rem) {
    section {
        padding-block: 3.5rem;
    }
}

.flow > * + * {
    margin-top: var(--flow-spacer, 1em);
}

.xl-space {
    margin-top: 5rem;
}

.bg-light {
    background-color: var(--clr-primary--400);
}

.bg-dark {
    background-color: var(--clr-primary--600);
}

.split {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.split > * {
    flex-basis: 100%;
    min-width: 0;
}

@media (min-width: 40rem) {
    .split {
        flex-direction: row;
    }
}

/*specific styling */

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    padding: 0.5rem 0.5rem;
}

header {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 10;

    .logo {
        /*padding: 0.5rem 0 0 0;*/
        height: clamp(5rem, 1rem + 15vw, 10rem);
    }

    h1 {
        flex-basis: 100%;
    }

    nav {
        right: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: space-evenly;
        align-items: center;
        min-width: 200px;

        a {
            color: var(--clr-primary--100);
            text-decoration: none;
            font-size: var(--fs-300);
            border: 0.75rem groove var(--clr-primary--400);
            padding: 0 0.75rem;
            border-radius: 1rem;
            transition: all 0.3s;
            position: relative;

            &::after {
                position: absolute;
                inset: 0;
                content: '';
                backdrop-filter: blur(8px);
                z-index: -1;
            }

            &:hover {
                background-color: rgba(54, 54, 54, 0.6);
                transform: scale(1.1);
            }
        }
    }

    iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        z-index: -1;
        height: 56.25vw; /* 16:9 aspect ratio: (9/16) * 100vw */
        min-height: 100vh;
        min-width: 177.78vh; /* Ensures coverage on tall viewports */
        border: 0;
    }
}

@media (min-width: 40rem) {
    .header-flex {
        align-items: start;
    }

    header {
        .logo {
            /*padding: 0.5rem 0 0 0.5rem;*/
        }

        h1 {
            flex-basis: initial;
        }

        nav {
            margin-top: 1rem;
            gap: 1rem;

            a {
                font-size: var(--fs-400);
                border: 1rem groove var(--clr-primary--400);
                padding: 0 1rem;
            }
        }
    }
}

#works {
    .garage {
        position: relative;
        height: 30rem;
        overflow-inline: hidden;
    }

    .wall {
        position: absolute;
        right: 0;
        width: calc(var(--wall-size) * 2);
        height: var(--wall-size);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .front {
        top: var(--spacer);
        width: 3rem;
        background: #77918d;
        height: 25rem;
        z-index: 2;

        padding-block-end: 1rem;
        padding-inline: 5px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        text-align: center;
        font-family: var(--ff-collegate), sans-serif;
        font-size: var(--fs-200);

        img {
            max-height: 5rem;
        }
    }

    .back {
        right: calc(var(--spacer) * .4);
        background: #607573;
        height: 25rem;
        z-index: 0;
    }

    .roof {
        position: absolute;
        background: #8ba9a5;
        width: calc(var(--wall-size) * 3);
        height: var(--spacer);
        right: calc(-1 * var(--spacer) * .7);
        transform: skew(45deg);
        z-index: 2;
    }

    .floor {
        position: absolute;
        background: #D5CFCF;
        width: calc(var(--wall-size) * 2);
        height: var(--spacer);
        right: calc(-1 * var(--spacer) * 0.15);
        bottom: 0;
        transform: skew(45deg);
        opacity: .6;
        z-index: 1;
    }

    .center {
        height: 25rem;
        width: 2rem;
        box-shadow: -1rem 0 2.5rem black;
        border-radius: 1rem;
        position: absolute;
        right: calc(var(--wall-size) - 2.5rem);
        top: calc(var(--spacer) / 2);
        transform: skew(2deg);
        z-index: 2;
    }

    .images {
        display: flex;
        gap: 3rem;
        overflow-x: scroll;
        overflow-y: hidden;
        padding-inline-start: 3rem;

        img {
            &:last-of-type {
                margin-inline-end: 9rem;
            }

            margin-block-start: 3.2rem;
            max-height: 25rem;
            border-radius: var(--border-radius);
            z-index: 1;
            cursor: pointer;
            transition: transform 0.2s;

            &:hover {
                transform: scale(1.02);
            }
        }
    }
}

@media (min-width: 40rem) {
    :root {
        --wall-size: 10rem;
    }

    #works {
        .roof {
            width: calc(var(--wall-size) * 2);
            right: calc(-1 * var(--spacer) * 1.5);
        }

        .wall {
            width: var(--wall-size);
        }

        .front {
            padding-inline: 0;
        }

        .back {
            right: var(--spacer);
        }

        .floor {
            width: calc(var(--wall-size) - 5px);
            right: calc(var(--spacer) / 2);
        }

        .images {
            img {
                &:last-of-type {
                    margin-inline-end: 20rem;
                }

                margin-block-start: 2.5rem;
            }
        }
    }
}

#contact {
    color: var(--clr-accent-400);
    background-image: url('images/gabe-bg.webp');
    background-size: cover;
    background-position: center;
    text-align: center;

    a {
        text-decoration: none;
        color: var(--clr-primary--100);

        &:hover {
            color: var(--clr-primary--400);
        }
    }

    h3 + p {
        --flow-spacer: .5em;
    }

    h3 {
        --flow-spacer: 3em;
    }
}

#about {
    img {
        width: 100%;
        border-radius: var(--border-radius);
        box-shadow: 0 0 3rem var(--clr-primary--400);
    }
}

.banner {
    display: flex;
    overflow: hidden;

    .slide {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 5rem;
        padding-inline: 2.5rem;
        white-space: nowrap;
        font-style: italic;
        font-size: var(--fs-600);
        color: var(--clr-primary--100);
        animation: slide 20s linear infinite;

        img {
            height: var(--fs-600);
        }
    }
}

footer {
    height: clamp(2.5rem, 8vw, 8rem);
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    justify-content: center;

    a {
        font-family: var(--ff-headers), sans-serif;
        font-size: clamp(4rem, 15vw, 20rem);
        font-style: italic;
        line-height: 0.8;
        text-decoration: none;
        color: var(--clr-accent-400);
        text-shadow: 0.2rem 0.2rem 0 var(--clr-primary--900);
        white-space: nowrap;
        letter-spacing: -0.02em;
        transform: translate(-1.5%, -1%);
    }
}

.button-container {
    #unmute-btn {
        position: sticky;
        bottom: 1rem;
        margin-left: auto;
        margin-right: 1rem;
        margin-top: -4.5rem;
        cursor: pointer;
        border-radius: 50%;
        border: 1rem groove var(--clr-primary--400);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6.25rem;
        height: 4.375rem;
        font-size: var(--fs-500);
        z-index: 10;
        background-color: transparent;
        transition: transform 0.3s, background-color 0.3s;

        &::after {
            border-radius: 50%;
            position: absolute;
            content: '';
            inset: 0;
            backdrop-filter: blur(8px);
            z-index: -1;
        }
    }

    #unmute-btn:hover {
        background-color: rgba(54, 54, 54, 0.6);
        transform: scale(1.1);
    }
}

#lightbox {
    border: none;
    background: transparent;
    max-width: 90vw;
    max-height: 90vh;
    padding: 0;
    outline: none;

    &::backdrop {
        background: rgba(0, 0, 0, 0.9);
        cursor: pointer;
    }

    img {
        max-width: 90vw;
        max-height: 90vh;
        object-fit: contain;
        cursor: pointer;
    }
}

@keyframes slide {
    to {
        transform: translateX(-100%);
    }
}