#toggleStars{
  display:none;
}

.stars{
  opacity:0;
  transition:0.5s;
}

#toggleStars:checked ~ .stars{
  opacity:1;
}

.star {
  position: absolute;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  animation: twinkle linear infinite;
}

@keyframes twinkle {
  0% { opacity: 0.1; }
  50% { opacity: 1; }
  100% { opacity: 0.1; }
}

.star:nth-child(1)  { top: 10%;  left: 5%;  width: 2px; height: 2px; animation-duration: 2s; }
.star:nth-child(2)  { top: 20%;  left: 15%; width: 1px; height: 1px; animation-duration: 3s; }
.star:nth-child(3)  { top: 30%;  left: 25%; width: 2px; height: 2px; animation-duration: 4s; }
.star:nth-child(4)  { top: 40%;  left: 35%; width: 1px; height: 1px; animation-duration: 2.5s; }
.star:nth-child(5)  { top: 50%;  left: 45%; width: 3px; height: 3px; animation-duration: 5s; }
.star:nth-child(6)  { top: 60%;  left: 55%; width: 2px; height: 2px; animation-duration: 3.5s; }
.star:nth-child(7)  { top: 70%;  left: 65%; width: 1px; height: 1px; animation-duration: 4.5s; }
.star:nth-child(8)  { top: 80%;  left: 75%; width: 2px; height: 2px; animation-duration: 3s; }
.star:nth-child(9)  { top: 90%;  left: 85%; width: 1px; height: 1px; animation-duration: 5s; }
.star:nth-child(10) { top: 25%;  left: 50%; width: 2px; height: 2px; animation-duration: 2.8s; }
.star:nth-child(11) { top: 35%;  left: 70%; width: 1px; height: 1px; animation-duration: 4.2s; }
.star:nth-child(12) { top: 60%;  left: 20%; width: 2px; height: 2px; animation-duration: 3.7s; }
.star:nth-child(13) { top: 15%;  left: 80%; width: 1px; height: 1px; animation-duration: 4.5s; }
.star:nth-child(14) { top: 75%;  left: 40%; width: 2px; height: 2px; animation-duration: 3.3s; }
.star:nth-child(15) { top: 50%;  left: 10%; width: 3px; height: 3px; animation-duration: 5s; }
.star:nth-child(16) { top: 20%;  left: 90%; width: 1px; height: 1px; animation-duration: 2.2s; }
.star:nth-child(17) { top: 65%;  left: 60%; width: 2px; height: 2px; animation-duration: 3.8s; }
.star:nth-child(18) { top: 85%;  left: 30%; width: 1px; height: 1px; animation-duration: 4.8s; }
.star:nth-child(19) { top: 40%;  left: 80%; width: 2px; height: 2px; animation-duration: 3.1s; }
.star:nth-child(20) { top: 10%;  left: 60%; width: 1px; height: 1px; animation-duration: 2.5s; }