body {
	background-image: url('moon.png');
	background-repeat: repeat;		
}

h1, h2, h3 {
	font-family:    Verdana;
	color:			green;	
}

label {
	font-weight: 600;
}

#menulijst li {
	border: green solid 10px; 
	background-color: green;
	border-radius: 20%;
	margin-right:  3em;
}

#menulijst li a {
	color: white;
}

main {
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	background-image: url('linedpaper.png');
	padding: 1em;
	
	/*  Omdat we float child elementen binnen ons main element hebben staan, 
	    valt de content hiervan buiten het main element.
		Om ervoor te zorgen dat de content erbinnen blijft kunnen wij het main element óók als float instellen,
		MAAR, mooier en praktischer is om ervoor te kiezen 'overflow: auto' in te stellen op het main element. 
	*/
	overflow: auto;
}

nav {
	margin-left: auto;
	margin-right: auto;
	width:	800px;
}

header img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#menulijst {
	margin-left: auto;
	margin-right: auto;
	width: 600px;
}

form {
	/* Verander de float opmaak en realiseer hetzelfde door gebruik te maken van het flexbox systeem. Kijk goed welk element de parent is. */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
    /* Om de fieldsets te centreren binnen de flex container kunnen wij ook een flex eigenschap gebruiken. Stel dit in.	*/
	justify-content: center;
}

input, textarea, select {
	font-size:   9pt;	
	border: none;
}

input:hover, textarea:hover, select:hover {
	background-color: lightblue;
}

a {
	text-decoration: none;	
}

a:hover {
	text-decoration: underline;
}

/* Wijzig de opmaak van de fieldsets, zodat deze een stuk witruimte -onder- het element hebben staan. */
fieldset {
	margin-bottom: 1em;
}