/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 30 2023 | 13:28:43 */
.my-div {
  position: relative;
   width: 340px;
   height: 340px;
   background-color: #f2f2f2;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   border-radius: 10px;
   overflow: hidden;
 }
 
 #text {
   font-size: 24px;
   z-index: 1;
 }
 
 .my-button {
   background-color: #f4f8ff;
   color: #160985;
   border: none;
   border-radius: 10px;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
   margin-top: 10px;
   transition: background-color 0.3s;
   z-index: 1;
 }
 
 .my-button:hover{
  background-color: #e6e8eb;
  color: #dd9933;
 }

 .play-again-button:hover {
  background-color: #001f52;
  color: #dd9933;
}
 
 #image {
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
   max-width: 100%;
   max-height: 50%;
 }
 
 @keyframes fadeOutAnimation {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
 }
 
 @keyframes fadeInAnimation {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 
 #text,
 #new-text {
   margin-top: 12;
   font-family: "Arial", "Helvetica", sans-serif;
   font-weight: bold;
   align-content: center;
 }
 #cor {
  background-color: #002766;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 40px;
}
 
 #content-wrapper {
   display: none;
   position: relative;
   top: 8%;
   transform: translateY(-50%);
   height: 200px; /* Adicione uma altura fixa aqui */
 }
 
 #new-text {
   font-size: 16px;
   color: #dd9933;
 }
 
 #image-carousel {
   max-width: 100%;
   max-height: 100%;
   margin: auto;
   width: 280px;
 }
 
 .carousel-image {
   object-fit: contain;
 }
 
.slick-prev:before {
  color: black !important;
}
.slick-next:before {
  color: black !important;
}

 .slick-next, .slick-arrow{
  { color: black !important; }
 }

 .slick-prev:hover,
 .slick-next:hover {
   color: #1b1b1b;
 }
 
 .carousel-buttons {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 8px;
   z-index: 1; /* Adicione um índice z para que os botões fiquem acima das imagens */
 }
 
 .carousel-buttons button {
   flex-basis: calc(50% - 5px);
   max-width: 150px;
   background-color: #002766;
   color: #5eb7e0;
   border: none;
   border-radius: 5px;
   padding: 5px 10px;
   font-family: "Arial", "Helvetica", sans-serif;
   font-size: 9.4px;
   cursor: pointer;
   margin: 5px;
 }
 
 .carousel-buttons button:hover {
   background-color: #001f52;
   color: #dd9933;
 }
 
 .correct-answer {
   color: green;
   font-family: "Arial", "Helvetica", sans-serif;
   font-weight: bold;
 }

 .wrong-answer {
  color: red;
  font-family: "Arial", "Helvetica", sans-serif;
   font-weight: bold;
}
 
 /* Ajustes para o carrossel */
 .slick-slider {
   width: 100%;
 }
 
 .slick-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 #carousel-container {
   overflow: hidden;
   height: 100%;
 }
 
 .quiz-result {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  text-align: center;
}

.result-wrapper {
  display: none;
  position: relative;
  top: 20%;
  transform: translateY(-50%);
  height: 200px;
  width: 100%;
}
.play-again-button {
  position: relative;
  background-color: #002766;
  color: #5eb7e0;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s;
  top: 75%;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://acienciaquefazemos.org/wp-content/uploads/2023/06/fundo.png');
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  z-index: 0;
}
.background-image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../2023/06/fundoingame.png');
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
}

.quiz-image {
  position: fixed;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
}