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

* {
	margin: 0;
	padding: 0;
}

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


button#hamburger-icon {
	position: fixed;
	font-size: 2.5em;
	line-height: 0;
	border: none;
	padding: 22px 8px 28px 8px;
	top: 20px;
	left: 20px;
	z-index: 100;
	cursor: pointer;
	background-color: transparent;
}

	button#hamburger-icon:hover {
		color: white;
	}

nav {
	position: fixed;
	font-size: 6vh;
	padding: 0px 20px 0px 100px;
	box-shadow: 2px 2px 20px 0px black;
	background-color: rgb(128, 128, 128, 0.8);
		transition: transform 1s;
		transform: translateX(-520px);
}

	.after-click {
		transform: translateX(100px);
	}

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

		nav ul li a {
			text-decoration: none;
			color: black;
		}

			nav ul li a:hover {
				color: white;
			}


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

section {
	width: 100vw;
	height: 100vh;
}


/* --------------------------
---- CSS COLOR CLASSES ------
----------------------------*/

.red {
	background-color: red;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: green;
}

.cyan {
	background-color: cyan;
}

.blue {
	background-color: blue;
}

.purple {
	background-color: purple;
}

.magenta {
	background-color: magenta;
}