html {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 86" width="42" height="42"><path d="M42.998 0C19.252 0 0 19.252 0 43c0 23.749 19.252 43 42.998 43C66.748 86 86 66.749 86 43 86 19.252 66.748 0 42.998 0zM46.5 77.825V58.5h-7.002v19.325C22.965 76.184 9.818 63.035 8.176 46.5H27.5v-7.002H8.176C9.818 22.964 22.965 9.816 39.498 8.175V27.5H46.5V8.175c16.537 1.642 29.684 14.79 31.326 31.323H58.5V46.5h19.326C76.184 63.035 63.037 76.182 46.5 77.825z" fill="%2353FF45"/></svg>') 21 21, auto;
  }
  
  * {
    cursor: inherit;
  }
  
  body {
    counter-reset: points;
  }
  
  .start {
    text-shadow: 1px 1px 0px #53FF45;
    transition: transform opacity 1.5s ease-out;
    animation: opacityPulse 1.2s ease-out;
    animation-iteration-count: infinite;
  }
  .game:target .start {
    animation: none;
    opacity: 0;
    pointer-events: none;
  }
  
  .content {
    position: fixed;
    top: 0;
    right: 100px;
    bottom: 0;
    left: 100px;
    opacity: 0;
    transition: transform opacity 1.5s ease-out;
  }
  .game:target .content {
    opacity: 1;
  }
  
  label {
    position: absolute;
    top: -130px;
    width: 100px;
    height: 100px;
    animation-timing-function: ease-out;
    will-change: transform, opacity;
  }
  label:nth-of-type(1) {
    left: 44%;
    animation-duration: 2.7s;
    animation-delay: 2.7s;
  }
  label:nth-of-type(2) {
    left: 51%;
    animation-duration: 2.7s;
    animation-delay: 5.4s;
  }
  label:nth-of-type(3) {
    left: 27%;
    animation-duration: 2.7s;
    animation-delay: 8.1s;
  }
  label:nth-of-type(4) {
    left: 97%;
    animation-duration: 2.7s;
    animation-delay: 10.8s;
  }
  label:nth-of-type(5) {
    left: 88%;
    animation-duration: 2.7s;
    animation-delay: 13.5s;
  }
  label:nth-of-type(6) {
    left: 2%;
    animation-duration: 2.7s;
    animation-delay: 16.2s;
  }
  label:nth-of-type(7) {
    left: 21%;
    animation-duration: 2.7s;
    animation-delay: 18.9s;
  }
  label:nth-of-type(8) {
    left: 87%;
    animation-duration: 2.7s;
    animation-delay: 21.6s;
  }
  label:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: red;
    background-image: radial-gradient(transparent 15%, white 15%, white 35%, transparent 0%, transparent 55%, white 0);
    border-radius: 50%;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
    transition: opacity 1s ease-in-out;
  }
  input:checked + label:before {
    opacity: 0;
    filter: grayscale(100%);
  }
  label:after {
    content: "+1";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.7em;
    color: white;
    text-shadow: 2px 2px 0px red;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-fill-mode: forwards;
  }
  .game:target label {
    animation-name: crosshair-on;
  }
  input:checked + label {
    animation-play-state: paused;
    pointer-events: none;
  }
  input:checked + label:after {
    animation: score-on 1.5s;
  }
  
  input {
    opacity: 0;
  }
  input:checked {
    counter-increment: points;
    pointer-events: none;
  }
  
  .score:before {
    content: counter(points);
  }
  .game:target .score {
    transform: translateY(calc(100% - 50vh)) scale(2.2);
    transition: transform 0.4s 24.3s ease-in-out;
  }
  
  body {
    font-family: "Press Start 2P", cursive;
    text-align: center;
    color: green;
    background-color: blue;
    user-select: none;
  }
  
  .start {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    text-decoration: none;
    color: white;
    text-shadow: 2px 2px 0 red;
  }
  .start span {
    display: inline-block;
    margin-left: 0.5em;
    font-size: 1.4em;
    text-shadow: none;
  }
  
  .score {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    color: #53FF45;
    text-shadow: 2px 2px 0px red;
    pointer-events: none;
  }
  
  @-webkit-keyframes opacityPulse {
    30% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
  }
  
  @keyframes opacityPulse {
    30% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
  }
  @-webkit-keyframes crosshair-on {
    100% {
      transform: translateY(calc(102vh + 130px));
    }
  }
  @keyframes crosshair-on {
    100% {
      transform: translateY(calc(102vh + 130px));
    }
  }
  @-webkit-keyframes score-on {
    10% {
      transform: translate(-50%, calc(-50% - 3em));
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes score-on {
    10% {
      transform: translate(-50%, calc(-50% - 3em));
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }