:root {
	--background: #FFF4D9;
	--background-2: black;
	--drop-shadow: #B1A996;
	--text: black;
	--instruction: #C2B9A5;
	--sticky-nav: white;
	--nav: white;
}

body {
	background-color: var(--background);
	margin: 0;
	font-family: Sitka Small;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.hidden {
	display: none;
}

#primary_cont {
	color: var(--text);
	margin-top: 7em;
	margin-left: 1em;
	margin-right: 1em;
	overflow-y: auto;
	min-height: 100vh;
}

#logo {
	width: 80%;
	max-width: 15em;
	height: auto;
	display: block;
	border-radius: 0.2em;
	margin-bottom: 1em;
}

#logo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0.2em;
}

#instruction {
	color: var(--instruction);
	bottom: 2%;
	position: absolute;
}

#secondary_cont {
	height: 100em;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--background-2);
	transform: translate(0, -50%);
	box-shadow: 1em 1em 2em var(--drop-shadow);
}

#nav {
	position: sticky;
	width: 100%;
	height: 5em;
	background-color: var(--nav);
	z-index: 1002;
}

#description {
    margin-bottom: 0.5em;
}

#buttons_spacer {
    height: 3em;
}

.button_container {
    margin-top: 1em;
}

#scroll_instruct {
    color: var(--instruction);
    font-style: italic;
}

.nav_sec_buttons {
    background-color: transparent;
    border-color: transparent;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.3s ease;
}

.nav_sec_buttons:active {
    text-decoration: underline;
}

.nav_sec_buttons:hover {
    animation: bounce 0.5s infinite alternate;
    cursor: pointer;
}

@keyframes bounce {
    to {
        transform: translateX(1em);
    }
}