* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background: url("../img/solar-system.jpg");
  background-repeat: no-repeat;
  background-size: auto 100vh;
  background-position: center;
  overflow: hidden;
}

p {
  font-family: Courier New, Courier, monospace;
  font-size: 2.4vh;
}

.planets {
  position: absolute;
  top: 50vh;
  left: 50vw;
}

#sun {
  background: url(../img/sun.png) 0 0/100% 100%;
  height: 5vh;
  width: 5vh;
  margin-top: -2.8vh;
  margin-left: -2.5vh;
}

#mercury {
  background: url(../img/mercury.png) 0 0/100% auto no-repeat;
  position: absolute;
  top: -5.3vh;
  height: 7vh;
  width: 2vh;
  margin-top: -2vh;
  margin-left: -1vh;
  transform-origin: bottom;
}

#venus {
  background: url(../img/venus.png) 0 0/100% auto no-repeat;
  position: absolute;
  top: -8.4vh;
  height: 10.2vh;
  width: 3vh;
  margin-top: -2vh;
  margin-left: -1.5vh;
  transform-origin: bottom;
}

#earth {
  background: url(../img/earth.png) 0 0/100% auto no-repeat;
  position: absolute;
  top: -15vh;
  height: 16.8vh;
  width: 3vh;
  margin-top: -2vh;
  margin-left: -1.5vh;
  transform-origin: bottom;
}

#moon {
  background: url(../img/moon.png) 0 0/100% auto no-repeat;
  position: absolute;
  top: -0.8vh;
  height: 4.2vh;
  width: 1.5vh;
  margin-top: -2vh;
  margin-left: 0.75vh;
  transform-origin: bottom;
}

#mars {
  background: url(../img/mars.png) 0 0/100% auto no-repeat;
  position: absolute;
  top: -23.6vh;
  height: 25.4vh;
  width: 3vh;
  margin-top: -2vh;
  margin-left: -1.5vh;
  transform-origin: bottom;
}

#jupiter {
  background: url(../img/jupiter.png) 0 0/100% auto no-repeat;
  position: absolute;
  top: -28.9vh;
  height: 30.7vh;
  width: 3vh;
  margin-top: -2vh;
  margin-left: -1.5vh;
  transform-origin: bottom;
}

#saturn {
  background: url(../img/saturn.png) 0 0/100% auto no-repeat;
  position: absolute;
  top: -35.6vh;
  height: 37.6vh;
  width: 4vh;
  margin-top: -2vh;
  margin-left: -2vh;
  transform-origin: bottom;
}

#date {
  position: absolute;
  bottom: 0;
  height: 4vh;
  width: 100vw;
  background: #222;
  font-weight: bold;
  padding: 2.8vh 2vh 1.2vh 2vh;
  color: #deb887;
}

button {
  position: absolute;
  bottom: 0;
  border: 0;
  height: 8vh;
  width: 8vh;
  cursor: pointer;
}

#about {
  display: flex;
  position: absolute;
  top: -100vh;
  left: 0;
  height: 100vh;
  height: -webkit-fill-available;
  width: 100vw;
  align-items: center;
  justify-content: center;
  background: #222;
  transition: top 1s ease, opacity 1s ease;
}

#about p {
  max-width: 86vh;
  color: #deb887;
  padding: 2vh;
}

#about p span {
  float: right;
  font-size: 3em;
  font-weight: bold;
  margin: -0.2em 0 0.5em 0.5em;
  cursor: pointer;
}

#about a {
  color: #deb887;
}

#start {
  background: url("../img/start.png") 0px 0px / 100% 100% no-repeat;
}

#forward {
  background: url("../img/forward.png") 0px 0px / 100% 100% no-repeat;
}

#stop {
  background: url("../img/stop.png") 0px 0px / 100% 100% no-repeat;
}

#info {
  background: url("../img/info.png") 0px 0px / 100% 100% no-repeat;
}

@media (orientation:landscape) {
  #date {
    text-align: center;
  }

  #start {
    left: 50vw;
    margin-left: 12vh;
  }

  #forward {
    left: 50vw;
    margin-left: 20vh;
  }

  #stop {
    left: 50vw;
    margin-left: 28vh;
  }

  #info {
    left: 50vw;
    margin-left: 36vh;
  }
}

@media (orientation:portrait) {
  #date {
    text-align: left;
  }

  #start {
    right: 24vh;
  }

  #forward {
    right: 16vh;
  }

  #stop {
    right: 8vh;
  }

  #info {
    right: 0vh;
  }
}