@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;
		list-style-type: none;
		text-decoration: none;
		color: #000;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: normal;
	}

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

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

/* =-=-=-=-=-=-=-=-=
=-=-=- HEADER =-=-=-
-=-=-=-=-=-=-=-=- */

	header {
		font-size: 0;
	}

	button#hamburger-button {
		position: fixed;
		background-color: rgba(255,255,255,0.7);
		border: 0.3vw solid #000;
		font-size: 5vw;
		line-height: 5vw;
		padding: 0.2vw 0.5vw 0.5vw 0.5vw;
		margin: 0.5vw;
		border-radius: 25%;
		outline: none;
	}

		button#hamburger-button:hover {
			color: #fff;
			background-color: rgba(0,0,0,0.7);
			border-color: rgba(255,255,255,0.1);
		}

		button#hamburger-button:active {
			color: #000;
			background-color: rgba(255,255,255,0.7);
			border-color: #000;
		}

			figure#dim-the-lights {
				position: fixed;
				width: 100%;
				height: 100%;
				opacity: 0;
					transition: opacity 1s;
			}

			.dim-the-lights {
				opacity: 1;
				background-color: rgba(0,0,0,0.5);
			}

/* =-=-=-=-=-=-=-
=-=-=- NAV -=-=-=
-=-=-=-=-=-=-= */

	nav {
		position: fixed;
		left: -30vw;
		height: 80vh;
		font-size: 3vw;
		line-height: 4vw;
		background-color: rgba(255,255,255,0.9);
		padding: 20vh 5vw 0 5vw;
		transition: 1s transform;
	}

		a:hover {
			text-decoration: underline;
		}

		.slide-drawer {
			transform: translateX(30vw);
		}

/* =-=-=-=-=-=-=-=-=-
=-=-=- SECTION -=-=-=
-=-=-=-=-=-=-=-=- */
	
	main {
		width: 100%;
	}

	section {
		width: 90%;
		height: 95vh;
		padding: 5vh 0 0 10%;
	}

		h3 {
			font-size: 14vw;
			color: #fff;
		}

/* =-=-=-=-=-=-=-=-=
=-=-=- FOOTER =-=-=-
-=-=-=-=-=-=-=-=- */

footer {
	padding: 2% 0 2% 4%;
	font-size: 2em;
	font-family: sans-serif;
}

	footer img {
		width: 1em;
	}

@media screen and (max-width: 600px) {
	
	nav {
		left: -100vw;
		height: 88vh;
		font-size: 12vw;
		line-height: 10vh;
		padding: 12vh 2vw 0 5vw;
	}

	.slide-drawer {
			transform: translateX(100vw);
		}

	button#hamburger-button {
		border: 1vw solid #000;
		font-size: 12vw;
		line-height: 5vw;
		padding: 4vw 1vw;
		margin: 4vw;
		outline: none;
	}

	section {
		width: 90%;
		height: 86%;
		padding: 30% 0 0 10%;
	}

		h3 {
			font-size: 20vw;
		}

}