styles.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html {
  font-size: 1em; }

body {
  background: #0a1026;
  height: 100vh;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; }

@keyframes planetspin {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }
#space {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  font-size: .5em;
  /*
  -webkit-transition: font-size .2s;
  -moz-transition:    font-size .2s;
  -ms-transition:     font-size .2s;
  -o-transition:      font-size .2s;
  transition:         font-size .2s;
  */ }

#sun {
  width: 15em;
  height: 15em;
  background: #ffc902;
  border-radius: 50%;
  position: absolute; }

h1 {
  text-align: center;
  color: white;
  position: absolute;
  top: .5em;
  left: 50%;
  font-size: 2em;
  transform: translateX(-50%);
  font-weight: bold;
  text-transform: uppercase; }

p {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: white;
  position: absolute;
  left: 50%;
  top: 3em;
  font-size: 1em;
  transform: translateX(-50%); }

#stars {
  font-size: .5em; }

.star {
  background: rgba(255, 255, 255, 0.2);
  width: 1em;
  height: 1em;
  display: block;
  position: absolute;
  border-radius: 50%; }

.star:nth-child(1) {
  left: 60vw;
  top: 93vh; }

.star:nth-child(2) {
  left: 14vw;
  top: 34vh; }

.star:nth-child(3) {
  left: 86vw;
  top: 74vh; }

.star:nth-child(4) {
  left: 84vw;
  top: 57vh; }

.star:nth-child(5) {
  left: 72vw;
  top: 21vh; }

.star:nth-child(6) {
  left: 27vw;
  top: 41vh; }

.star:nth-child(7) {
  left: 42vw;
  top: 82vh; }

.star:nth-child(8) {
  left: 39vw;
  top: 34vh; }

.star:nth-child(9) {
  left: 89vw;
  top: 41vh; }

.star:nth-child(10) {
  left: 100vw;
  top: 70vh; }

.star:nth-child(11) {
  left: 78vw;
  top: 83vh; }

.star:nth-child(12) {
  left: 45vw;
  top: 11vh; }

.star:nth-child(13) {
  left: 40vw;
  top: 58vh; }

.star:nth-child(14) {
  left: 88vw;
  top: 45vh; }

.star:nth-child(15) {
  left: 96vw;
  top: 37vh; }

.star:nth-child(16) {
  left: 5vw;
  top: 56vh; }

.star:nth-child(17) {
  left: 6vw;
  top: 29vh; }

.star:nth-child(18) {
  left: 3vw;
  top: 77vh; }

.star:nth-child(19) {
  left: 28vw;
  top: 70vh; }

.star:nth-child(20) {
  left: 40vw;
  top: 67vh; }

.star:nth-child(21) {
  left: 53vw;
  top: 83vh; }

.star:nth-child(22) {
  left: 26vw;
  top: 83vh; }

.star:nth-child(23) {
  left: 45vw;
  top: 67vh; }

.star:nth-child(24) {
  left: 11vw;
  top: 8vh; }

.star:nth-child(25) {
  left: 56vw;
  top: 83vh; }

.star:nth-child(26) {
  left: 48vw;
  top: 55vh; }

.star:nth-child(27) {
  left: 12vw;
  top: 17vh; }

.star:nth-child(28) {
  left: 30vw;
  top: 18vh; }

.star:nth-child(29) {
  left: 56vw;
  top: 79vh; }

.star:nth-child(30) {
  left: 79vw;
  top: 69vh; }

.star:nth-child(31) {
  left: 28vw;
  top: 95vh; }

.star:nth-child(32) {
  left: 9vw;
  top: 31vh; }

.star:nth-child(33) {
  left: 32vw;
  top: 32vh; }

.star:nth-child(34) {
  left: 63vw;
  top: 16vh; }

.star:nth-child(35) {
  left: 68vw;
  top: 87vh; }

.star:nth-child(36) {
  left: 3vw;
  top: 52vh; }

.star:nth-child(37) {
  left: 82vw;
  top: 37vh; }

.star:nth-child(38) {
  left: 8vw;
  top: 4vh; }

.star:nth-child(39) {
  left: 67vw;
  top: 45vh; }

.star:nth-child(40) {
  left: 92vw;
  top: 36vh; }

#mercury_orbit {
  position: absolute;
  width: 30em;
  height: 30em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -7.5em;
  top: -7.5em;
  box-sizing: border-box; }

