/* Glow Switch */

.switch1 {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right, #fc6d6d 0%, #d35555 100%);
  display: flex;
  border-radius: var(--smradius);
}

.switchcontainer {
  display: flex;
  justify-content: center;
  margin: auto;
}

.divot {
  transform:
    rotate3d(1, .65, -1, 55deg);
  justify-self: center;
  display: flex;
  height: 20em;
  width: 3em;
  margin: auto;
  border-radius: 75em;
  border: 5px solid rgba(255, 255, 255, 0.8);
  mix-blend-mode: soft-light;
  box-shadow:
    inset -10px 8px 13px #e3e3e3,
    inset 0px 0px 5px #f0f0f0,
    inset 15px -10px 15px rgba(0, 0, 0, 0.5),
    -29px 12px 19px rgba(255, 255, 255, 0.7),
    8px 19px 20px rgba(0, 0, 0, 0.59);
}

.ballwrap {
  cursor:pointer;
  transform:
    rotate3d(.3, .2, -1, 46deg) translateX(-.5em);
  display: flex;
  justify-content: center;
  align-content: center;
  aspect-ratio: 1 / 1;
}

.ball {
  transform:translateY(0em);
  width: 4.1em;
  height: 4.1em;
  position: absolute;
  transition:all .5s ease-in-out;
}

.ballanim {
  animation-fill-mode: forwards;
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  transition:all .5s ease-in-out;
}

.ballfade {
  opacity:0;
  transition:all .5s ease-in-out;
}

/* Glow Ball */
.glowball {
  z-index:3;
  border-radius: 100%;
  background: radial-gradient(#ffffff 30%, #ffe5bcfa 55%, #ffd2cd 62%, #f1cf98 65%, #f7c3b3 70%);
  box-shadow: 0px 0px 25px #fffbf8, 0px 0px 35px #ffcda7, 0px 0px 55px #ff9a4d;
}

/* Gold Ball */
.goldball {
  cursor:none;
  border-radius: 100%;
  background: radial-gradient(circle at 20% 20%, #ffe292, #5a5403 80%, #774d00 100%);
  box-shadow:
    inset 0px 0px 5px #63000071,
    inset 5px -5px 10px #ff745b70,
    inset 0px 0px 20px #63190c,
    0px 11px 12px -4px rgba(117, 56, 56, 0.24),
    0px 20px 50px -4px rgba(117, 56, 56, 0.24);
}

.goldball:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 120% 50%, rgba(255, 160, 143, 0.5), rgba(165, 38, 6, 0.288) 70%);
  border-radius: 50%;
  bottom: 2.5%;
  left: 5%;
  opacity: 0.6;
  height: 100%;
  width: 90%;
  filter: blur(2px);
  z-index: 2;
}

.goldball:after {
  content: "";
  width:80%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: 0%;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 10%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  filter: blur(6px);
}

/* Gradient */

.blend {
  height:100%;
  width:100%;
  border-radius: var(--smradius);
}

.letter {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10em;
  position: absolute;
  z-index: 2;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.2);
  text-shadow:
    2px 2px 4px #476c77,
    -2px -2px 4px #476c77,

    -4px 0px 2px #e5f2ff,
    4px 0px 3px #e5f2ff,
    -6px -6px 2px #e5f2ff,

    4px 4px 4px #116f94,
    -3px 6px 4px #116f94,

    7px -7px 2px #0c7097,
    -8px -8px 2px #074057,

    5px 5px 2px #002230,
    -4px 4px 2px #002230,
    3px 0px 2px #002230,
    -5px 0px 2px #002230;
  mix-blend-mode: hard-light
}

.gradient {
  width:100%;
  height:100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  background-color: #2b3d38;
  border-radius: var(--smradius);
}

.main {
  -webkit-filter: blur(100px);
  filter: blur(100px);
}

.shape3 {
  position: absolute;
  left: -10%;
  top: -20%;
  right: 0;
  min-width: 600px;
  max-width: 900px;
  width: 20vw;
  height: 30vw;
  border-radius: 999em;
  background-color: #476c77;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

.shape2 {
  position: absolute;
  left: -20%;
  top: 5%;
  right: 0;
  min-width: 600px;
  max-width: 900px;
  width: 25vw;
  height: 40vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 999em;
  background-color: #FF6666;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

.shape1 {
  position: absolute;
  left: 0;
  top: 10%;
  right: 0;
  min-width: 600px;
  max-width: 900px;
  width: 25vw;
  height: 30vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 999em;
  background-color: #a0bce0;
}

.blending {
  -webkit-filter: blur(180px);
  filter: blur(180px);
  mix-blend-mode: overlay;
}

.shape4 {
  position: absolute;
  left: -10%;
  top: -10%;
  min-width: 600px;
  max-width: 900px;
  width: 20vw;
  height: 50vw;
  margin-left: auto;
  border-radius: 999em;
  background-color: #FF6666;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

.shape5 {
  position: absolute;
  left: -10%;
  top: -10%;
  right: 0%;
  min-width: 600px;
  max-width: 900px;
  width: 5vw;
  height: 20vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 999em;
  background-color: #FF6666;
}

.shape6 {
  position: absolute;
  top: -5%;
  right: -50%;
  min-width: 600px;
  max-width: 900px;
  width: 15vw;
  height: 40vw;
  margin-left: auto;
  border-radius: 999em;
  background-color: #a0bce0;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

.shape7 {
  position: absolute;
  left: 0;
  top: 0%;
  right: -5%;
  min-width: 600px;
  max-width: 900px;
  width: 10vw;
  height: 25vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 999em;
  background-color: rgb(98, 243, 183);
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

.shape8 {
  position: absolute;
  left: 10%;
  top: -30%;
  right: 0;
  min-width: 600px;
  max-width: 900px;
  width: 10vw;
  height: 40vw;
  border-radius: 999em;
  background-color: #9fc68e;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

.shape9 {
  position: absolute;
  top: -50%;
  left: 12%;
  min-width: 600px;
  max-width: 900px;
  width: 30vw;
  height: 60vw;
  border-radius: 999em;
  background-color: black;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}