h1 {
	color: mediumpurple;
	font-family:monospace;
	text-align: center;
}

body {
	margin: 0;
	padding: 0;
	font-family:'Courier New', Courier, monospace;
	background-color: #050506;
}

.navbar { /* different styles per class name(?) is SO COOL BRO */
	display: flex;
	justify-content: space-between;
	align-items: center;
/*	background-color: mediumpurple; /* could we do different color options(?) */
	background-color: #9363dc;
	padding: 0rem 24rem; /* what in the world does this mean (it made the box taller) */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 1); /* this is so 90s core right now */
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 1.5rem; /* what is rem. why are we sleeping (apparently it's actually root em. which is not helpful) */
	margin: 0;
	padding: 0; /* is this (or the margin) doing anything */
}

.nav-links a { /* oh that's fancy. didn't know we could do that */
	color: #323232;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 800;
	padding: 0.5rem 0.8rem;
	border-radius: 4px;
	transition: all 0.3s ease
}

.nav-links a:hover { /* oh that's even cooler. can we make a hover effect for any element */
	color: #63bebe
}