:root {
  --dark-color: rgb(0, 0, 0);
  --glossy-red: rgba(238, 17, 17, 1);
  --light-red: rgba(97, 18, 18, 0.5);
  --very-light-red: rgba(238, 17, 17, 0.25);
  --planets-theme: var(--light-red) var(--light-red) var(--light-red)
    var(--glossy-red);
  --paths-theme: var(--very-light-red) var(--glossy-red);
}
* {
  box-sizing: border-box;
  padding: 0;
  border: 0;
}
body {
  overflow: hidden;

  background-color: var(--dark-color);
}

#solar-system {
  display: flex;

  width: 100vw;
  height: 100vh;

  -webkit-transform: skewX(-45deg);
  -moz-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  -o-transform: skewX(-45deg);
  transform: skewX(-45deg);
  transform-origin: center;

  justify-content: center;
  align-items: center;
}

/* planets */

#sun {
  position: fixed;
  z-index: 100;

  width: 174.085px;
  height: 174.085px;

  -webkit-transform: skewX(45deg);
  -moz-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  -o-transform: skewX(45deg);
  transform: skewX(45deg);

  border-radius: 50%;
  background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);

  -webkit-background: linear-gradient(
    135deg,
    var(--glossy-red) 20%,
    transparent 100%
  );
  -moz-background: linear-gradient(
    135deg,
    var(--glossy-red) 20%,
    transparent 100%
  );
  -o-background: linear-gradient(
    135deg,
    var(--glossy-red) 20%,
    transparent 100%
  );
  -ms-background: linear-gradient(
    135deg,
    var(--glossy-red) 20%,
    transparent 100%
  );
  filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
}
#mercury {
  position: fixed;
  top: 36px;

  display: flex;

  width: 24.397px;
  height: 24.397px;

  -webkit-animation: planets-rotation 29s linear infinite;
  -moz-animation: planets-rotation 29s linear infinite;
  -ms-animation: planets-rotation 29s linear infinite;
  -o-animation: planets-rotation 29s linear infinite;
  animation: planets-rotation 29s linear infinite;

  border-width: 2px;
  border-style: solid;
  border-color: var(--planets-theme);
  border-radius: 50%;
  background: transparent;

  justify-content: center;
  align-items: center;
}

#venus {
  position: fixed;
  top: 11px;

  display: flex;

  width: 60.518px;
  height: 60.518px;

  -webkit-animation: planets-rotation 121.5s linear infinite;
  -moz-animation: planets-rotation 121.5s linear infinite;
  -ms-animation: planets-rotation 121.5s linear infinite;
  -o-animation: planets-rotation 121.5s linear infinite;
  animation: planets-rotation 121.5s linear infinite;

  border-width: 2px;
  border-style: solid;
  border-color: var(--planets-theme);
  border-radius: 50%;
  background: transparent;

  justify-content: center;
  align-items: center;
}

#earth {
  position: fixed;
  top: 30px;

  display: flex;

  width: 63.71px;
  height: 63.71px;
  /* animation-duration: .5s = 1 day on earth */

  -webkit-animation: planets-rotation 0.5s linear infinite;
  -moz-animation: planets-rotation 0.5s linear infinite;
  -ms-animation: planets-rotation 0.5s linear infinite;
  -o-animation: planets-rotation 0.5s linear infinite;
  animation: planets-rotation 0.5s linear infinite;

  border-width: 2px;
  border-style: solid;
  border-color: var(--planets-theme);
  border-radius: 50%;
  background: transparent;

  justify-content: center;
  align-items: center;
}
#earth::after {
  position: absolute;

  width: 40%; /* <-- set to 10% for the real planet size*/
  height: 40%;

  content: '';
  -webkit-animation: blink-earth 2s linear infinite;
  -moz-animation: blink-earth 2s linear infinite;
  -ms-animation: blink-earth 2s linear infinite;
  -o-animation: blink-earth 2s linear infinite;
  animation: blink-earth 2s linear infinite;

  border-radius: 50%;
  background: var(--glossy-red);

  -webkit-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  -moz-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  -o-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  -ms-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
}
#mars {
  position: fixed;
  top: 118px;

  display: flex;

  width: 33.895px;
  height: 33.895px;

  -webkit-animation: planets-rotation 0.5s linear infinite;
  -moz-animation: planets-rotation 0.5s linear infinite;
  -ms-animation: planets-rotation 0.5s linear infinite;
  -o-animation: planets-rotation 0.5s linear infinite;
  animation: planets-rotation 0.5s linear infinite;

  border-width: 2px;
  border-style: solid;
  border-color: var(--planets-theme);
  border-radius: 50%;
  background: transparent;

  justify-content: center;
  align-items: center;
}
#mars::after,
#venus::after,
#mercury::after {
  position: absolute;

  width: 40%; /* <-- set to 10% for the real planet size*/
  height: 40%;

  content: '';

  border-radius: 50%;
  background: var(--glossy-red);

  -webkit-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  -moz-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  -o-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  -ms-filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
}

/* planets trajectory */

#mercury-wrapper {
  position: fixed;

  width: 203.085px;
  height: 203.085px;

  -webkit-animation: solar-revolution 43.98s linear infinite;
  -moz-animation: solar-revolution 43.98s linear infinite;
  -ms-animation: solar-revolution 43.98s linear infinite;
  -o-animation: solar-revolution 43.98s linear infinite;
  animation: solar-revolution 43.98s linear infinite;

  border-width: 2px;
  border-style: solid;
  border-color: var(--paths-theme);
  border-radius: 50%;
}
#venus-wrapper {
  position: fixed;

  width: 257.085px;
  height: 257.085px;

  -webkit-animation: solar-revolution 112.345s linear infinite;
  -moz-animation: solar-revolution 112.345s linear infinite;
  -ms-animation: solar-revolution 112.345s linear infinite;
  -o-animation: solar-revolution 112.345s linear infinite;
  animation: solar-revolution 112.345s linear infinite;

  border-width: 2px;
  border-style: solid;
  border-color: var(--paths-theme);
  border-radius: 50%;
}

#earth-wrapper {
  position: fixed;

  width: 332.085px;
  height: 332.085px;
  /* animation-duration: .5s = 1 day on earth */

  -webkit-animation: solar-revolution 182.625s linear infinite;
  -moz-animation: solar-revolution 182.625s linear infinite;
  -ms-animation: solar-revolution 182.625s linear infinite;
  -o-animation: solar-revolution 182.625s linear infinite;
  animation: solar-revolution 182.625s linear infinite;

  border-width: 2px;
  border-style: solid;
  border-color: var(--paths-theme);
  border-radius: 50%;
}

#mars-wrapper {
  position: fixed;

  width: 446.085px;
  height: 446.085px;

  -webkit-animation: solar-revolution 343.485s linear infinite;
  -moz-animation: solar-revolution 343.485s linear infinite;
  -ms-animation: solar-revolution 343.485s linear infinite;
  -o-animation: solar-revolution 343.485s linear infinite;
  animation: solar-revolution 343.485s linear infinite;

  border-width: 2px;
  border-style: solid;
  border-color: var(--paths-theme);
  border-radius: 50%;
}

/* animation */

@keyframes solar-revolution {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes planets-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes blink-earth {
  from {
    background-color: var(--glossy-red);

    filter: drop-shadow(0 0 0.3rem var(--light-red)) blur(0.5px);
  }
  to {
    background-color: var(--dark-color);

    filter: drop-shadow(0 0 0 var(--light-red)) blur(0);
  }
}