#content {
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

h1 {
  color: #fff;
  text-align: center;
  font-size: 40px;
  letter-spacing: 4px;
  padding-left: 4px;
}

#planet {
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background-color: #000403;
  position: absolute;
  bottom: -583.3333333333px;
  left: 50%;
  margin-left: -350px;
  box-shadow: inset 8px 2px 10px #ede;
  z-index: 2;
}

/*
Theme Name: CSS3 DarkForce
Author: ONZE - Issei Hara
Author URI: http://on-ze.com
Version: 1.0
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/******************/
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Bree Serif", serif;
  overflow: hidden;
}

body {
  overflow: hidden;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#020308+0,05172b+51,011428+84,012438+100 */
  background: #020308;
  /* Old browsers */
  background: -moz-linear-gradient(top, #020308 0%, #05172b 51%, #011428 84%, #012438 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #020308 0%, #05172b 51%, #011428 84%, #012438 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #020308 0%, #05172b 51%, #011428 84%, #012438 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#020308", endColorstr="#012438",GradientType=0 );
  /* IE6-9 */
  -webkit-perspective: 300;
  -moz-perspective: 300;
  -ms-perspective: 300;
  -o-perspective: 300;
  perspective: 300;
}

#d1,
#d1:before,
#d1:after,
#d2,
#d2:before,
#d2:after,
#d3,
#d3:before,
#d3:after {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#d1,
#d2,
#d3 {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#d1:before,
#d1:after,
#d2:before,
#d2:after,
#d3:before,
#d3:after {
  /*background-image:url(star.png);*/
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0BAMAAAA5+MK5AAAAJFBMVEX////////////////////////////////////////////////Vd7HLAAAADHRSTlMARFVmd4iZqrvM3e7VNOnbAAADp0lEQVR4Xu3dwZGbMBQG4BcTg3EuKYESKMElUIJLoARKoASXmmtmsoeNLUBC33fb0zKDEZLe+1HUB4BHfGiNkl2jIGPsgyEyBjR//XGJzMDFdOYT0HxjHtzHF+jrWYECsBiVP3MzK/ibHVGaINv57hqlm+MkeHqITQSK4LnxDHH1IubdmZoxSiETPxUdYKORK43WTB6wLqvsJWCatSSqg/XHXiB08QFAVwFLwuLeK3aC8uWw+z6PDSnw6kfXLnMub8GLTQxFbZAKKpRcwGjC7atM+2Z0/Kw8QBjvX1Ga/v8vnZ9nutpr5GqOe7lFA1aXQJIhps0pA0ub+4+JNcF6vPm6JIA9yB/19Rn3Slffd8/qXvQGiK/g/rOWUqJpEn0RYNqwnvd8dzlxsW9YBDnsPucis1eYzospsEWu7PkuoT2gO2V+YClnqNLpzqyvaBeAANi82fBlZTPFAeiFquuYCGJSTFfbYhlFWvDgAcBNV4fgP3gGkYE58lxE4H72uMo10rmXWUxGuwlCBgC3AqJxT2kWyDTVbk4CgPMq5DuxJ4il3j0AZ1w0Jc4Ox12vVECVZ7Ev5uXfIL3i43mxBJiCpju+wWYgfZwSXCutFtgpX+3ub8xoMaR4pw4nGaqgVQ1TQQCBZeMzDmBSJiweo0zRe+CVtJoLgPIagAW9kCN0zmevDlPKw8E8IzwSHEUHYMBg2LG5jKsLqaX51E+XJo9XMc/NbzP4Ro3vXtBVl5B/1NVvPtjmKLXUCiBhiJQ3Tif4Xf5eKYLbYEvpVcW2nlx3e/Deye2wTUD6Cr6NKoOulmd93ajAQyZP3WWTiu8aIJVMmoX4sPX/V8r3scQ29VWJPqyG63dBl7jjjN5mGDK6Ok2EDlCTUakQLBGFO3TZz6/tJvbo1WexbvcMUFj3C24r3ki3wGkebFMCYyo3+NuWVqXDyItM1V22LK3nvvN5QA8IGrNoRTbLZODFeD36GBWYvhRTz5iiVgqknsl5gy5kYVMdkrhPNOqO5FMOoznqBsKYbNUK057tINAXWRGjSz5aNF7UZ6NCACDTrgHQvMhaEZzNAIC+wca9PHa6C8L+oOI9BwAWjmCSBNL+INoDIHx7lj7HuZJpI+o+L3EVchrD7IwCQ8pDQkQ6cM6QohA380I/ouxekyAqTRflwBwMxzsNIn9VHAggCyqXgscFLJTX2ADgJIrVV7EUpE3obK3ji4agAOa0ArSzOTsTEozdj4xfDYMEWsb1VYA/KFNOcBXJpxsAAAAASUVORK5CYII=);
  content: "";
  -webkit-animation: 20s warp linear infinite;
  -moz-animation: 20s warp linear infinite;
  -ms-animation: 20s warp linear infinite;
  -o-animation: 20s warp linear infinite;
  animation: 20s warp linear infinite;
  visibility: visible;
  background-position: 50% 50%;
}

#d1:before {
  background-position: -190px 80px;
}

#d1:after {
  background-position: 90px -180px;
  -webkit-animation-delay: -2s;
  -moz-animation-delay: -2s;
  -ms-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;
}

#d2:before {
  background-position: 210px 180px;
  -webkit-animation-delay: -4s;
  -moz-animation-delay: -4s;
  -ms-animation-delay: -4s;
  -o-animation-delay: -4s;
  animation-delay: -4s;
}

#d2:after {
  background-position: -120px 40px;
  -webkit-animation-delay: -6s;
  -moz-animation-delay: -6s;
  -ms-animation-delay: -6s;
  -o-animation-delay: -6s;
  animation-delay: -6s;
}

#d3:before {
  background-position: 130px 140px;
  -webkit-animation-delay: -8s;
  -moz-animation-delay: -8s;
  -ms-animation-delay: -8s;
  -o-animation-delay: -8s;
  animation-delay: -8s;
}

#d3:after {
  background-position: -150px -90px;
  -webkit-animation-delay: -10s;
  -moz-animation-delay: -10s;
  -ms-animation-delay: -10s;
  -o-animation-delay: -10s;
  animation-delay: -10s;
}

/******************/
@-webkit-keyframes warp {
  from {
    opacity: 0;
    -webkit-transform: rotate(-60deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(60deg) translateZ(300px);
  }
}
@-moz-keyframes warp {
  from {
    opacity: 0;
    -moz-transform: rotate(-60deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    -moz-transform: rotate(60deg) translateZ(300px);
  }
}
@-ms-keyframes warp {
  from {
    opacity: 0;
    -ms-transform: rotate(-60deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    -ms-transform: rotate(60deg) translateZ(300px);
  }
}
@-o-keyframes warp {
  from {
    opacity: 0;
    -o-transform: rotate(-60deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    -o-transform: rotate(60deg) translateZ(300px);
  }
}
@keyframes warp {
  from {
    opacity: 0;
    transform: rotate(-60deg) translateZ(-300px);
  }
  to {
    opacity: 1;
    transform: rotate(60deg) translateZ(300px);
  }
}
/******************/
/******************/