@charset "utf-8";
/* CSS Document */

/* CSS RESET */

	* {
		margin: 0;
		padding: 0;
	}

/* SEMANITC TAGS */
body {
	padding-top:20vh;
	padding-bottom:20vh;
}

main {
	width: 40vw;
	height: 40vw;
	background-color: black;
	margin-left: auto;
  	margin-right: auto;

}

section.white-box {
	width: 40vw;
	height: 40vw;
	background-color:whitesmoke;
}

section.white-box:hover {
	background-color: lavender;
}

section.blue-box {
	width: 30vw;
	height: 30vw;
	background-color:steelblue;
	position: relative;
	top: 50%;
	left: 50%;
  	transform: translate(-50%, -50%);
}

section.blue-box:hover {
	background-color: lightsalmon;
}

section.purple-box {
	width: 20vw;
	height:20vw;
	background-color:plum;
	position: relative;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
}

section.purple-box:hover {
	background-color: lightgreen;
}

section.red-box {
	width:10vw;
	height:10vw;
	background-color: indianred;
	position: relative;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
}

section.red-box:hover {
	background-color: gold;
}