* {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
	font-family: sans-serif;
	color: black;
}

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

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

	.slide-the-drawer{
		left: 20px;
	}

	a:hover {
		text-decoration:underline;
	}


/* hamburger */

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

	button#hamburger-icon:hover {
		border-color: #fff;
		color: #fff;
		background-color: rgba(255,255,255,0.5);
	}


/* CSS COLOR CLASSES */

.red {
	background-color: red;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: green;
}

.blue {
	background-color: blue;
}

.purple {
	background-color: purple;
}