.wrap-check-35 input[type="checkbox"] {
    visibility: hidden;
    display: none;
  }

  .wrap-check-35 *,
  .wrap-check-35 ::after,
  .wrap-check-35 ::before {
    box-sizing: border-box;
  }

  .wrap-check-35 .container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 25px;
    user-select: none;
  }

  /* Create a custom checkbox */
  .wrap-check-35 .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background: 
black;
    border-radius: 50px;
    transition: all 0.7s;
    --spread: 20px;
  }

  /* When the checkbox is checked, add a blue background */
  .wrap-check-35 .container input:checked ~ .checkmark {
    background: 
black;
    box-shadow: -10px -10px var(--spread) 0px 
#5B51D8, 0 -10px var(--spread) 0px 
#833AB4, 10px -10px var(--spread) 0px 
#E1306C, 10px 0 var(--spread) 0px 
#FD1D1D, 10px 10px var(--spread) 0px 
#F77737, 0 10px var(--spread) 0px 
#FCAF45, -10px 10px var(--spread) 0px 
#FFDC80;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .wrap-check-35 .checkmark::after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
  .wrap-check-35 .container input:checked ~ .checkmark::after {
    display: block;
  }

  /* Style the checkmark/indicator */
  .wrap-check-35 .container .checkmark::after {
    left: 0.5em;
    top: 0.34em;
    width: 0.25em;
    height: 0.5em;
    border: solid 
#f0f0f0;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
  }