.title {
  position: relative;
  text-align: center;
}
.title h1 {
  transition: opacity 0.3s ease-in;
  color: var(--primary-text);
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 0.2em 0;
}

@media (max-width: 400px) {
  .title h1 {
    font-size: 1.1rem;
    font-weight: 700;
  }
}

@media (min-width: 700px) {
  .title h1 {
    font-size: 1.2rem;
  }
}
.title h1:nth-of-type(2) {
  position: absolute;
  top: 0;
  opacity: 0;
  color: var(--primary-text-dark);
}
.dark .title h1:nth-of-type(1) {
  opacity: 0;
}
.dark .title h1:nth-of-type(2) {
  opacity: 1;
}
.outerBorder {
  width: 176px;
  height: 66px;
  border-radius: 33px;
  padding: 3px;
  background: linear-gradient(
    170deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(230, 230, 230, 1) 41%,
    rgba(230, 230, 230, 1) 69%,
    rgba(255, 255, 255, 1) 100%
  );
  transition: all 0.8s ease;
  transform: scale(0.41176);
}
.dark .outerBorder {
  background: linear-gradient(
    170deg,
    rgba(2, 0, 36, 1) 0%,
    rgb(55 55 55) 41%,
    #434343 69%,
    rgb(255 255 255) 100%
  );
}
#center {
  position: absolute;
  left: 12px;
  top: 5px;
  height: 50px;
  width: 50px;
}
.toggle-inner,
.halo1,
.halo2,
.halo3 {
  transition: transform 0.6s cubic-bezier(0.11, 0.71, 0.74, 1.15);
}
.outer-active .toggle-inner,
.outer-active .halo1,
.outer-active .halo2,
.outer-active .halo3 {
  transform: translate(96px);
}
.toggle-outer {
  outline-offset: 12px;
  cursor: pointer;
  width: 175px;
  height: 65px;
  border-radius: 30px;
  background: #87aed8;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.toggle-outer:before {
  z-index: 50;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  box-shadow: 1px 2px 4px 0px #000000 inset;
}

.toggle-inner {
  position: absolute;
  z-index: 20;
  height: 100%;
  width: 100%;
  background: #ffeb3b;
  border-radius: 100%;
  transition: background 0.3s linear,
    transform 0.6s cubic-bezier(0.11, 0.71, 0.74, 1.15);
  box-shadow: 1px 3px 4px 0px rgba(251, 255, 150, 0.96) inset,
    -1px -2px 5px 0px rgb(255 81 81 / 32%) inset, 2px 4px 11px -5px #000000;
}
.toggle-inner-overlay {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.toggle-active {
  background: #d0cece;
  box-shadow: 2px 3px 4px 0px rgba(255, 255, 255, 0.96) inset,
    -1px -2px 5px 0px rgb(93 93 93 / 84%) inset, 2px 4px 11px -5px #000000;
}
.spot1 {
  position: absolute;
  top: 20px;
  left: 8px;
  border-radius: 100%;
  width: 17px;
  height: 17px;
}
.spot2 {
  position: absolute;
  top: 10px;
  left: 21px;
  border-radius: 100%;
  width: 9px;
  height: 9px;
}
.spot3 {
  position: absolute;
  top: 29px;
  left: 31px;
  border-radius: 100%;
  width: 10px;
  height: 10px;
}
.toggle-active .spot1,
.toggle-active .spot2,
.toggle-active .spot3 {
  transition: background 0.45s ease-out 0.45s;
  background: #9b9a9a;
}
.clouds {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 10;
  transition: all 0.5s cubic-bezier(0.11, 0.71, 0.74, 1.1) 0.4s;
}
.clouds-active {
  transform: translate(0, 100%);
  transition: all 0.8s cubic-bezier(0.11, 0.71, 0.74, 1.1) 0s;
}
.outer-active {
  background: #101010;
}
.stars {
  transform: translate(0, -110%);
  transition: all 0.8s cubic-bezier(0.11, 0.71, 0.74, 1.15) 0s;
}
.outer-active .stars {
  transform: translate(0, -4px);
  transition: all 0.5s cubic-bezier(0.11, 0.71, 0, 1.11) 0.3s;
}
.halo1,
.halo2,
.halo3 {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.halo1 {
  z-index: 4;
  top: -30px;
  left: -30px;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
}
.halo2 {
  z-index: 3;
  top: -55px;
  left: -55px;
  width: calc(100% + 110px);
  height: calc(100% + 110px);
}
.halo3 {
  z-index: 2;
  top: -80px;
  left: -80px;
  width: calc(100% + 160px);
  height: calc(100% + 160px);
}