html{
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size:1.3em;
	line-height:1.5;
	background:#060606;
	color:aliceblue;
	box-sizing:border-box;
}

h1{
	font-size:2.5rem;
	text-align:center;
}

h1 .subtitle{
	font-size:1rem;
	font-weight:normal;
	display:block;
}

h2{
	background:indigo;
	padding:.5rem .5rem .5rem 3rem;
	margin-left:-3rem;
	margin-right:-3rem;
}

h3{
	border-bottom:2px solid darkturquoise;
}

header{
	padding:3rem;
	position:relative;
	display:flex;
}

.logo{
	font-size:1.5rem;
	padding:.5rem;
	border:1px solid #fff;
	margin:.5rem 3rem .5rem .5rem;
	display:inline-block;
	align-self:center;
}

.main-nav{
	padding:3rem;
	display:flex;
}
.main-nav a{
	padding:1rem;
	background:mediumvioletred;
	border:1px solid mediumvioletred;
	color:#fafafa;
	margin:0 .5em;
	font-size:1.2rem;
	box-shadow:3px 3px 0 3px indigo;
	text-decoration:none;
}
.main-nav a[aria-current=page]{
	background:indigo;
	box-shadow:3px 3px 0 3px black;
	border:2px solid white;
}
.main-nav a:hover, .main-nav a:focus{
	background:#fafafa;
	color:indigo;
}

main{
	padding:3rem;
}

a{
	color: darkturquoise;
	text-decoration:underline;
}

footer p{
	text-align:center;
}

@media screen and (max-width: 800px){
	header{
		flex-direction:column;
		padding:1.5rem;
	}
	.logo{
		margin:0;
	}
	.main-nav{
		padding:1.5rem;
	}
	main{
		padding:1.5rem;
	}
	h2{
		font-size:1.2em;
	}
}


@media(prefers-reduced-motion){
/* remove animations, or anything else	*/
}

@media(prefers-color-scheme: dark){

}

@media(prefers-color-scheme: light){

}

@media(forced-colors){
/* experiment with forced colors	*/
}

@media print{
/* Print styling	*/
}