@import url('https://fonts.googleapis.com/css2?family=Klee+One&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* adapted from https://github.com/Tiarama/Twinkle-Twinkle */
#star-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
}

.star {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0);
  border-radius: 5px;
  
  .small-stars & {
    width: 5px;
    height: 5px;
  }
}

@keyframes twinkle {
  0% {
    transform: scale(1, 1);
    background: rgba(255,255,255,0);
    animation-timing-function: ease-in;
  }
  60% {
    transform: scale(0.8, 0.8);
    background: rgba(255,255,255,1);
    animation-timing-function: ease-out;
  }
  80% {
    background: rgba(255,255,255,0);
    transform: scale(1, 1);
  }
  100% {
    background: rgba(255,255,255,0);
    transform: scale(1, 1);
  }
}