/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- STYLES DESIGNED AND BUILT BY IAN BESLER -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

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

* {
	margin: 0;
	padding: 0;
}

	a:link {
		color: #00f;
	}

	a:hover {
		background-color: #ff0;
	}

html {
	
	scroll-behavior: smooth;
}

	html,body {
		width: 100%;
		height: 100%;
	}

	main {
		width: 100%;
	}

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

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

header,section {
	width: 90%;
	padding: 5%;
	height: 100vh;
	font-size: 5em;
}

h1,h2,h3,h6 {
	font-family: sans-serif;
	font-weight: normal;
}

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

nav {
	width: 100%;
	position: fixed;
	top: 0;
	background-color: rgba(255,255,255,0.8);
	border-bottom: 0.2vw solid black;
}

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

	li {
		font-family: sans-serif;
		font-size: 2vw;
		float: left;
		padding: 2vh 7.2vw;
	}

		nav ol li a:link {
			color: #00f;

		}

		nav ol li a:hover {
			color: #00f;
			background-color: #ff0;
		}

		.highlight {
			background-color: #ff0;
		}

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

footer {
	background-color: lightgray;
	padding: 2%;
	font-size: 2em;
	border-top: 0.1em solid #000;
}

	footer img {
		width: 1em;
	}

/* =-=-=-=-=-=-=-=-
=-=- COLORS -=-=
-=-=-=-=-=-=-=-= */

#red-section {
	background-color: red;
}

#green-section {
	background-color: limegreen;
}

#blue-section {
	background-color: blue;
}