body {
  font-size: 20px;
  font-family: sans-serif;
  background: #f8f0f0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.sprites {
  position: absolute;
  height: 10vw; /* Use viewport width for responsive height */
  width: 10vw;  /* Use viewport width for responsive width */
  
  top: calc(50% - 400px); /* Position above the container */

  animation-name: float-fade;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  overflow: hidden;
  opacity: 0.8;
  z-index: 1; /* Set z-index for sprites */
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  
  padding: 30px;
  width: 60%;
  
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  z-index: 2; /* Set a higher z-index for the container */
}

@keyframes float-fade {
  0% {
      transform: translateY(0);
      opacity: 0;
  }

  50% {
      transform: translateY(-8%);
      opacity: 0.8;
  }

  100% {
      transform: translateY(0);
      opacity: 0;
  }
}

@media (max-width: 600px) {
  .sprites {
    height: 20vw; /* Adjust height for smaller screens */
    width: 20vw;  /* Adjust width for smaller screens */
    top: calc(50% - 80vw); /* Adjust position for smaller screens */
  }
}

.artwork {
  position: relative;

  height: 200px;
  width: 200px;
  padding: 10px;
}

/* .sprites:hover {
  opacity: 1.5;
} */

@keyframes fade-left-to-right {
  0% {left: 0%; opacity: 0;}
  10% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {left: 100%; opacity: 0;}
}

@keyframes fade-right-to-left {
  0% {right: 0%; opacity: 0;}
  10% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {right: 100%; opacity: 0;}
}

@keyframes float {
  0% {
      transform: translateY(0);
  }

  50% {
      transform: translateY(-8%);
  }

  100% {
      transform: translateY(0);
  }
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);

  padding: 30px;
  width: 60%;

  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

h1, h2 {
  text-align: center;
}

.question {
  margin-top: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

.options {
  margin-bottom: 20px;
}

.option {
  display: block;
  margin-bottom: 10px;
}

.button {
  display: block;
  text-align: center;
  padding: 5px 8px;
  background-color: none;
  color: #000000;
  border: outset;
  cursor: url(assets/sprites/Poké_Ball_summary_IV.png), auto;
  font-size: 20px;
  border-radius: px;
  transition: background-color 0.3s;
  justify-content: center;
  margin: 0 auto;
}

.question {
  display: block;
  text-align: center;
  padding: 5px 8px;
  background-color: none;
  color: #000000;
  border: outset;
  font-size: 20px;
  border-radius: px;
  transition: background-color 0.3s;
  justify-content: center;
  margin: 0 auto;
}

.button:hover {
  background-color: #cce3f7;
}

.result {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

.options {
  margin-bottom: 20px;
}

.option {
  font-size: 20px;
  display: block;
  margin-bottom: 10px;
}

.hide{
  display: none;
}

@media (prefers-reduced-motion) {
    body {
      animation: none;
    }
  }