body {
  background-image: url(/img/background-stars.svg);
  background-attachment: fixed;
  background-color: #070724;
  color: white;
  font-family: "Spartan", sans-serif;
  font-size: 0.875rem;
  line-height: 1.562rem;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  padding-top: 4.58rem;
}

.preload * {
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

h1 {
  font-family: "Antonio", sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  text-transform: uppercase;
  display: inline;
}

h2 {
  font-family: "Antonio", sans-serif;
  font-size: 2.5rem;
  line-height: 3.25;
  letter-spacing: -1.5px;
  font-weight: 500;
}

h4 {
  font-family: "Spartan", sans-serif;
  font-size: 0.687rem;
  line-height: 1.562rem;
  letter-spacing: 1px;
  font-weight: 700;
}

.headline {
  border-bottom: 1px solid #979797a6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3125rem 1.25rem;
}

nav {
  background-color: #070724;
  position: fixed;
  width: 100%;
  top: 0;
  height: 4.581rem;
  transition: height 0.4s ease;
  z-index: 100;
}

.hamburger {
  padding: 0;
  display: flex;
}

.nav_list {
  list-style: none;
  color: white;
  padding: 0rem;
  padding-left: 1.25rem;
  margin: 0;
  visibility: hidden;
  max-height: 0;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0.1s ease, margin 0.4s ease;
}

.nav_list_open_body .nav_list {
  margin-top: 1rem;
  visibility: visible;
  max-height: 600rem;
  opacity: 1;
}

.nav_list_open_body nav {
  height: 100vh;
  overflow: auto;
}

.nav_list_open_body {
  overflow: hidden;
}

.nav_list li {
  border-bottom: 1px solid #97979759;
  width: 94%;
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 0;
}

.nav_list li:last-child {
  border-bottom: 0px;
}

.planet-menu {
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: 50%;
  margin-right: 1.875rem;
}

.planetNav {
  display: flex;
}

.nav_list a {
  color: white;
  text-decoration: none;
  font-size: 0.937rem;
  font-weight: 600;
  letter-spacing: 1.36px;
  text-transform: uppercase;
}

.arrow {
  margin-right: 0.312rem;
}

#spanmercury {
  background-color: #def4fc;
}
#spanvenus {
  background-color: #f7cc7f;
}
#spanearth {
  background-color: #545bfe;
}
#spanmars {
  background-color: #ff6a45;
}
#spanjupiter {
  background-color: #ecad7a;
}
#spansaturn {
  background-color: #fccb6b;
}
#spanuranus {
  background-color: #65f0d5;
}
#spanneptune {
  background-color: #497efa;
}

.submenu {
  border-bottom: 1px solid #979797a6;
  display: flex;
  justify-content: space-evenly;
}
.contentButton {
  color: #838391;
  background: none;
  border: none;
  font-size: 0.562rem;
  font-weight: 700;
  letter-spacing: 1.93px;
  text-transform: uppercase;
  padding: 1.062rem 0.312rem;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: all 0.4s ease;
}

.contentButton:hover {
  border-bottom: 4px solid #419ebb;
  cursor: pointer;
}

.big-screen {
  display: none;
}

#mercury-buttons .contentButton:hover,
.mercury-buttons-active {
  border-bottom: 4px solid #419ebb;
  color: white;
}
#venus-buttons .contentButton:hover,
.venus-buttons-active {
  border-bottom: 4px solid #eda249;
  color: white;
}
#earth-buttons .contentButton:hover,
.earth-buttons-active {
  border-bottom: 4px solid #6d2ed5;
  color: white;
}

#mars-buttons .contentButton:hover,
.mars-buttons-active {
  border-bottom: 4px solid #d14c32;
  color: white;
}
#jupiter-buttons .contentButton:hover,
.jupiter-buttons-active {
  border-bottom: 4px solid #d83a34;
  color: white;
}
#saturn-buttons .contentButton:hover,
.saturn-buttons-active {
  border-bottom: 4px solid #cd5120;
  color: white;
}

