@import url("base.css");
@import url("button.css");
@import url("inventory.css");
@import url("loading.css");
@import url("silabas.css");
@import url("tab.css");
@import url("responsive.css");

@font-face {
  font-family: "pixel";
  src: url(../assets/pixel-font.ttf);
  font-weight: bold;
}

@font-face {
  font-family: "pixel-regular";
  src: url(../assets/regular.otf);
  font-weight: bold;
  font-style: normal;
}

:root {
  --slot-size: 72px;
  --slot-gap: 0.25rem;
  --inventory-bg: #c6c6c6;
  --slot-bg: #8b8b8b;
  --slot-hover-bg: #9d9d9d;
  --inner-shadow-dark: #555555;
  --inner-shadow-light: #ffffff;
  --outer-border-colors: #ffffff #555555 #555555 #ffffff;
  --outline-color: #131313;
  --border-size2: 8px;
  --border-size: 4px;
  --inner-border-size: 4px;

  --transition-short: 0.3s;
  --transition-medium: 0.5s;
  --hover-scale-factor: 1.05;
  --active-scale-factor: 0.98;
  --focus-outline-color: #007bff;

  --text-color-primary: #3f3f3f;
  --text-large: 32px;
  --text-medium: 22px;
  --text-small: 18px;
}


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100vh;
  width: 100vw;
  font-family: "pixel-regular";
  user-select: none;
  color: #ffffff;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* ===========================================
   Keyframe Animations
   =========================================== */

.fade-in {
  animation: fadeIn var(--transition-short) ease-in-out forwards;
}

.fade-out {
  animation: fadeOut var(--transition-short) ease-in-out forwards;
}

.jelly {
  animation: jelly 960ms linear both;
}

.jelly-reverse {
  animation: jelly-reverse 480ms linear both;
}

@keyframes jelly {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  4% {
    -webkit-transform: scale(0.947, 0.961);
    transform: scale(0.947, 0.961);
  }

  6% {
    -webkit-transform: scale(0.967, 0.99);
    transform: scale(0.967, 0.99);
  }

  8% {
    -webkit-transform: scale(0.999, 1.034);
    transform: scale(0.999, 1.034);
  }

  10% {
    -webkit-transform: scale(1.033, 1.075);
    transform: scale(1.033, 1.075);
  }

  12% {
    -webkit-transform: scale(1.041, 1.084);
    transform: scale(1.041, 1.084);
  }

  14% {
    -webkit-transform: scale(1.068, 1.1);
    transform: scale(1.068, 1.1);
  }

  16% {
    -webkit-transform: scale(1.071, 1.1);
    transform: scale(1.071, 1.1);
  }

  18% {
    -webkit-transform: scale(1.081, 1.086);
    transform: scale(1.081, 1.086);
  }

  20% {
    -webkit-transform: scale(1.082, 1.078);
    transform: scale(1.082, 1.078);
  }

  22% {
    -webkit-transform: scale(1.079, 1.06);
    transform: scale(1.079, 1.06);
  }

  25% {
    -webkit-transform: scale(1.073, 1.044);
    transform: scale(1.073, 1.044);
  }

  27% {
    -webkit-transform: scale(1.07, 1.041);
    transform: scale(1.07, 1.041);
  }

  30% {
    -webkit-transform: scale(1.059, 1.035);
    transform: scale(1.059, 1.035);
  }

  31% {
    -webkit-transform: scale(1.057, 1.035);
    transform: scale(1.057, 1.035);
  }

  36% {
    -webkit-transform: scale(1.047, 1.044);
    transform: scale(1.047, 1.044);
  }

  38% {
    -webkit-transform: scale(1.046, 1.047);
    transform: scale(1.046, 1.047);
  }

  42% {
    -webkit-transform: scale(1.044, 1.053);
    transform: scale(1.044, 1.053);
  }

  45% {
    -webkit-transform: scale(1.045, 1.055);
    transform: scale(1.045, 1.055);
  }

  53% {
    -webkit-transform: scale(1.049, 1.051);
    transform: scale(1.049, 1.051);
  }

  60% {
    -webkit-transform: scale(1.051, 1.049);
    transform: scale(1.051, 1.049);
  }

  75% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  to {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}

@keyframes jelly-reverse {
  0% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  4% {
    -webkit-transform: scale(1.051, 1.049);
    transform: scale(1.051, 1.049);
  }

  6% {
    -webkit-transform: scale(1.049, 1.051);
    transform: scale(1.049, 1.051);
  }

  8% {
    -webkit-transform: scale(1.045, 1.055);
    transform: scale(1.045, 1.055);
  }

  10% {
    -webkit-transform: scale(1.044, 1.053);
    transform: scale(1.044, 1.053);
  }

  12% {
    -webkit-transform: scale(1.046, 1.047);
    transform: scale(1.046, 1.047);
  }

  14% {
    -webkit-transform: scale(1.047, 1.044);
    transform: scale(1.047, 1.044);
  }

  16% {
    -webkit-transform: scale(1.057, 1.035);
    transform: scale(1.057, 1.035);
  }

  18% {
    -webkit-transform: scale(1.059, 1.035);
    transform: scale(1.059, 1.035);
  }

  20% {
    -webkit-transform: scale(1.07, 1.041);
    transform: scale(1.07, 1.041);
  }

  22% {
    -webkit-transform: scale(1.073, 1.044);
    transform: scale(1.073, 1.044);
  }

  25% {
    -webkit-transform: scale(1.079, 1.06);
    transform: scale(1.079, 1.06);
  }

  27% {
    -webkit-transform: scale(1.082, 1.078);
    transform: scale(1.082, 1.078);
  }

  30% {
    -webkit-transform: scale(1.081, 1.086);
    transform: scale(1.081, 1.086);
  }

  31% {
    -webkit-transform: scale(1.071, 1.1);
    transform: scale(1.071, 1.1);
  }

  36% {
    -webkit-transform: scale(1.068, 1.1);
    transform: scale(1.068, 1.1);
  }

  38% {
    -webkit-transform: scale(1.041, 1.084);
    transform: scale(1.041, 1.084);
  }

  42% {
    -webkit-transform: scale(1.033, 1.075);
    transform: scale(1.033, 1.075);
  }

  45% {
    -webkit-transform: scale(0.999, 1.034);
    transform: scale(0.999, 1.034);
  }

  53% {
    -webkit-transform: scale(0.967, 0.99);
    transform: scale(0.967, 0.99);
  }

  60% {
    -webkit-transform: scale(0.947, 0.961);
    transform: scale(0.947, 0.961);
  }

  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}