display.css

.black {
	background-color: black;
}

.white {
	background-color: white;
}

#celestial {
	height: 300px;
	width: 300px;
	border-radius: 100%;
	padding: 20px;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

#sky {
	height: 100%;
	widht: 100%;
}

#moonspot1 {
	height: 40px;
	width: 40px;
	border-radius: 100%;
	float: right;
	margin: 20px;
}

#moonspot2 {
	height: 80px;
	width: 80px;
	border-radius: 100%;
	float: right;
	margin: 20px;
}

#moonspot3 {
	height: 180px;
	width: 180px;
	border-radius: 100%;
	float: right;
	margin: 20px;
}

.sun {
	background-color: #ffdd00;
	border: 10px solid #f1c40f;
}

.sun:hover {
	border: 20px solid #f1c40f;
}

.moon {
	background-color: #bdc3c7;
	border: 10px solid #eaeff2;
}

.moon:hover {
	border: 20px solid #eaeff2;
}

/* This class is used to toggle the visibility of the moonspots */
.visible {
	background-color: #eaeff2;
}

.day {
	background-color: #37d8e6;
}

.night {
	background-color: #2c3e50;
}