@font-face {
  font-family: stretch-pro;
  src: url("fonts/stretch-pro.regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: corepix;
  src: url("fonts/corepix.demo.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: saitamaar;
  src: url("fonts/saitamaar.woff2") format("woff2");
  font-display: swap;
}

.title,
.flag {
  font-family: saitamaar, sans-serif;
  filter: url(#wobble) drop-shadow(4px 6px 12px rgba(0, 0, 0, 0.5));
}

.maintitle {
  z-index: 5;
  font-size: 42px;
  cursor: pointer; 
  position: absolute; 
  top: -30px; 
  left: 10px; 
  display: inline-block; 
  mix-blend-mode: difference;
  opacity: 1; color: #2c1313;
}

body,
.intro,
p,
li {
  font-family: saitamaar, sans-serif;
}

.accent {
  font-family: saitamaar, sans-serif;
  filter: url(#wobble);
}

.stretched {
  display: inline-block;
  transform: scaleX(2.5);
  transform-origin: left;
}

.flicker-in-1{-webkit-animation:flicker-in-1 4s cubic-bezier(.47,0.000,.745,.715) both;animation:flicker-in-1 4s cubic-bezier(.47,0.000,.745,.715) both}

.swing-in-bottom-fwd{-webkit-animation:swing-in-bottom-fwd 3s cubic-bezier(.19,1.000,.22,1.000) both;animation:swing-in-bottom-fwd 3s cubic-bezier(.19,1.000,.22,1.000) both}

/* ----------------------------------------------
 * Generated by Animista on 2026-8-2 13:26:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes flicker-in-1{0%{opacity:0}10%{opacity:0}10.1%{opacity:1}10.2%{opacity:0}20%{opacity:0}20.1%{opacity:1}20.6%{opacity:0}30%{opacity:0}30.1%{opacity:1}30.5%{opacity:1}30.6%{opacity:0}45%{opacity:0}45.1%{opacity:1}50%{opacity:1}55%{opacity:1}55.1%{opacity:0}57%{opacity:0}57.1%{opacity:1}60%{opacity:1}60.1%{opacity:0}65%{opacity:0}65.1%{opacity:1}75%{opacity:1}75.1%{opacity:0}77%{opacity:0}77.1%{opacity:1}85%{opacity:1}85.1%{opacity:0}86%{opacity:0}86.1%{opacity:1}100%{opacity:1}}@keyframes flicker-in-1{0%{opacity:0}10%{opacity:0}10.1%{opacity:1}10.2%{opacity:0}20%{opacity:0}20.1%{opacity:1}20.6%{opacity:0}30%{opacity:0}30.1%{opacity:1}30.5%{opacity:1}30.6%{opacity:0}45%{opacity:0}45.1%{opacity:1}50%{opacity:1}55%{opacity:1}55.1%{opacity:0}57%{opacity:0}57.1%{opacity:1}60%{opacity:1}60.1%{opacity:0}65%{opacity:0}65.1%{opacity:1}75%{opacity:1}75.1%{opacity:0}77%{opacity:0}77.1%{opacity:1}85%{opacity:1}85.1%{opacity:0}86%{opacity:0}86.1%{opacity:1}100%{opacity:1}}

@-webkit-keyframes swing-in-bottom-fwd {
  0% {
    -webkit-transform: translate(-100%, -100%) rotateX(100deg);
    transform: translate(-100%, -100%) rotateX(100deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-100%, -100%) rotateX(0);
    transform: translate(-100%, -100%) rotateX(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 1;
  }
}
@keyframes swing-in-bottom-fwd {
  0% {
    -webkit-transform: translate(-100%, -100%) rotateX(100deg);
    transform: translate(-100%, -100%) rotateX(100deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-100%, -100%) rotateX(0);
    transform: translate(-100%, -100%) rotateX(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 1;
  }
}

.highlight {
  display: inline-block;
  background-color: #000000;
  color: #fff;
  transition: 0.1s linear(0, 0.45, 0.48, 0.52, 0.55, 1), background-color 0.1s linear(0, 0.45, 0.48, 0.52, 0.55, 1);
  
  &:hover {
    filter: invert(1);
  }
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@keyframes hover-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.floaty {
  .floaty { animation: hover-float 4s ease-in-out infinite; }
  .floaty:nth-of-type(2) { animation-delay: -1.3s; }
  .floaty:nth-of-type(3) { animation-delay: -2.6s; }
}



.hint-trigger {
  position: relative;
}

.hint-trigger .hint-content {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  transform-origin: var(--hint-origin, center);
  left: var(--hint-x, 0);
  top: var(--hint-y, 0);
  scale: var(--hint-scale, 1);
  z-index: 50;
}

.hint-trigger:hover .hint-content {
  opacity: 1;
  pointer-events: auto;
}