@font-face {
  font-family: Protomo;
  src: url('https://pollygon-worker.tokonatsuwave.workers.dev/font/Protomo-Outline.otf') format('OpenType');
}
#loader {
  position: fixed;
  font-family: Protomo;
  width: 100%;
  height: 100vh;
  z-index: 999;
  overflow: visible;
  background: #f1f1ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-gif {
  width: 250px;
  height: 250px;
  background: url('https://gallons-of-the-stuff.neocities.org/POLLYGON-VER-1.0-main/yaoi.png') no-repeat center center;
  background-size: contain;
}

#loader.hidden {
  opacity: 0;
  transition: opacity 0.5s;
}

.lebounce {
  margin-top: 20px;
}

.lebounce mark { 
  font-size: 1.5em; 
  z-index: 99; 
  animation: bounce 2s infinite; 
  animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1); 
  width: auto; 
  background: none;
  color: #6f5e5b;
}

.lebounce mark:nth-child(1) { animation-delay: 0s; display: inline-block; }
.lebounce mark:nth-child(2) { animation-delay: 0.2s; display: inline-block; }
.lebounce mark:nth-child(3) { animation-delay: 0.4s; display: inline-block; }
.lebounce mark:nth-child(4) { animation-delay: 0.6s; display: inline-block; }
.lebounce mark:nth-child(5) { animation-delay: 0.8s; display: inline-block; }
.lebounce mark:nth-child(6) { animation-delay: 1s; display: inline-block; }
.lebounce mark:nth-child(7) { animation-delay: 1.2s; display: inline-block; }

@keyframes bounce { 
  0% { transform: scale(1,1) translateY(0); } 
  10% { transform: scale(1.1,.9) translateY(0); } 
  30% { transform: scale(.9,1.1) translateY(-30px); } 
  50% { transform: scale(1.05,.95) translateY(0); } 
  60% { transform: scale(1,1) translateY(-4px); } 
  100% { transform: scale(1,1) translateY(0); } 
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  .loader-gif {
      width: 100px;
      height: 100px;
  }

  .lebounce mark {
      font-size: 1.2em;
  }
}