* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}

.red{
	background-color: red;
}

.orange{
	background-color: orange;
}

.yellow{
	background-color: yellow;
}

.green{
	background-color: green;
}

.cyan{
	background-color: cyan;
}

.blue{
	background-color: blue;
}

.purple{
	background-color: purple;
}

.magenta{
	background-color: magenta;
}

/* HTML5 SEMANTIC TAGS */

section {
	width: 100vw;
	height: 100vh;
}

nav{
	position: fixed;
	top: 25vh;
	right: 2vw;
}

ol{
	list-style-type: none;
}

a:link {
	display: inline-block;
	width: 2vw;
	height: 2vw;
	border: 0.2vw solid black;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.2);
	margin-bottom: 1vh;
	font-family: sans-serif;
}

span{
	font-size: 0;
	opacity: 0;
	position: relative;
	top: 0.2vw;
	right: 2vw;
	white-space: nowrap;
	transition: right 0.1s, opacity 0.1s;
}

a:hover span{
	font-size: 1.2vw;
	right: 9vw;
	opacity: 1;
}

h3{
	font-family: sans-serif;
	font-size:50pt;
}

figure#image-one{
	background-image: url("https://www.nationalparks.org/sites/default/files/styles/wide_1x/public/shutterstock_142351951.jpg?itok=y_xdbvtu");
	width: 90vw;
	height: 90vh;
	background-size: cover;
}

figure#image-two{
	background-image: url("https://www.nationalparks.org/sites/default/files/yosemite-merced.jpg");
	width: 90vw;
	height: 90vh;
	background-size: cover;
}