@import url("navbar.css");
@import url("typography.css");

div.wrap{
	width: 100%;
	text-align: center;
}

div.content{

	width: 24vw;
	display: inline-block;
	text-align: center;
	margin: 1em 5em;
}

img{
	width: 90%;
}

.canvas-1{
	width: 21.6vw;
	height: 21.6vw;
	background-color: black;
}

main{
	display: inline-block;
}

main.canvas-1 section {
	width: 12.5%;
	height: 12.5%;
	float: left;
}

.darkPurple{
	background-color: #3e3f7f;
}

.darkPurple:hover{
	background-color: #CCBD78;
}

.lightPurple{
	background-color: #515595;
}

.lightPurple:hover{
	background-color: #E0C34C;
}

.burgundy{
	background-color: #7c252b;
}

.burgundy:hover{
	background-color: #159434;
}

.hotPink{
	background-color: #ac264c;
}

.hotPink:hover{
	background-color: #07470F;
}

.brown{
	background-color: #a37b26;
}

.brown:hover{
	background-color: #071B40;
}

.yellow{
	background-color: #f5d81c;
}

.yellow:hover{
	background-color: #371BF5;
}

.green{
	background-color: #16665b;
}

.green:hover{
	background-color: #C94B14;
}

.lightGreen{
	background-color: #4ba275;
}

.lightGreen:hover{
	background-color: #A3544B;
}

.orange{
	background-color: #e2a526;
}

.orange:hover{
	background-color: #2769E3;
}

.canvas-2{
	width: 21.6vw;
	height: 28.77vw;
	background-color: #2270c0;
}

.canvas-2:hover{
	background-color: black;
}

main.canvas-2 section{
	width: 5.5%;
	height: 4.1%;
	border-radius: 1em;
	float: left;
}

.canvas-3{
	width: 21.6vw;
	height: 21.6vw;
	background-color: black;
}

.lightBlue{
	background-color: #2f9dd8;
}

.lightBlue:hover{
	background-color: #2a5099;
}

.blue{
	background-color: #2a5099;
}

.blue:hover{
	background-color: #2f9dd8;
}

.green3{
	background-color: #61a946;
}

.green3:hover{
	background-color: #484d91;
}

.purple3{
	background-color: #484d91;
}

.purple3:hover{
	background-color: #61a946;
}

.yellow3{
	background-color: #fbe619;
}

.yellow3:hover{
	background-color: #c53222;
}

.magenta3{
	background-color: #ba327c;
}

.magenta3:hover{
	background-color: #e2a526;
}

.red3{
	background-color: #c53222;
}

.red3:hover{
	background-color: #fbe619;
}


main.canvas-3 div{
	position: relative;
	width: 50%;
	height: 50%;
	float: left;
}

main.canvas-3 div section{
	width: 88%;
	height: 50%;
	float: left;
}

main.canvas-3 div section article{
	width: 82.5%;
	height: 50%;
	float: left;
}

main.canvas-3 div section article figure{
	margin: 0;
	width: 66%;
	height: 50%;
	float: left;
}

.bottom-right{
	position: absolute;
	bottom: 0;
	right: 0;
}

.bottom-left{
	position: absolute;
	bottom: 0;
	left: 0;
}

.top-right{
	position: absolute;
	top: 0;
	right: 0;
}

.top-left{
	position: absolute;
	top: 0;
	left: 0;
}