.system-container {
  position:relative;
  overflow: hidden;
  margin: 0 -12px;
  padding: 0 12px;
}
.title-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}
.text-container {
  max-width: 720px;
  position:relative;
  z-index: 10;
}
.bg-gradient-system {
  display: block;
  background: linear-gradient(180deg, #0042A3 30%, transparent 90%);
  margin: 0 -12px;
  position: relative;
  z-index: 10;
  padding: 48px 0 32px 0;
}
.system {
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
  height: calc(100vh - 96px);
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
}

.dt--wrap {
  z-index: 1;
  width: 17%;
  height: 17%;
}

.dt--wrap .text {
  transform: translate3d(-50%, -50%, 0);
}
.center-circle {
  fill: transparent;
  overflow: visible;
  transform: translate3d(-50%, -50%, 0);
}
.center-circle__color {
  stroke: white;
  stroke-width: 5;
}

.outer-dt--wrap {
  width: 35%;
  height: 35%;
}
.outer-dt-circle {
  fill: transparent;
  overflow: visible;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
}
.shadow-pulse {
    box-shadow: 0px 0px 20px 20px rgba(107, 154, 255, .5);
    border-radius: 50%;
    animation: pulse-ring 2.25s infinite ease-in-out both;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    transform: translate3d(-50%, -50%, 0);
  padding-bottom: 100%;
}
@keyframes pulse-ring {
  0% {
    box-shadow: 0px 0px 20px 20px rgba(107,154,255,.5);
  }
  50% {
    box-shadow: 0px 0px 100px 20px rgba(107,154,255,.5);
  }
  100% {
    box-shadow: 0px 0px 20px 20px rgba(107,154,255,.5);
  }
}

.planet-btn-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* lets clicks go through except buttons */
}
.planet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  pointer-events: auto; /* make buttons clickable again */
  text-decoration: none;
  transform: translate(-50%, -50%);
  z-index: 5;
  max-width: 105px;
  text-align: center;
}

.planet-btn:hover .planet {
  animation: pulse 1s infinite ease-out;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0px 10px rgba(255, 255, 255, .4);
  }
  80% {
    box-shadow: 0 0 0px 15px rgba(255, 255, 255, .4);
  }
  100% {
    box-shadow: 0 0 0px 10px rgba(255, 255, 255, .4);
  }
}
.planet-btn .planet {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0px 10px rgba(255, 255, 255, .4);
  margin: 10px;
  padding: 5px;
}
.planet img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.planet-btn .planet-name {
  color: white;
  font-size; 20px;
  font-weight: bold;
}

/* Position buttons relative to orbit using percentages */
.planet-btn-1 {
  top: 26%;
  left: 76%;
}
.planet-btn-2 {
  top: 16%;
  left: 93%;
}
.planet-btn-3 {
  top: 63%;
  left: 88%;
}
.planet-btn-4 {
  top: 36%;
  left: 22%;
}
.planet-btn-5 {
  top: 16%;
  left: 8%;
}
.planet-btn-6 {
  top: 76%;
  left: 22%;
}
.planet-btn-7 {
  top: 86%;
  left: 75%;
}
.planet-btn-8 {
  top: 86%;
  left: 6%;
}

.venus--wrap {
  width: 60%;
  height: 60%;
  z-index: 2;
}

.earth--wrap {
  width: 77%;
  height: 77%;
  z-index: 1;
}

.mars--wrap {
  width: 94%;
  height: 94%;
  z-index: 0;
}

.outer-circle {
  fill: transparent;
  overflow: visible;
  transform: translate3d(-50%, -50%, 0);
}

.outer-circle__color {
  stroke: #0052CC;
}

.moon-circle {
  fill: white;
  transform-origin: center;
  // animation: orbit 5s infinite linear both;
}

.venus--animation-one {
  animation: orbit 20s infinite linear both;
  --start-angle: 220deg;
}
.venus--animation-two {
  fill: #306EF2;
  animation: orbit 10s infinite linear both;
  --start-angle: 125deg;
}
.venus--animation-three {
  fill: #F27B42;
  animation: orbit 15s infinite linear both;
   --start-angle: -45deg;
}

.earth--animation {
  animation: orbit 5s infinite linear both;
}

.earth--animation-one {
  fill: #F27B42;
  animation: orbit 25s infinite linear both;
  --start-angle: 90deg;
}
.earth--animation-three {
  fill: #306EF2;
  animation: orbit 11s infinite linear both;
  --start-angle: 285deg;
}

.mars--animation {
  animation: orbit 6.5s infinite linear both;
}
.mars--animation-two {
 fill: #F27B42;
  animation: orbit 31s infinite linear both;
  --start-angle: 265deg;
}
.mars--animation-three {
  animation: orbit 18s infinite linear both;
  --start-angle: 100deg;
}
@keyframes orbit {
  0% {
    transform: rotate(var(--start-angle, 0deg));
  }
  100% {
    transform: rotate(calc(var(--start-angle, 0deg) + 360deg));
  }
}

@media (max-width: 500px) { 
  .system-container {
    margin: 0;
  }
  .dt--wrap {
    width: 37%;
    height: 37%;
  }
  .outer-dt--wrap {
    width: 65%;
    height: 65%;
  }
  .venus--wrap {
    width: 100%;
    height: 100%;
  }
  .earth--wrap {
    width: 160%;
    height: 160%;
  }
  .mars--wrap {
    width: 220%;
    height: 220%;
  }
  .planet-btn .planet-name {
    font-size; 16px;
  }
  
  .planet-btn-1 {
        top: 29%;
    left: 76%;
  }
  .planet-btn-2 {
        top: -9%;
    left: 85%;
  }
  .planet-btn-3 {
        top: 33%;
    left: 18%;
  }
  .planet-btn-4 {
        top: -9%;
    left: 17%;
  }
  .planet-btn-5 {
top: 3%;
    left: 50%;
  }
  .planet-btn-6 {
        top: 73%;
    left: 82%;
  }
  .planet-btn-7 {
    top: 86%;
    left: 47%;
  }
  .planet-btn-8 {
    top: 70%;
    left: 14%;
  }
  .bg-gradient-system {
    padding-bottom:100px;
  }
}