<!-- This uses the old checkbox-and-siblings trick, by using the CSS :checked property, check the CSS below. The order of these HTML elements is therefore important -->

<input id="btn" type="checkbox"><!-- will be hidden -->
<label for="btn"></label><!-- toggle, will activate checkbox -->
<div class="plate"></div><!-- animating background -->



















<a target="_blank" href="https://codepen.io/josfabre/pens/public" style="position: fixed; left: 2em; top: 2em; font-family: Sans-Serif; color: #fcfcfc; font-size: 13px; text-decoration: none; text-transform: uppercase; padding: 0.5em 1em; border: 1px solid #fcfcfc; border-radius: 6px; opacity: 0.9; ">All my pens</a>

<section style="position: fixed; left: 2em; bottom: 2em; font-family: 'Telefon', Sans-Serif; color:grey;">
  <h3>Other pens</h3>
  <ul style="display:flex;list-style-type:none;margin: 0; padding: 0;">
  <li style="margin-right: 1em;"><a href="https://codepen.io/josfabre/pen/abReBvP" target="_blank" style="color:grey;text-decoration:none;font-size:0.8rem;"><img style="border-radius: 8px;height: 100px; width: auto;box-shadow: 0 0 10px grey;" src="https://assets.codepen.io/439000/Screenshot+2023-06-07+at+08.39.48.png"><br>Real Slots Reels - Slot Machine</a></li>
  <li style="margin-right: 1em;"><a href="https://codepen.io/josfabre/pen/jOegyyJ" target="_blank" style="color:grey;text-decoration:none;font-size:0.8rem;"><img style="border-radius: 8px;height: 100px; width: auto;box-shadow: 0 0 10px grey;" src="https://assets.codepen.io/439000/Screenshot+2023-06-07+at+08.56.26.png"><br>Magnifying Glass Newspaper</a></li>
</section>

body {
  height: 100vh;
  background-image: linear-gradient(45deg, #555 10%, #888 90%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.plate {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0) scale(2);
  z-index: -1;
  background-image: repeating-conic-gradient(
    from 45deg at 50% 50%,
    #4a4 0deg 10deg,
    #5b5 10deg 20deg,
    #6c6 20deg 30deg
  );
  visibility: hidden;
  opacity: 0;
}

@keyframes rot {
  to {
    transform: translate(-50%, -50%) rotate(360deg) scale(2);
  }
}

input[type="checkbox"] {
  display: none;

  /* toggle in the OFF state */
  ~ label {
    position: relative;
    display: block;
    width: 140px;
    height: 72px;
    border-radius: 40px;
    border: 4px solid #999;
    transition: transform 200ms cubic-bezier(0.41, -0.01, 0.63, 1.09);
    cursor: pointer;
    background: rgba(black, 0.3);

    &::before,
    &::after {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 68px;
      height: 68px;
      border-radius: 36px;
      content: "";
      transition: all 220ms cubic-bezier(0.76, 0.01, 0.15, 0.97);
    }

    &::before {
      background-image: linear-gradient(45deg, #383 10%, #4b4 90%);
    }

    &::after {
      background-color: #999;
    }
  }

  /* toggle in the ON state */
  &:checked ~ label {
    border: 4px solid #fff;
    transform: scale(1.01);
    box-shadow: 0 0 120px 10px #9f9;
    border-color: #afa;
    background: rgba(green, 0.6);

    &::before {
      width: 136px;
    }

    &::after {
      transform: translateX(68px);
      background-color: #4c4;
      box-shadow: -4px 0 4px rgba(black, 0.1);
    }
  }

  /* This is the part that activates the background when the checkbox is checked */
  &:checked ~ div {
    // background: yellow;
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms, visibility 0s;
    animation: rot 10s linear infinite;
  }
}