#uranus-buttons .contentButton:hover,
.uranus-buttons-active {
  border-bottom: 4px solid #1ec1a2;
  color: white;
}
#neptune-buttons .contentButton:hover,
.neptune-buttons-active {
  border-bottom: 4px solid #2d68f0;
  color: white;
}

.planet-box {
  height: 19rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-items: center;
  align-items: center;
}

.inside-planet {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}
.real-planet {
  width: 6.25rem;
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  position: relative;
  top: 30%;
}
.outside-planet {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.mercury-size {
  width: 6.937rem;
  height: 6.937rem;
}
.venus-size {
  width: 9.625rem;
  height: 9.625rem;
}
.earth-size {
  width: 10.812rem;
  height: 10.812rem;
}
.mars-size {
  width: 8.062rem;
  height: 8.062rem;
}
.jupiter-size {
  width: 14rem;
  height: 14rem;
}
.saturn-size {
  width: 16rem;
  height: 16rem;
}
.uranus-size {
  width: 11rem;
  height: 11rem;
}
.neptune-size {
  width: 10.812rem;
  height: 10.812rem;
}

.information {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-items: center;
  align-items: start;
}

.current-planet {
  grid-area: 1 / 1 / 2 / 2;
}
.inside-txt {
  opacity: 0;
  grid-area: 2 / 1 / 3 / 2;
  transition: opacity 0.5s ease-in;
  pointer-events: none;
}
.real-txt {
  opacity: 0;
  grid-area: 2 / 1 / 3 / 2;
  transition: opacity 0.5s ease-in;
  pointer-events: none;
}
.outside-txt {
  opacity: 0;
  grid-area: 2 / 1 / 3 / 2;
  transition: opacity 0.5s ease-in;
  pointer-events: none;
}
.visible-planet {
  opacity: 1;
  pointer-events: all;
}
.invisible-planet {
  opacity: 0;
}

.information h2 {
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0.562rem;
}

.facts {
  font-size: 0.687rem;
  line-height: 1.375rem;
  text-align: center;
  margin: 0 1.5rem;
}

.quelle {
  font-size: 0.75rem;
  line-height: 1.562rem;
  color: #838391;
  margin-top: 2rem;
  margin-bottom: 1.75rem;
}
.quelle::after {
  content: url(/img/icon-source.svg);
  position: relative;
  top: 0.187rem;
}

.quelle a {
  color: #838391;
  transition: all 0.4s ease;
  font-weight: 600;
}

.quelle a:hover {
  color: white;
}

.hard-facts {
  margin: 0 1.5rem;
}
.facts-txt {
  border: 1px solid #979797a6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #838391;
  line-height: 1rem;
  letter-spacing: 0.73px;
  padding: 0.812rem 1.5rem;
  margin-bottom: 0.5rem;
}
.facts-txt:last-of-type {
  margin-bottom: 2.937rem;
}

.number-facts {
  font-family: "Antonio", sans-serif;
  font-size: 1.25rem;
  line-height: 100%;
  letter-spacing: -0.75px;
  font-weight: 500;
  color: white;
}

.facts-desc {
  align-self: center;
}

@media (min-width: 768px) {
  .headline {
    flex-direction: column;
    padding: 0;
    border: none;
  }

  h1 {
    margin-top: 2rem;
    margin-bottom: 2.437rem;
    letter-spacing: -1.05px;
    line-height: 100%;
  }

  .information h2 {
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 100%;
  }

  nav {
    position: absolute;
  }

  .nav_list {
    visibility: visible;
    opacity: 1;
    display: flex;
    max-height: 12.5rem;
    padding: 0;
    justify-content: space-between;
    border-bottom: 1px solid #97979759;
    padding: 0 3.187rem 1.687rem 3.187rem;
  }

  .nav_list li {
    justify-content: center;
    padding: 0;
    width: auto;
    border: none;
  }
  .nav_list a {
    font-size: 0.687rem;
    letter-spacing: 1px;
    transition: all 0.4s ease;
  }
  .nav_list a:hover {
    color: #838391;
  }

  .hamburger {
    display: none;
  }

  .planet-menu {
    display: none;
  }

  main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .planet-box {
    grid-area: 1 / 1 / 2 / 3;
    height: 30.5rem;
  }

  .real-planet {
    width: 6.437rem;
  }

  .information {
    grid-area: 2 / 1 / 3 / 2;
    justify-items: left;
    margin-top: 5.5rem;
    margin-left: 2.437rem;
  }

  .submenu {
    grid-area: 2 / 2 / 3 / 3;
    justify-content: center;
    flex-direction: column;
    border: none;
    margin: 7rem 2.5rem 0 0;
    width: 17.562rem;
    justify-self: end;
  }
  .arrow {
    display: none;
  }

  .hard-facts {
    grid-area: 3 / 1 / 4 / 3;
    display: flex;
    margin: 0 2.5rem 2.937rem 2.437rem;
    height: 5.5rem;
  }

  .facts {
    text-align: left;
    margin: 0;
  }

  .planet-box img {
    margin-top: 8.75rem;
  }

  .mercury-size {
    width: 11.5rem;
    height: 11.5rem;
  }
  .venus-size {
    width: 15.812rem;
    height: 15.812rem;
  }
  .earth-size {
    width: 17.812rem;
    height: 17.812rem;
  }
  .mars-size {
    width: 13.312rem;
    height: 13.312rem;
  }
  .jupiter-size {
    width: 23.062rem;
    height: 23.062rem;
  }
  .saturn-size {
    width: 26.375rem;
    height: 26.375rem;
  }
  .uranus-size {
    width: 18.125rem;
    height: 18.125rem;
  }
  .neptune-size {
    width: 17.812rem;
    height: 17.812rem;
  }

  .contentButton {
    border: 1px solid #97979759;
    line-height: 1.562rem;
    padding: 0.5rem 0 0.5rem 1.25rem;
    margin-bottom: 1rem;
    color: white;
    text-align: left;
  }

  .contentButton:hover:not(.mars-buttons-active) {
    background-color: #419ebb;
    cursor: pointer;
    border: 1px solid transparent;
  }

  #mercury-buttons .contentButton:hover,
  .mercury-buttons-active {
    background-color: #419ebb;
    color: white;
    border: 1px solid transparent;
  }
  #venus-buttons .contentButton:hover,
  .venus-buttons-active {
    background-color: #eda249;
    color: white;
    border: 1px solid transparent;
  }
  #earth-buttons .contentButton:hover,
  .earth-buttons-active {
    background-color: #6d2ed5;
    color: white;
    border: 1px solid transparent;
  }

  #mars-buttons .contentButton:hover,
  .mars-buttons-active {
    background-color: #d14c32;
    color: white;
    border: 1px solid transparent;
  }

  #jupiter-buttons .contentButton:hover,
  .jupiter-buttons-active {
    background-color: #d83a34;
    color: white;
    border: 1px solid transparent;
  }
  #saturn-buttons .contentButton:hover,
  .saturn-buttons-active {
    background-color: #cd5120;
    color: white;
    border: 1px solid transparent;
  }

  #uranus-buttons .contentButton:hover,
  .uranus-buttons-active {
    background-color: #1ec1a2;
    color: white;
    border: 1px solid transparent;
  }
  #neptune-buttons .contentButton:hover,
  .neptune-buttons-active {
    background-color: #2d68f0;
    color: white;
    border: 1px solid transparent;
  }

  #mercury-buttons .contentButton:hover:not(.mercury-buttons-active),
  #venus-buttons .contentButton:hover:not(.venus-buttons-active),
  #earth-buttons .contentButton:hover:not(.earth-buttons-active),
  #mars-buttons .contentButton:hover:not(.mars-buttons-active),
  #jupiter-buttons .contentButton:hover:not(.jupiter-buttons-active),
  #saturn-buttons .contentButton:hover:not(.saturn-buttons-active),
  #uranus-buttons .contentButton:hover:not(.uranus-buttons-active),
  #neptune-buttons .contentButton:hover:not(.neptune-buttons-active) {
    background-color: #38384f;
    border: 1px solid transparent;
  }

  .big-screen {
    display: unset;
  }

  .number-change {
    color: #838391;
    margin-right: 1.062rem;
  }

  .facts-txt:last-of-type {
    margin: 0;
  }

  .facts-txt {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 0.687rem 0 0;
    width: 10.25rem;
    padding: 1rem 0 1.187rem 0.937rem;
  }

  .facts-desc {
    align-self: auto;
  }
}

