body {
  pointer-events: auto;
  touch-action: none;
  background-color: #000000;
}

@font-face {
  font-family: 'Pacifico';
  src: url('../fonts/Pacifico.ttf');
}

@font-face {
  font-family: 'Pokemon Solid';
  src: url('../fonts/Pokemon\ Solid.ttf');
}

@font-face {
  font-family: 'Unown';
  src: url('../fonts/Unown.ttf');
}

.pac {
  font-family: 'Pokemon Solid';
}

.pokemon {
  font-family: 'Pacifico';
}

.unown {
  font-family: 'Unown';
}

input {
  display: none;
}

.neon {
  margin-top: 2rem;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  font-size: 1rem;
  color: #ff5722;
  text-align: center;
  transition: 2s ease;
}

.switch {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  width: 2rem;
  height: 1rem;
  position: relative;
  display: block;
  border-radius: 0.5rem;
  border: 0.02rem solid silver;
  background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.3) 25%,
        transparent 25%,
        transparent 50%
      )
      center/5px 5px,
    linear-gradient(90deg, red 50%, black 50%) -1.51rem /200% 100% no-repeat;
  box-shadow: 1px 1px 2px #211 inset, 2px 2px 4px #322 inset, 3px 3px 6px #544 inset;
  transition: all 0.5s;
}

input:checked ~ .switch {
  background-position: 1.51rem, -0.5rem;
  transition: all 0.5s;
}

.switch::before {
  content: '';
  width: 0.98rem;
  height: 0.98rem;
  border-radius: 50%;
  position: absolute;
  display: block;
  left: 0.01rem;
  top: 0.01rem;
  box-shadow: 1px 1px 1px #555, 2px 2px 1px #444, 3px 3px 1px #333, 5px 5px 10px black;
  background-color: gray;
  background-image: repeating-radial-gradient(transparent, transparent 0, transparent 7%, hsla(0, 0%, 100%, 0.1) 8%),
    repeating-radial-gradient(transparent, transparent 0, transparent 15%, hsla(0, 0%, 100%, 0.1) 18%),
    repeating-radial-gradient(transparent, transparent 0, transparent 3%, hsla(0, 0%, 100%, 0.2) 4%),
    radial-gradient(ellipse 8% 50% at top, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0) 100%),
    radial-gradient(ellipse 12% 50% at bottom, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0) 100%),
    radial-gradient(ellipse 50% 8% at left, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0) 100%),
    radial-gradient(ellipse 50% 8% at right, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0) 100%),
    radial-gradient(hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  transition: all 0.5s;
}

input:checked ~ .switch::before {
  transform: rotate(0deg) translateX(1rem);
  /* left: 1rem; */
  transition: all 0.5s;
}

/* @media (aspect-ratio < 1) and (min-width: 1024px) { */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .neon {
    margin-top: 2rem;
    width: 100%;
    height: 7rem;
    line-height: 7rem;
    font-size: 5rem;
    color: #ff5722;
    text-align: center;
    /* transition: 0.5s ease; */
  }

  .switch {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    width: 20rem;
    height: 10rem;
    border-radius: 5rem;
    background: repeating-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.3) 0%,
          rgba(255, 255, 255, 0.3) 25%,
          transparent 25%,
          transparent 50%
        )
        center/5px 5px,
      linear-gradient(90deg, red 50%, black 50%) -14.7rem /200% 100% no-repeat;
  }

  input:checked ~ .switch {
    background-position: 14.7rem, -5rem;
    transition: all 0.5s;
  }

  .switch::before {
    content: '';
    width: 9.8rem;
    height: 9.8rem;
    border-radius: 50%;
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
    box-shadow: 1px 1px 1px #555, 2px 2px 1px #444, 3px 3px 1px #333, 5px 5px 10px black;
  }

  input:checked ~ .switch::before {
    transform: rotate(0deg) translateX(10rem);
    /* left: 1rem; */
    transition: all 0.5s;
  }
}

input:checked ~ .neon {
  color: #fff;
  text-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 25px #fff, 0 0 30px #ff5722, 0 0 50px #ff5722, 0 0 60px #ff5722,
    0 0 80px #ff5722, 0 0 90px #ff5722;
  animation: neon-shining 2s ease-in-out infinite alternate;
}

.neon--on {
  color: #fff;
  text-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 25px #fff, 0 0 30px #ff5722, 0 0 50px #ff5722, 0 0 60px #ff5722,
    0 0 80px #ff5722, 0 0 90px #ff5722;
  animation: neon-shining 2s ease-in-out infinite alternate;
}

@keyframes neon-shining {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff5722, 0 0 70px #ff5722, 0 0 80px #ff5722,
      0 0 100px #ff5722, 0 0 150px #ff5722;
  }

  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff5722, 0 0 35px #ff5722, 0 0 40px #ff5722,
      0 0 50px #ff5722, 0 0 75px #ff5722;
  }
}