#mercury_wrapper {
  animation-name: planetspin;
  animation-duration: 88s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -918955s;
  width: 15em;
  height: 15em;
  position: absolute;
  left: 7.4em;
  top: 7.4em; }

#mercury {
  width: 3em;
  height: 3em;
  background: #676767;
  border-radius: 50%;
  transform: translateX(14.9em) rotate(90deg);
  position: absolute;
  top: 6em;
  left: 6em; }
  #mercury:after {
    content: close-quote;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    border-radius: 500px 500px 0 0; }

#venus_orbit {
  position: absolute;
  width: 50em;
  height: 50em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -17.5em;
  top: -17.5em;
  box-sizing: border-box; }

#venus_wrapper {
  animation-name: planetspin;
  animation-duration: 224.7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -918955s;
  width: 15em;
  height: 15em;
  position: absolute;
  left: 17.4em;
  top: 17.4em; }

#venus {
  width: 4em;
  height: 4em;
  background: #dfd091;
  border-radius: 50%;
  transform: translateX(24.9em) rotate(90deg);
  position: absolute;
  top: 5.5em;
  left: 5.5em; }
  #venus:after {
    content: close-quote;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    border-radius: 500px 500px 0 0; }

#earth_orbit {
  position: absolute;
  width: 70em;
  height: 70em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -27.5em;
  top: -27.5em;
  box-sizing: border-box; }

#earth_wrapper {
  animation-name: planetspin;
  animation-duration: 365.2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -918955s;
  width: 15em;
  height: 15em;
  position: absolute;
  left: 27.4em;
  top: 27.4em; }

#earth {
  width: 5em;
  height: 5em;
  background: #2e9cea;
  border-radius: 50%;
  transform: translateX(34.9em) rotate(90deg);
  position: absolute;
  top: 5em;
  left: 5em; }
  #earth:after {
    content: close-quote;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    border-radius: 500px 500px 0 0; }

@keyframes lineanim {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes counterspin {
  from {
    transform: translate(0) rotate(270deg); }
  to {
    transform: translate(0) rotate(-90deg); } }
.clouds {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  animation-name: counterspin;
  animation-duration: 365.2s;
  animation-delay: -918955s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

.cloud_wrap {
  width: 100%;
  animation-name: lineanim;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.18, 0.01, 0.8, 0.99); }
  .cloud_wrap.c1 {
    animation-delay: -2.5s; }
  .cloud_wrap.c2 {
    animation-delay: -6.5s; }
  .cloud_wrap.c3 {
    animation-delay: -9.8s; }
  .cloud_wrap.c4 {
    animation-delay: -9.5s; }
  .cloud_wrap.c5 {
    animation-delay: -2.5s; }

.cloud {
  position: relative;
  height: .75em;
  border-radius: 1em;
  background: #fff; }
  .cloud.c1 {
    width: 3em;
    top: .25em;
    left: 2em;
    animation-delay: -2.5s; }
  .cloud.c2 {
    width: 2em;
    top: .25em;
    left: 2em;
    animation-delay: -6.5s; }
  .cloud.c3 {
    width: 1em;
    top: .25em;
    left: 3.1em;
    animation-delay: -9.8s; }
  .cloud.c4 {
    width: 2em;
    top: .1em;
    left: 2.4em;
    animation-delay: -9.5s; }
  .cloud.c5 {
    width: 2em;
    top: .25em;
    left: 1em;
    animation-delay: -2.5s; }

.islands {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  animation-name: counterspin;
  animation-duration: 365.2s;
  animation-delay: -918955s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

.island_wrap {
  width: 100%;
  animation-name: lineanim;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }
  .island_wrap.i1 {
    animation-delay: -15s; }
  .island_wrap.i2 {
    animation-delay: -9s; }
  .island_wrap.i3 {
    animation-delay: -40.8s; }
  .island_wrap.i4 {
    animation-delay: -57s; }
  .island_wrap.i5 {
    animation-delay: -21s; }

.island {
  position: relative;
  height: 1.25em;
  border-radius: 1em;
  background: #6ece4f; }
  .island.i1 {
    width: 3em;
    top: .25em;
    left: 2em;
    animation-delay: -15s; }
  .island.i2 {
    width: 2em;
    top: -.5em;
    left: 2.5em;
    animation-delay: -9s; }
  .island.i3 {
    width: 3em;
    top: -1em;
    left: 2em;
    animation-delay: -40.8s; }
  .island.i4 {
    width: 2em;
    top: -.3em;
    left: 2em;
    animation-delay: -57s; }
  .island.i5 {
    width: 1.25em;
    top: -1em;
    left: 2em;
    animation-delay: -21s; }

#luna_orbit {
  position: absolute;
  width: 11em;
  height: 11em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -3em;
  top: -3em;
  box-sizing: border-box; }

#luna_wrapper {
  animation-name: planetspin;
  animation-duration: 27.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  width: 5em;
  height: 5em;
  position: absolute;
  left: 2.9em;
  top: 2.9em; }

#luna {
  width: 1em;
  height: 1em;
  background: #838383;
  border-radius: 50%;
  transform: translateX(5.4em);
  position: absolute;
  top: 2em;
  left: 2em; }

#mars_orbit {
  position: absolute;
  width: 90em;
  height: 90em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -37.5em;
  top: -37.5em;
  box-sizing: border-box; }

