@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Berkshire+Swash&family=Patrick+Hand&display=swap');

ul {
	list-style-type: none;
	font-size: 2vw;
	
}

	li {
		display: inline-block;
		margin: 0 0.5vw;
	}

	a:hover {
		background-color: #201B51;
		color: white;
	}

	.current-page {
		font-family: Bebas Neue; color: #201B51; font-size: 15pt;
		text-decoration: underline;
	}

a {font-family: Bebas Neue; color: #201B51; font-size: 30pt;}


* {
	margin:0;
	padding:0;
}


header#canvas{
	width: 53.8vw;
	height: 53.8vw;
	background-color: gray;
}


section, article {
	float: left;
}

	section.tan {
		width: 25%;
		height: 25%;
	}

	section.green {
		width: 25%;
		height: 25%;
	}

	section.darkorange {
		width: 25%;
		height: 25%;
	}

	section.yellow {
		width: 25%;
		height: 25%;
	}

		article.orange {
		width: 25%;
		height: 25%;
	}

		article.black {
		width: 25%;
		height: 25%;
	}

		article.blue {
		width: 25%;
		height: 25%;
	}

		article.gray {
		width: 25%;
		height: 25%;
	}

.tan {
	background-color: #cccc00;
}

	.tan:hover {
	background-color: blue;
}

.green {
	background-color: #267326;
}
	.green:hover {
	background-color: hotpink;
}

.yellow {
	background-color: #e6e600;
}

	.yellow:hover {
	background-color: red;
}

.darkorange {
	background-color: #e67300;
}

	.darkorange:hover {
	background-color: purple;
}

.orange {
	background-color: orange;
}

	.orange:hover {
	background-color: blue;
}

.black {
	background-color: black;
}

	.black:hover {
	background-color: white;
}

.blue {
	background-color: #80aaff;
}

	.blue:hover {
	background-color: turquoise;
}

.gray {
	background-color: #cccccc;
}

	.gray:hover {
	background-color: hotpink;
}