html{
    --accent-color: red;
}

body {
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: var(--accent-color);
    font-family: sans-serif;
}

main {
	border: solid 2px var(--accent-color);
	padding: 1.5em;
	border-radius: 0.5em;
	color: var(--accent-color)
}

h2 {
	margin: none;
	border-bottom: dashed 2px var(--accent-color);
}

nav {
    margin: 0;
    display: inline;
}
    
nav ul a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: bold;
    padding: 1em;
    border: solid 2px var(--accent-color);
    opacity: 70%;
	border-bottom-color: white;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em
}

nav ul a:hover {
    opacity: 100%;
}


nav ul a.current{
    opacity: 100%;
}

footer {
	text-align: center;
	font-size: small;
	color: grey;
}