@font-face {
	font-family: 'MonaspaceXenon'; /*a name to be used later*/
	src: url('assets/fonts/MonaspaceXenon-Regular.otf'); /*URL to font*/
}


body {
	background-color: rgb(0, 3, 3);
	background-image: url("assets/graphics/green_rain.webp");
	color: #3fe864;
	font-family: 'MonaspaceXenon';
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	line-height: 144%;
}

li a {
	display: inline;
	color: #3fe864;
	/* width: 60px; */
	/* background-color: #dddddd; */
}


/* === Grid stuff! === */

.mainGrid {
	width: 80%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 8fr;
	grid-template-areas: 
		"header header"
		"sidebar main"
		"footer footer";
	gap: 5px;
}

.mainGrid > div {
	border-style: dotted;
	border-color: #2fc04e;
	background-image: url("assets/graphics/green_stars.png");
	padding: 8px;
}
.mainGrid > div.header {
	grid-area: header;
	text-align: center;
	font-size: 133%;
	padding-top: 0px;
	padding-bottom: 0px;
	line-height: 18px;
}
.mainGrid > div.sidebar {
	grid-area: sidebar;
}
.mainGrid > div.main {
	grid-area: main;
	padding-left: 10px;	
}
.mainGrid > div.footer {
	grid-area: footer;
	padding-top: 0;
	padding-bottom: 0;
}

/* ============ */