body { 
	margin: 0; 
	padding: 0; 
	height: 100vh; 
	width: 100%; 
	background-color: black; 
	color: white; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	font-family: sans-serif; 
}

[main-container] { 
	display: flex; 
	justify-content: space-evenly; 
	align-items: center; 
	flex-wrap: wrap; 
	width: 90%; 
	height: 600px; 
	background-color: #5e5e5e; 
}

[panel] {
	display: none;  /* flex when visible */
	flex-direction: column; 
	width: 45%; 
	height: 85%; 
	background-color: #404040; 
	xpadding-left: 20px; 
	xpadding-right: 25px; 
}
[panel=home] {
	display: flex;
}

h1 {
	font-size: 50px;
}

[panel] > * {
	margin-left: 20px; 
	margin-right: 25px; 
}

i.fa-solid { 
	font-size: 50px; 
	color: white; 
}

.navigation-panel {
	display: flex; 
	justify-content: space-between;
	flex-direction: column; 
	flex-wrap: wrap; 
	width: 45%; 
	height: 85%; 
}

.nav-element { 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	width: 300px; 
	height: 250px; 
	margin-left: 5px; 

	background: linear-gradient(to left, #404040,  50%, rgb(28, 28, 28) 50%) right;
	background-size: 200%;
	transition: .5s ease-out;
}

.nav-element:hover { 
	background-position: left;
}

li { 
	margin-top: 15px; 
}