@media (min-width: 1232px) {
  nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #97979759;
    height: 5.312rem;
    align-items: flex-start;
  }

  .nav_list {
    border: none;
    margin-right: 2.5rem;
    padding: 0;
  }

  .nav_list li {
    padding: 0;
    margin-right: 2.062rem;
    height: 5.125rem;
    display: flex;
    align-items: center;
  }
  .nav_list li:last-of-type {
    margin: 0;
  }

  h1 {
    margin: 0;
  }

  .headline {
    margin-left: 2rem;
    align-self: center;
  }

  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .planet-box {
    grid-area: 1 / 1 / 3 / 2;
    height: 41.625rem;
    padding-top: 4.375rem;
  }

  .planet-box img {
    margin: 0;
  }

  .information {
    grid-area: 1 / 2 / 2 / 3;
    margin: 7.875rem 10.312rem 0 0;
    width: 21.875rem;
    justify-self: end;
  }

  .submenu {
    grid-area: 2 / 2 / 3 / 3;
    margin: 0 10.312rem 0 0;
    width: 21.875rem;
    justify-content: flex-start;
  }

  .information h2 {
    font-size: 5rem;
  }

  .contentButton {
    font-size: 0.75rem;
    padding: 0.75rem 0 0.75rem 1.75rem;
  }

  .hard-facts {
    grid-area: 3 / 1 / 4 / 3;
    justify-content: space-between;
    height: 8rem;
    margin: 5.437rem 10.312rem 3.5rem 10.312rem;
  }

  .facts,
  .quelle {
    font-size: 0.875rem;
  }

  .facts p {
    height: 152px;
  }

  p.quelle {
    height: auto;
  }

  .quelle {
    margin: 0;
  }

  .facts-txt {
    margin-right: 1.875rem;
    width: 15.937rem;
    font-size: 0.687rem;
    letter-spacing: 1px;
    line-height: 1.562rem;
    padding: 1.25rem 0 1.687rem 1.437rem;
  }

  .number-facts {
    font-size: 2.5rem;
    letter-spacing: -1.5px;
  }
  .facts-desc {
    margin-top: 0.5rem;
  }

  .real-planet {
    width: 10.187rem;
    top: 27%;
  }

  .mercury-size {
    width: 18.125rem;
    height: 18.125rem;
  }
  .venus-size {
    width: 25rem;
    height: 25rem;
  }
  .earth-size {
    width: 28.125rem;
    height: 28.125rem;
  }
  .mars-size {
    width: 21rem;
    height: 21rem;
  }
  .jupiter-size {
    width: 36.375rem;
    height: 36.375rem;
  }
  .saturn-size {
    width: 41.625rem;
    height: 41.6255rem;
  }
  .uranus-size {
    width: 28.625rem;
    height: 28.625rem;
  }
  .neptune-size {
    width: 28.125rem;
    height: 28.125rem;
  }

  li.border-mercury,
  li.border-venus,
  li.border-earth,
  li.border-mars,
  li.border-jupiter,
  li.border-saturn,
  li.border-uranus,
  li.border-neptune {
    border-top: 4px solid transparent;
  }
  li.border-mercury:hover {
    border-top: 4px solid #419ebb;
  }
  li.border-venus:hover {
    border-top: 4px solid #eda249;
  }
  li.border-earth:hover {
    border-top: 4px solid #6d2ed5;
  }
  li.border-mars:hover {
    border-top: 4px solid #d14c32;
  }
  li.border-jupiter:hover {
    border-top: 4px solid #d83a34;
  }
  li.border-saturn:hover {
    border-top: 4px solid #cd5120;
  }
  li.border-uranus:hover {
    border-top: 4px solid #1ec1a2;
  }
  li.border-neptune:hover {
    border-top: 4px solid #2d68f0;
  }
}