* {
    /*Reset*/
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    text-indent: 0;
	text-decoration: none;
}

:root {
	--bg-color-light: #ffffff;
	--nav-color-light: #303030;
	--over-color-light: #ffffff;
	
	--blue: #284a86;
	--green: #465522;
	--red: #91463a;
	--orange: #ff9d00;
	
	--sans-font: sans-serif;
}

html {
	background-color: var(--nav-color-light);
}

main {
    background-color: var(--bg-color-light);
    height: 100vh;
    width: 100vw;
    position: relative;
    z-index: 2;
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
}


/* Nav Menu */

#nav-toggle {
    height: 5rem;
    width: 5rem;
    position: fixed;
    z-index: 4;
    left: 50%;
    bottom: 5vh;
    transform: translateX(-50%);
    background-color: var(--orange);
    border: none;
    border-radius: 5rem;
    outline: none;
    cursor: pointer;
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
    transform: translateX(-50%) scale(.3);
}

#nav-toggle:hover { transform: translateX(-50%) scale(1); }
#nav-toggle:active { transform: translateX(-50%) scale(.85); }

.main-nav {
    height: 50vh;
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
    overflow: hidden;
    background-color: var(--nav-color-light);
}

body[data-nav="true"] > main {
    transform: translateY(-50%);
    border-radius: 1rem;
}

#nav-links {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    margin-top: clamp(2rem, 2vw, 3rem);
    padding: 0rem clamp(1rem, 2vw, 2rem);
    transform: translateY(70%) scale(0.9);
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
    overflow-x: scroll;
    filter: drop-shadow(2px 3px 5px rgb(0 0 0 / 0.2));
}

#nav-links::-webkit-scrollbar { display: none; }

body[data-nav="true"] > nav > #nav-links { transform: translateY(0%) scale(1); }

#nav-links > .nav-link > .nav-link-label {
    color: white;
    font-size: 1.25rem;
    margin: 0rem;
    text-transform: uppercase;
    font-family: var(--sans-font);
}

#nav-links > .nav-link > .nav-link-image {
    width: max(20vw, 400px);
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
    object-fit: cover;
}


/* Overlay */

#top-toggle {
    height: 5rem;
    width: 5rem;
    position: fixed;
    z-index: 2;
    left: 50%;
    top: 5vh;
    transform: translateX(-50%);
    background-color: transparent;
    border: 10px solid var(--orange);
    border-radius: 5rem;
    outline: none;
    cursor: pointer;
    transition: 500ms cubic-bezier(.13, .53, .38, .97);
    transform: translateX(-50%) scale(.3);
}

#top-toggle:hover { transform: translateX(-50%) scale(.5); }
#top-toggle:active { transform: translateX(-50%) scale(.45); }

body[data-nav="true"] > #top-toggle { transform: translateY(-100vh); }

.overlay {
    height: 70vh;
    width: calc(80vw - 6rem);
    position: absolute;
    left: 10vw;
    bottom: 115vh;
	padding: 15vh 3rem 0 3rem;
    z-index: 3;
    background-color: var(--over-color-light);
    transition: transform 1500ms cubic-bezier(.13, .53, .38, .97);
    font-size: 5rem;
    font-family: var(--sans-font);
    overflow: hidden;
	border-radius: 0 0 1rem 1rem;
}

body[data-top="true"] > .overlay {
	overflow: scroll;
	transform: translateY(100vh);
}
.overlay::-webkit-scrollbar { display: none; }