:root {
    --black: #000;
    --white: #fff;
    --red: #EE2625;

    --bezzy: cubic-bezier(0.8, 0, 0, 1);
    --bezzy2: cubic-bezier(0.430, 0.195, 0.020, 1);
    --bezzy3: cubic-bezier(0.5, 0, 0, 1);
}

/* Hide scrollbars for all elements */
* {
    margin: 0;
	padding: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    box-sizing: border-box;
	-webkit-font-smoothing: subpixel-antialiased; /* Enable subpixel antialiasing for better text rendering */
	-moz-osx-font-smoothing: grayscale; /* Enable grayscale antialiasing for better text rendering */
	text-rendering: geometricPrecision; /* Improve text rendering quality */
}
*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera and Edge Chromium */
}

html, body {
    /* Easy rems, 1rem - 10px */
    font-size: 62.5%;
    background: var(--black);
    color: var(--white);
}

.wrapper {
    position: relative;
    height: 100svh;
    overflow: hidden;
}

.content {
    position: relative;
}


.hero {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100svh;
    overflow: clip;

    & picture, & img {
        display: block;
    }

    & picture {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--black);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}






/* Everything below here is not needed to create the infinite scroll effect */

/* Header Styling */

header, footer {
    position: fixed;
    z-index: 12;

    display: flex;
    align-items: center;
    padding: 1.2rem;
    background: linear-gradient(to var(--dir), rgba(0, 0, 0, 0.8) -50%, rgba(0, 0, 0, 0) 100%);

    nav {
        display: flex;
        align-items: center;
        gap: 2.4rem;
    }


    h1, a {
        display: inline-block;
        
        color: var(--white);
        font-size: 1.2rem;
        font-family: "Inter Tight", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        transition: opacity 0.4s var(--bezzy2);
    }

    a {
        &:hover {
            opacity: 0.5;
        }
    }
}


header {
    --dir: bottom;

    justify-content: space-between;
    inset: 0 0 auto 0;
}

footer {
    --dir: top;

    justify-content: center;
    inset: auto 0 0 0;
}


/* Mobile Styling */
@media (max-width: 700px) {
    header, footer {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 1.2rem;
        padding: 2.4rem;

        & nav {
            gap: 1.2rem;
        }
    }
}