/*更多前端代码：http://www.bootstrapmb.coM*/
:root {
  --dark-color: rgb(0, 0, 0);
  --glossy-red: rgba(238, 17, 17, 1);
  --light-red: rgba(238, 17, 17, 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: 100%;
  height: 100%;
  -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);
  }
}