:root {
  --primary-background: #e5e5e5;
  --primary-foreground: #F8EEB9;
  --error-background: #e11d48;
  --correct-background: #4ade80;
}

body {
  font: 300 100% / 1.5 'Amatic SC', cursive;
  background-color: #F8EEB9;
}
.bg-image {
  background-size: cover; /* Adjusts image to cover entire background */
  background-repeat: no-repeat; /* Prevents tiling */
  background-position: center; /* Centers the image */    
}
.home {
  background-image: url('../assets/images/book.webp');
}
.game-0 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_0.webp');
}
.game-1 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_1.webp');
}
.game-2 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_2.webp');
}
.game-3 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_3.webp');
}
.game-4 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_4.webp');
}
.game-5 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_5.webp');
}
.game-6 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_6.webp');
}
.game-7 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_7.webp');
}
.game-8 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_8.webp');
}
.game-9 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_9.webp');
}
.game-10 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_10.webp');
}
.game-11 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_11.webp');
}
.game-12 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_12.webp');
}
.game-13 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_13.webp');
}
.game-14 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_14.webp');
}
.game-15 {
  background-image: url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_15.webp');
}
/* .preload-images {
  background-image: url('../assets/images/book.png'),
    url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_0.png'),
    url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_1.png'),
    url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_2.png'),
    url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_3.png'),
    url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_4.png'),
    url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_5.png'),
    url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_6.png'),
    url('../assets/images/1x1_A_painting_of_the_sky_after_a_st_7.png');
  display: none;
} */
input[type="color"] {
  width: 25px;
}
input[type="color"]:hover {
  cursor: pointer;
}

.text-shadow {
  text-shadow: 1px 2px rgba(0, 0, 0, 0.5);
}
.text-shadow-light {
  text-shadow: 1px 2px rgba(255, 255, 255, 0.5);
}
.character {
  opacity: 1;
}
.character-falling {
  opacity: 0;
  transform: translateY(-100%);
  will-change: transform, opacity; /* Optimize performance */
  animation: fallIntoPlace 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; /* Adjust timing and ease */
}
.character-name-scaled {
  transform: scale(0.8);
}

@keyframes blink {
  0%, 10%, 90%, 100% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.1);
  }
}

@keyframes fallIntoPlace {
  0% {
    transform: translateY(-100vh); /* Start above the viewport */
    opacity: 0;
  }
  50% {
    transform: translateY(10px); /* Slightly below the final position */
    opacity: 1;
  }
  70% {
    transform: translateY(-5px); /* Bounce up slightly */
    opacity: 1;
  }
  90% {
    transform: translateY(2px); /* Bounce down slightly */
    opacity: 1;
  }
  100% {
    transform: translateY(0); /* Settle at the final position */
    opacity: 1;
  }
}

.correct {
  background-color: var(--correct-background);
}
.correct-response {
  animation-name: correct;
  animation-delay: 0s;
  animation-duration: .5s;
  animation-iteration-count: 4;
}

@keyframes correct {
  0%, 100%   { background-color: var(--correct-background); opacity: 1; }
  50%  { background-color: var(--primary-background); opacity: 1; }
}

.incorrect {
  background-color: var(--error-background);
}
.incorrect-response {
  animation-name: incorrect;
  animation-delay: 0s;
  animation-duration: .5s;
  animation-iteration-count: 4;
}

@keyframes incorrect {
  0%, 100%   { background-color: var(--error-background); opacity: 1; }
  50%  { background-color: var(--primary-background); opacity: 1; }
}

.answer-container {
  opacity: 0;
}
.answer-response {
  animation: fade-in 1.5s cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url('https://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  src: local('Amatic SC Bold'), local('AmaticSC-Bold'), url('https://themes.googleusercontent.com/static/fonts/amaticsc/v3/IDnkRTPGcrSVo50UyYNK73hCUOGz7vYGh680lGh-uXM.woff') format('woff');
}


/*
@media only screen and (max-width: 932px) {
  .main-header {
    transition: transform 1.5s ease;
    transform-origin: top;
    transform: scale(0.75);
  }
  .question {
    transition: transform 1.5s ease;
    transform-origin: top;
    transform: scale(0.75);
  }
  .character {
    transition: transform 1.5s ease;
    transform-origin: top;
    transform: scale(0.75);
  }
}
*/