.slider-container {
  overflow: hidden;
  width: 150px;
  height: 50px;
  border-radius: 125px;
  background: #0d84ec;
  display: flex;
  align-items: center;
}

.crater {
  position: absolute;
  background: #9a9a9a;
  border-radius: 50%;
}

.crater-xs {
  width: 10px;
  height: 10px;
}

.stars {
  height: 90%;
  transform: translate(-80px, 0);
}

.crater-xl {
  width: 13px;
  height: 13px;
}

.crater1 {
  top: 7px;
  left: 20px;
}

.crater2 {
  top: 25px;
  left: 17px;
}

.crater3 {
  top: 10px;
  left: 5px;
}

.clouds-wrapper {
  width: 50px;
  z-index: 100;
  height: 50px;
  transform: translate(20px, 0);
}

.planet-wrapper {
  display: flex;
  align-items: center;
}

.slider-border {
  width: 150px;
  height: 50px;
  border: 1px solid black;
  position: absolute;
  border-radius: 125px;
  z-index: 150;
  transform: translate(-20px, 0);
  filter: drop-shadow(1px 1px 1px #000);
}

.planet-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.planet {
  position: absolute;
  left: 0;
  transform: rotate(-180deg);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: drop-shadow(-1px -1px 1px #000);
}

.sun {
  background: #ffcc00;
}

.moon {
  opacity: 0%;
  background: #e9e9e9;
}

.ray {
  position: absolute;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.ray-1 {
  width: 75px;
  height: 75px;
  left: -15px;
}

.ray-2 {
  width: 100px;
  height: 100px;
  left: -27.5px;
}

.cloud {
  position: absolute;
  z-index: 50;
  background: white;
  border-radius: 50%;
}

.cloud-sm {
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}

.cloud-xl {
  width: 35px;
  height: 35px;
  transform: translate(-50%, -50%);
}

.cloud1 {
  top: 60px;
  left: 5px;
}

.cloud2 {
  top: 55px;
  left: 35px;
}

.cloud3 {
  top: 50px;
  left: 20px;
}

.cloud4 {
  top: 40px;
  left: 43px;
}/*# sourceMappingURL=slider.css.map */