$border_radius: .3rem; 
$font_small: clamp( 1rem, 2.5vw, 1.2rem);
$font_medium: clamp(12px, 5vw , 1.5rem);
$font_large: clamp(1rem, 12vw, 2.5rem);
$font_color: #163577;
$font_color_secondary: #4f4f4f;

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  .container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 1.5rem;
    user-select: none;
  }
  

  .checkmark {
    --clr: #2ad167;
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    box-shadow:
        inset 2px 2px 6px #ccc,
        inset -2px -2px 6px #ccc;
    ;
    border-radius: 50%;
    transition: 300ms;

    &:focus {
      border: solid red;
    }

  }

  .container input:checked ~ .checkmark {
    background-color: var(--clr);
    box-shadow:
    inset 2px 2px 6px var(--clr),
    inset -2px -2px 6px var(--clr);
    ;
    border-radius: .5rem;
    animation: pulse 500ms ease-in-out;
  }
  

  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  

  .container input:checked ~ .checkmark:after {
    display: block;
  }
  

  .container .checkmark:after {
    left: 0.45em;
    top: 0.25em;
    width: 0.25em;
    height: 0.5em;
    border: solid #ffffff;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
  }
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 rgba(42, 209, 103, .16);
      rotate: 20deg;
    }
  
    30% {
      rotate: -20deg;
    }
  
    50% {
      box-shadow: 0 0 0 10px rgba(42, 209, 103,.30);
    }
  
    90%, 100% {
      box-shadow: 0 0 0 13px rgba(42, 209, 103,0);
      rotate: 0;
    }
  }