/************************ COLORS ************************/
:root {
	--color-cream: #f5f5f5;
	--color-fadedblack: #1f1f1f;
	--color-mutedblue-darkest: #2a363b;
	--color-mutedblue-darker: #556d77;
	--color-mutedblue: #2c6f8b;
}

/************************ LAYOUT ************************/
section {
	height: 100vh; /* Make height 100% of viewport height*/
	
	display: flex;
	justify-content: center;
	align-items: center;

	scroll-snap-align: start;
}

.container {
	height: 100vh; /* Make height 100% of viewport height*/
	
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

.hamburger {
	position: fixed;
	top: 2em;
	left: 2em;
	display: block;
	width: 40px;
	cursor: pointer;
	appearance: none;
	background: none;
	outline: none;
	border: none;
	z-index: 99;
}

.hamburger .bar, .hamburger::after, .hamburger::before {
	content: '';
	display: block;
	width: 100%;
	height: 5px;
	background-color: var(--color-cream);
	margin: 6px 0px;
	transition: 0.4s;
}

.hamburger.is-active::before {
	transform: rotate(-45deg) translate(-8px, 6px);
}

.hamburger.is-active::after {
	transform: rotate(45deg) translate(-9px, -8px);
}

.hamburger.is-active .bar {
	opacity: 0;
}

.navMenu {
	position: fixed;
	top: 0;
	right: 100%;
	width: 100%;
	min-height: 100vh;
	z-index: 98;
	background-color: var(--color-mutedblue-darkest);
	padding-top: 1em;
	transition: 0.4s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.navMenu.is-active {
	right: 0;
}

/************************ FUNCTION ************************/

nav ul {
	list-style-type: none;
}

nav ul li {
	display: inline-block;
	padding: 1.25vw;
}

nav ul li a {
	transition: all 0.3s ease 0s;
}

/************************ DESIGN ************************/
h1,h2,h3,h4,h5,h6, p, a, #typed {
	color: var(--color-cream);
	font-family: 'Montserrat', sans-serif;
	font-size: 3vw;
}

h1 {
	font-size: 3vw;
}

h2 {
	font-size: 2vw;
}

h2 a {
	font-size: 2vw;
}

.text {
	font-size: 1.9vw;
}

.rounded-circle-border {
	border: 1px solid var(--color-cream);
	padding: 0.25em;
	border-radius: 1vw;
}

a {
	text-decoration: none;
	font-size: 3vw;
	border-bottom: none;
}

nav ul li a:hover {
	border-bottom: 5px solid var(--color-cream);
}

.active {
	border-bottom: 5px solid var(--color-cream);
}

#one {
	background-color: var(--color-mutedblue-darkest);
	display: flex;
	flex-direction: column;
}

#one .text, #two .text, #three .text {
	width: 80%;
	line-height: 1.3em;
}

#two {
	background-color: var(--color-fadedblack);
	flex-direction: column;
}

#two h2 {
	width: 80%;
	line-height: 1.3em;
}

#three {
	background-color: var(--color-mutedblue-darker);
	flex-direction: column;
}

#typed {
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	h1,h2,h3,h4,h5,h6, p, a, #typed {
		font-size: 8vw;
	}
	
	h1 {
		font-size: 8vw;
	}
	h2 {
		font-size: 7vw;
	}
	p {
		font-size: 8vw;
	}

	.text {
		font-size: 4vw;
	}

	h2 a {
		font-size: 4vw;
	}
}