#mars_wrapper {
  animation-name: planetspin;
  animation-duration: 687s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -918955s;
  width: 15em;
  height: 15em;
  position: absolute;
  left: 37.4em;
  top: 37.4em; }

#mars {
  width: 2.5em;
  height: 2.5em;
  background: #e48466;
  border-radius: 50%;
  transform: translateX(44.9em) rotate(90deg);
  position: absolute;
  top: 6.25em;
  left: 6.25em; }
  #mars:after {
    content: close-quote;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    border-radius: 500px 500px 0 0; }

#jupiter_orbit {
  position: absolute;
  width: 110em;
  height: 110em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -47.5em;
  top: -47.5em;
  box-sizing: border-box; }

#jupiter_wrapper {
  animation-name: planetspin;
  animation-duration: 4331s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -918955s;
  width: 15em;
  height: 15em;
  position: absolute;
  left: 47.4em;
  top: 47.4em; }

#jupiter {
  width: 8em;
  height: 8em;
  background: #e4bdab;
  border-radius: 50%;
  transform: translateX(54.9em) rotate(90deg);
  position: absolute;
  top: 3.5em;
  left: 3.5em; }
  #jupiter:after {
    content: close-quote;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    border-radius: 500px 500px 0 0; }

#saturn_orbit {
  position: absolute;
  width: 130em;
  height: 130em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -57.5em;
  top: -57.5em;
  box-sizing: border-box; }

#saturn_wrapper {
  animation-name: planetspin;
  animation-duration: 10747s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -918955s;
  width: 15em;
  height: 15em;
  position: absolute;
  left: 57.4em;
  top: 57.4em; }

#saturn {
  width: 6.5em;
  height: 6.5em;
  background: #e4d987;
  border-radius: 50%;
  transform: translateX(64.9em) rotate(90deg);
  position: absolute;
  top: 4.25em;
  left: 4.25em; }
  #saturn:after {
    content: close-quote;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    border-radius: 500px 500px 0 0; }

#uranus_orbit {
  position: absolute;
  width: 150em;
  height: 150em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -67.5em;
  top: -67.5em;
  box-sizing: border-box; }

#uranus_wrapper {
  animation-name: planetspin;
  animation-duration: 30589s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -918955s;
  width: 15em;
  height: 15em;
  position: absolute;
  left: 67.4em;
  top: 67.4em; }

#uranus {
  width: 5.8em;
  height: 5.8em;
  background: #65dbe4;
  border-radius: 50%;
  transform: translateX(74.9em) rotate(90deg);
  position: absolute;
  top: 4.6em;
  left: 4.6em; }
  #uranus:after {
    content: close-quote;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    border-radius: 500px 500px 0 0; }

#neptune_orbit {
  position: absolute;
  width: 170em;
  height: 170em;
  background: none;
  border: 0.1em solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: -77.5em;
  top: -77.5em;
  box-sizing: border-box; }

#neptune_wrapper {
  animation-name: planetspin;
  animation-duration: 59800s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -918955s;
  width: 15em;
  height: 15em;
  position: absolute;
  left: 77.4em;
  top: 77.4em; }

#neptune {
  width: 5.2em;
  height: 5.2em;
  background: #3e82e4;
  border-radius: 50%;
  transform: translateX(84.9em) rotate(90deg);
  position: absolute;
  top: 4.9em;
  left: 4.9em; }
  #neptune:after {
    content: close-quote;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    border-radius: 500px 500px 0 0; }

/*# sourceMappingURL=styles.css.map */