* {
		margin: 0;
		padding: 0;
		color: #000;
	}

ul {
	list-style-type: none;
	font-weight: bold;
	text-align: center; }


li {
	display: inline-block;
	margin-top: 10px;
	margin-right: 30px; }

	main#canvas {
		width: 30vw;
		height: 30vh;
		margin: 5.6vh auto 0 auto; 

	}


section {
 	width: 20px;
	height: 20px;
	border-radius: 50%;
	
	margin-top: 1%;
 	margin-left: 2%;
	float: left; }

article {
	width: 100%;
	height: 100%;
	float: left; 
	padding: 10px; }

p {text-align: center;}


.mediumslateblue {background-color: pink;}

.crimson {background-color: crimson;}

.darkturquoise {background-color: darkturquoise;}

.coral {background-color: coral;}

.yellow {background-color: yellow;}

.blue {background-color: blue;}

.green {background-color: green;}


<!--Hover-->

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

.crimson:hover {background-color: aqua;}

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

.coral:hover {background-color: darkcyan;}

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

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

.green:hover {background-color: sandybrown;}