*{
	margin: 0;
}

.orange{
	background-color: orange;
}
.green{
	background-color: green;
}
.yellow{ 
	background-color: yellow;
 }
.red{
 	background-color: red;
 }

 .orange_1{
 	background-color: orange;
 	width: 45%;
	height: 86%;
	float: right;
 }

 .green_1{
 	background-color: green;
 	width: 80%;
	height: 86%;
	margin-bottom: : 40%;
	float: right;
 }

 .yellow_1{
 	background-color: yellow;
 	width: 70%;
	height: 86%;
	margin-bottom: : 60%;
	margin-left: 0;
	margin-top: 0;
	float: right;
 }

 .red_1{
 	background-color: red;
 	width: 60%;
	height: 86%;
	margin-bottom: : 30%;
	margin-left: 0;
	margin-top: 0;
	float: right;
 }

/* Hoover from here */

.orange:hover{
	background-color: green;
}
.green;hover{
	background-color: yellow;
}
.yellow:hover{ 
	background-color: cyan;
 }
.red:hover{
 	background-color: solid green;
 }

 .orange_1:hover{
 	background-color: green;
 	width: 45%;
	height: 86%;
	float: right;
 }

 .green_1:hover{
 	background-color: yellow;
 	width: 80%;
	height: 86%;
	margin-bottom: : 40%;
	float: right;
 }

 .yellow_1:hover{
 	background-color: cyan;
 	width: 70%;
	height: 86%;
	margin-bottom: : 60%;
	margin-left: 0;
	margin-top: 0;
	float: right;
 }

 .red_1:hover{
 	background-color: solid green;
 	width: 50%;
	height: 86%;
	margin-bottom: : 30%;
	margin-left: 0;
	margin-top: 0;
	float: right;
 }

main{
 	width: 100vw;
	height: 100vw;
	background-color: blue;
	margin-bottom: 30vw;
 }

	section{
		width: 45%;
		height: 86%;
		float: left;
		background-color: orange
	}
		article{
					width: 80%;
					height: 86%;
					margin-bottom: : 40%;
					float: left;
		}

			figure{
						width: 70%;
						height: 86%;
						margin-bottom: : 60%;
						margin-left: 0;
						margin-top: 0;
						float: left;
			}
				div{
							width: 50%;
							height: 86%;
							margin-bottom: : 30%;
							margin-left: 0;
							margin-top: 0;
							float: left;
				}