*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

#container{
	height: 30vw;
	width: 29vw;
	background-color: #99abc1;
	
}

.darkerred{
	height:29vw;
	width:29vw;
	background-color: #b2544c;
	border-radius: 50%;
	padding-left: 0.5vw;
	padding-top: 0.5vw;
}
	.darkerred:hover{
		background-color: #fcfdff;
	}
.eggyellow{
	height:28vw;
	width:28vw;
	background-color: #dcb91f;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.eggyellow:hover{
		background-color: #fceb15;
	}
.purple{
	height:26vw;
	width:26vw;
	background-color: #4b5fa8;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.purple:hover{
		background-color: #abe5f9;
	}


.orange{
	height:24vw;
	width:24vw;
	background-color: #fa9c3a;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.orange:hover{
		background-color: #e98247;
	}

.white{
	height:22vw;
	width:22vw;
	background-color: #d7e6fd;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.white:hover{
		background-color: #e98247;
	}

.darkergreen{
	height:20vw;
	width:20vw;
	background-color: #678d64;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;

}
	.darkergreen:hover{
		background-color: #b2c2db;
	}

.red{
	height:18vw;
	width:18vw;
	background-color: #dc5e50;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
		.red:hover{
		background-color: #eea7d1;
	}

.lightyellow{
	height:16vw;
	width:16vw;
	background-color: #fde113;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.lightyellow:hover{
		background-color: #9fc556;
	}

.skyblue{
	height:14vw;
	width:14vw;
	background-color: #679af3;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.lightyellow:hover{
		background-color: #fde113;
	}
.green{
	height:12vw;
	width:12vw;
	background-color: #9fc556;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.green:hover{
		background-color: #dc5e50;
	}

.pink{
	height:10vw;
	width:10vw;
	background-color: #eea7d1;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.pink:hover{
		background-color: #678d64;
	}

.blue{
	height:8vw;
	width:8vw;
	background-color: #b2c2db;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
		.blue:hover{
		background-color: #d7e6fd;
	}

.smallorange{
	height:6vw;
	width:6vw;
	background-color: #e98247;
	border-radius: 50%;
	padding-left: 0.9vw;
	padding-top: 0.9vw;
}
	.smallorange:hover{
		background-color: #fa9c3a;
	}
	.smallorange:hover{
		background-color: #e98247;
	}
.lightblue{
	height:4vw;
	width:4vw;
	background-color: #abe5f9;
	border-radius: 50%;
	padding-left: 0.5vw;
	padding-top: 0.5vw;
}
		.lightblue:hover{
		background-color: #4b5fa8;

	}
.yellow{
	height:3vw;
	width:3vw;
	background-color: #fceb15;
	border-radius: 50%;
	padding-left: 0.5vw;
	padding-top: 0.5vw;
}
	.yellow:hover{
		background-color: #dcb91f;
	}
.smallwhite{
	height:1.9vw;
	width:1.9vw;
	background-color: #fcfdff;
	border-radius: 50%;
}
	.smallwhite:hover{
		background-color: #b2544c;
	}