@keyframes float {
	0%, 100% {
		top: -16px;
		}
	50% {
		top: 0;
		}
	}
body {
	margin: 0;
	color: #f0f0f0;
	font: 16px "Arial";
	background-color: #080808;
	}
h1 {
	position: absolute;
	left: 0;
	right: 0;
	color: #f0f0f0;
	background-color: rgba(40, 12, 40, 0.6);
	visibility: hidden;
	}
canvas {
	display: block;
	}
#top {
	position: absolute;
	left: 0;
	right: 0;
	padding: 5%;
	text-align: center;
	}
.planet {
	opacity: 0.8;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: 25%;
	margin: 2.5%;
	padding: 2.5%;
	text-align: left;
	vertical-align: top;
	transition: 0.4s padding;
	animation: float 4s infinite;
	}
.planet>img {
	width: 100%;
	}
.planet:hover,
.planet.hover {
	opacity: 1.0;
	padding: 0;
	}
.planet:hover>h1,
.planet.hover>h1 {
	visibility: visible;
	}