root {
	--header-image: url('img/cluster.jpeg');
	--body-bg-image: url('img/water.gif');

	/* colors */
	--content: #EFF6FF;
}

@font-face {
	font-family: Nunito;
	src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
	font-family: Nunito;
	src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
	font-weight: bold;
}

@font-face {
	font-family: Nunito;
	src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
	font-style: italic;
}

@font-face {
	font-family: Nunito;
	src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
	font-style: italic;
	font-weight: bold;
}

body {
	font-family: 'Nunito', sans-serif;
	margin: 0;
	background-color: #08031A;
	/* you can delete the line below if you'd prefer to not use an image */
	background-size: 65px;
	color: #3FB0C0;
	background-image: var(--body-bg-image);
}

* {
	box-sizing: border-box;
}


/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
	max-width: 900px;
	/* this is the width of your layout! */
	/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
	margin: 0 auto;
	/* this centers the entire page */
}

/* the area below is for all links on your page
EXCEPT for the navigation */
#container a {
	color: #4ba35d;
	font-weight: bold;
	/* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}

#header {
	width: 100%;
	background-color: #5e4e8c;
	/* header color here! */
	height: 600px;
	/* this is only for a background image! */
	/* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
	background-image: var(--header-image);
	background-size: 100%;
}

/* navigation section!! */
#navbar {
	height: 40px;
	background-color: #E6EEED;
	/* navbar color */
	width: 100%;
}

#navbar ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
	justify-content: space-evenly;
}

#navbar li {
	padding-top: 10px;
}

/* navigation links*/
#navbar li a {
	color: #4ba35d;
	/* navbar text color */
	font-weight: 800;
	text-decoration: none;
	/* this removes the underline */
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
	color: #a49cba;
	text-decoration: underline;
		flex-wrap: wrap;
}

#flex {
display: flex;
}
aside {
  background-color: #E6EEED;
  width: 200px;
  padding: 20px;
  font-size: smaller;
}

main {
  background-color: #E6EEED;
  flex: 1;
  padding: 20px;
  order: 2;
}