styles.css

* {
	box-sizing: border-box;
}

body, html {
	height: 100%;
	widows: 100%;
	background-color: #FFD4D4;
	scroll-behavior: smooth;
	color: #FFFFE8;
}

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

header {
	height: 20%;

}

/* ==== MAIN ==== */

main {
	height: 60%;

}

/* NAVBAR */

nav {
	width: 40%;
	height: 100%;

	float: left;
}

nav ul {
	height: 100%;
	width: 15rem;

	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 5px;

	text-align: center;
	margin: 0 auto;
}

nav li {
	text-decoration: none;
	padding-top: 1.2rem;
	padding-bottom: 1.5rem;
	border: solid 4px;
	border-radius: 40px;
	border-color: #FFFFE8;
	font-family: 'Cherry Bomb One', cursive;
	font-size: 2rem;
	transition: transform 0.4s;
}

nav li:hover {
	transform: scale(1.2, 1.2);
}

/* SECTION */

section {
	width: 60%;
	height: 100%;

	float: right;
}

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

footer {
	height: 20%;

}