:root {
	--main: #031A6B;
	--secondary: #ADD8E6;
	--accent: #EFDD8D;
	--highlight: #499F68;
	--required: #FF0000;
	--valid: #00FF00;
}

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
	background-color: var(--main);
}
body {
	width: 650px;
	margin: auto;
	padding: 15px;
}

header {
	height: 100px;
	margin-bottom: 15px;
	
	& div {
	color: var(--accent);
	font-size: 3em;
	text-align: center;
	}
	
	& nav ul {
		list-style-type: none;
		padding: 1px 0px;
		text-align: center;
		border-top: 2px solid var(--accent);
		border-bottom: 2px solid var(--accent);
		width: 480px;
		
		& li {
			display: inline;
			padding: 0px 1.5em;
			
			& a {
				color: var(--accent);
				text-decoration: none;
			}
			a.current {
				font-weight: bold;
				color: var(--highlight);
			}
		}
	}
}

header img {
	height:100px;
	float: right;
}

main {
	display: flex;
	gap: 20px;
}

section {
	flex: 0 0 500px;
}

aside {
	flex: 0 0 150px;
	color: var(--accent);
	& dt {
		margin-top: 190px;
		font-weight: bold;	
	}
}

footer {
	color: var(--accent);
	padding-top:  15px;
}