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;
  -webkit-animation: opacityPulse 1.2s ease-out;
          animation: opacityPulse 1.2s ease-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.game:target .start {
  -webkit-animation: none;
          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;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  will-change: transform, opacity;
}
label:nth-of-type(1) {
  left: 23%;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}
label:nth-of-type(2) {
  left: 44%;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 5.4s;
          animation-delay: 5.4s;
}
label:nth-of-type(3) {
  left: 31%;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 8.1s;
          animation-delay: 8.1s;
}
label:nth-of-type(4) {
  left: 55%;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 10.8s;
          animation-delay: 10.8s;
}
label:nth-of-type(5) {
  left: 93%;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 13.5s;
          animation-delay: 13.5s;
}
label:nth-of-type(6) {
  left: 68%;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 16.2s;
          animation-delay: 16.2s;
}
label:nth-of-type(7) {
  left: 82%;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 18.9s;
          animation-delay: 18.9s;
}
label:nth-of-type(8) {
  left: 45%;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s;
  -webkit-animation-delay: 21.6s;
          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%);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.game:target label {
  -webkit-animation-name: crosshair-on;
          animation-name: crosshair-on;
}
input:checked + label {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  pointer-events: none;
}
input:checked + label:after {
  -webkit-animation: score-on 1.5s;
          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: PressStart2P;
  text-align: center;
  color: green;
  background-color: blue;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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;
  }
}