html, body{
	height: 100%;
	width: 100%;
	background: black;
	position: fixed;
}
#key{
	background: white;
	height: 39%;
	width: 11%;
	text-align: center;
	position: absolute;
	bottom: 3%;
	right: 30px;
}
h3{
	color: red;
}
td, th{
	height: 10%;
	width: 2%;
	border: 1px solid black;
}
table{
	border-collapse: collapse;
}
tbody tr:nth-child(2) td:last-child{
	background: blue;
}
tbody tr:nth-child(3) td:last-child{
	background: grey;
}
tbody tr:nth-child(4) td:last-child{
	background: green;
}
tbody tr:nth-child(5) td:last-child{
	background: red;
}
tbody tr:nth-child(6) td:last-child{
	background: orange;
}
tbody tr:nth-child(7) td:last-child{
	background: purple;
}
tbody tr:nth-child(8) td:last-child{
	background: yellow;
}
tbody tr:nth-child(9) td:last-child{
	background: #c89d57;
}
tbody tr:nth-child(10) td:last-child{
	background: #d3dbe3;
}
.orbit{
	border-radius: 50%;
	position: absolute;
	border: solid white 2px;
}
.planet{
	position: absolute;
	border-radius: 100%;
	height: 40px;
	width: 40px;
}
#sun{
	height: 100px;
	width: 100px;
	background: yellow;
	border-radius: 50px;
	margin-left: 250px;
	border: solid orange 3px;
	position: absolute;
	left: 25%;
	top: 300px;
	box-shadow: 0 0 60px yellow;
}
#mercury-orbit{
	height: 200px;
	width: 200px;
	margin-left: 200px;
	left: 25%;
	top: 250px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#mercury{
	top: 0;
	left: 50%;
	background: blue;
	margin-left: -25px;
	margin-top: -18px;
}
#venus-orbit{
	height: 250px;
	width: 250px;
	margin-left: 175px;
	left: 25%;
	top: 225px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#venus{
    top: 50%;
    left: 102%;
    background: grey;
    margin-left: -25px;
    margin-top: -18px;
}
#earth-orbit{
	height: 300px;
	width: 300px;
	margin-left: 150px;
	left: 25%;
	top: 200px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#earth{
    top: 16%;
    left: 89%;
    background: green;
    margin-left: -25px;
    margin-top: -18px;
}
#mars-orbit{
	height: 350px;
	width: 350px;
	margin-left: 125px;
	left: 25%;
	top: 175px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#mars{
    top: 100%;
    left: 50%;
    background: red;
    margin-left: -25px;
    margin-top: -18px;
}
#jupiter-orbit{
	height: 400px;
	width: 400px;
	margin-left: 100px;
	left: 25%;
	top: 150px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#jupiter{
    top: 50%;
    left: 24px;
    background: orange;
    margin-left: -25px;
    margin-top: -108px;
}
#saturn-orbit{
	height: 450px;
	width: 450px;
	margin-left: 75px;
	left: 25%;
	top: 125px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#saturn{
    top: 50%;
    left: 12%;
    background: purple;
    margin-left: -70px;
    margin-top: -18px;
}
#uranus-orbit{
	height: 500px;
	width: 500px;
	margin-left: 50px;
	left: 25%;
	top: 100px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#uranus{
    top: 0;
    left: 50%;
    background: yellow;
    margin-left: -25px;
    margin-top: -18px;
}
#neptune-orbit{
	height: 550px;
	width: 550px;
	margin-left: 25px;
	left: 25%;
	top: 75px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#neptune{
    top: 50%;
    left: 101%;
    background: #C89d57;
    margin-left: -25px;
    margin-top: -18px;
}
#pluto-orbit{
	height: 600px;
	width: 600px;
	margin-left: 0;
	left: 25%;
	top: 50px;

	-webkit-animation:spin-right 10s linear infinite;
	-moz-animation:spin-right 10s linear infinite;
	-ms-animation:spin-right 10s linear infinite;
	-o-animation:spin-right 10s linear infinite;
	-animation:spin-right 10s linear infinite;
}
#pluto{
    top: 100%;
    left: 50%;
    background: #d3dbe3;
    margin-left: -25px;
    margin-top: -18px;
}
@-webkit-keyframes spin-right{
	100% {
		-webkit-transform: rotate(360deg);
		 -moz-transform: rotate(360deg);
		  -ms-transform: rotate(360deg);
		   -o-transform: rotate(360deg);
		    transform: rotate(360deg);
	}
}

@keyframes spin-right{
	100% {
		-webkit-transform: rotate(360deg);
		 -moz-transform: rotate(360deg);
		  -ms-transform: rotate(360deg);
		   -o-transform: rotate(360deg);
		    transform: rotate(360deg);
	}
}