@charset "UTF-8";
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= THESE STYLES DESIGNED AND BUILT WITH LOVING CARE -=-=-=
=-=-=-=- ENTIRELY BY HAND JUST FOR YOU BY IAN BESLER -=-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

/* -=-=-=-=-=-=-=-=-=-=
-=-=-= CSS RESET =-=-=-
=-=-=-=-=-=-=-=-=-=- */

* {
	margin: 0;
	padding: 0;
	font-family: "Helvetica", Arial, sans-serif;
	font-weight: normal;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= HTML5 SEMANTIC TAGS =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

html,body,main {
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

header,section,nav {
	width: 90%;
	height: 80vh;
	padding: 20vh 5% 0 5%;
}

h1,h3 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

nav {
	max-width: 600px;
	position: fixed;
	top: 0;
	transform: translateX(-100vw);
	background-color: rgba(255,255,255,0.9);
	font-size: 2em;
	transition: transform 0.5s;
}

	.slide-the-drawer {
		transform: translateX(0);
	}

ul {
	list-style-type: none;
}

a:link {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= HAMBURGER BUTTON STYLES =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

#hamburger-button {
	z-index: 2;
	position: fixed;
	padding: 0.4em;
	background-color: #fff;
	border-radius: 15%;
	border: 0.25em solid #000;
	margin: 1em;
	transition: border-radius 0.5s;
}

	#hamburger-button div {
		transition: transform 0.5s;
	}

	#hamburger-button:hover {
		background-color: #000;
	}

	#hamburger-button:hover div {
		background-color: #fff;
	}

		#hamburger-button.border-radius-fifty-percent {
			border-radius: 50%;
		}

		.close-button-one {
			transform: rotate(45deg)translateX(0.75em)translateY(0.8em);
		}

		.close-button-two {
			transform: scaleX(0);
		}

		.close-button-three {
			transform: rotate(-45deg)translateX(0.75em)translateY(-0.8em);
		}

#hamburger-button div {
	width: 3em;
	height: 0.5em;
	background-color: #000;
	margin: 0.6em;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= RESPONSIVE STYLES =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

@media screen and (min-width: 1200px) {

	header,section,nav {
		width: 90%;
		height: 90vh;
		padding: 10vh 5% 0 5%;
	}

	h1,h3 {
		font-size: 9em;
	}

	h2 {
		font-size: 7em;
	}

	nav {
		font-size: 4em;
	}

}