@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');
 
*{
    /* margin: 0; */
    padding: 0;
    /* font-family: 'Poppins', sans-serif; */
    font-family: 'Rubik', sans-serif;
    box-sizing: border-box;
}
body{
  
      background-image: url(BGB.jpg);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover; 
      /* background-color:#464646; */
} 
/* General modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal content optimized for phones */
.modal-content {
  background-color: #fefefe;
  margin: 20% auto; /* Centers the modal vertically */
  padding: 15px;
  border: none;
  width: 90%; /* Adjust width for smaller screens */
  max-width: 600px; /* Maintain maximum width for larger screens */
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/* Media query for phones (max-width: 768px) */
@media only screen and (max-width: 768px) {
  .modal-content {
      width: 95%; /* Make modal take more width on small screens */
      padding: 10px;
  }

  .modal-content p {
      font-size: 18px; /* Reduce font size for better readability */
  }

  .modal-content img {
      max-width: 70%; /* Adjust image size on small screens */
      height: auto;
  }

  .modal-content .popButton {
      padding: 8px 15px;
      font-size: 18px; /* Reduce button font size */
  }

  .modal-content iframe {
      width: 100%; /* Ensure embedded iframes are responsive */
      height: auto;
  }
}




.howToPlayBtn {
  position: absolute;
  top: 25px;
  left: 10px;
  z-index: 1;
}

/* Style the button to match the game theme */
.howToPlayBtn {
  font-family: "Poppins", sans-serif; /* Use the same font as the game */
  font-size: 16px; /* Adjust the font size as needed */
  background-color: transparent;  
  /* color: #8460de;  */
  border: none;
  font-weight: bolder;
  background-color: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  /* box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.2);  */
  /* transition: background-color 0.3s ease; */
}

/* Modal close button */
.close {
  float: right;
  font-size: 24px;
  font-weight: bold;
}

/* Hover effect for the close button */
.close:hover,
.close:focus {
  color: black;
  cursor: pointer;
}

/* Modal header styles */
.modal-header {
  text-align: center;
  margin-bottom: 10px;
}

.modal-header img {
  max-width: 50%; /* Set the maximum width of the image */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Center the image */
  margin: 0 auto;
}

  .modal-content iframe {
    margin-top: 20px; /* Added margin-top for the iframe */
  }
  
  .homeBtn {
    position: absolute;
    top: 145px; /* Adjust the top position as needed */
    left: 10px;
    z-index: 1;
  
  }
  
  /* Style the home button */
  .homeBtn button {
    font-family: "Poppins", sans-serif;
    background-color: transparent;  
    font-size: 16px; 
    border: none;
    font-weight: bolder;
    border-radius: 5px;
    padding: 15px 20px;
    cursor: pointer;
    /* box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.2); */
    transition: background-color 0.3s ease;
  }

  .rules{
    text-align: left;
    font-weight: bold;
  }
  
  /* Add a hover effect */
  /* .homeBtn button:hover {
    background-color: #c2b7b7;
  } */

.app{
    /* background-color: #BFE6ED; */
    /* background-color: rgb(#ffdc14, 0, 0); */
background-color:  #FFF1E1;
opacity: 90%;

color: rgb(255, 255, 255);

padding: 100px;

    width: 90%;
    max-width: 600px;
    margin: 100px auto 0; 
    border-radius: 10px;
    padding: 30px;
   margin-top: 50px;
   box-shadow: 0 0 10px 5px  #2d4900;;
  
 

}

.app h1{
    font-size: 25px;
    color: #00670e;
    font-weight: 600;
    /* border-bottom: 1px solid #333; */
    padding-bottom: 15px
}

.app p{
    font-size: 15px;
    color: #000000;
    /* font-weight: 600; */
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
   
}
.quiz{
  padding: 20px 0;  
}
.quiz h2{
    font-size: 18px;
    color: #000000;
    font-weight:600;
}

.btn{
    background: #fff;
    color: #222;
    font-weight:500;
    width : 100%;
    border: 0px solid #222;
    padding: 10px;
    /* margin: 10px 0; */
    margin-top: 15px;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 15px;
   
}

.btn:hover:not([disabled]){
    background: #99a300;
    color: #fff;
}   
 .btn:disabled{
    cursor: no-drop;
}

#next-btn{
    /* background:#f8f284;  */
    /* background: rgb(#BAC631, #C2D82E,0);  */
    background-color: rgb(253, 194, 0);
    color: rgb(0, 0, 0);  
    font-weight: 500;
    width: 150px;
    border: 0;
    padding: 10px;
    margin: 20px auto 0;
    border-radius: 5px;
    cursor: pointer;
    display: none; 
    /* box-shadow: 0 0 20px #eee; */

      
      
}

/* 
#next-btn:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none;
      } */

    
/* .correct{
    background:#fb3737;
}
.incorrect{
    background:#68ef99  ;
} */

/* Your existing CSS code */
.correct {
    background-color: green;
    color: white;
    font-weight: bold;
}

.incorrect {
    background-color: red;
    color: white;
    font-weight: bold;
}



/* Rest of your CSS code remains the same */

@media only screen and (max-width: 767px) {
    body {
      /* The file size of this background image is 93% smaller
       * to improve page load speed on mobile internet connections */
      background-image: url(BGB.jpg);
    }
      }

      @media (max-width: 768px) {
        .app {
            margin: 30% auto 0; /* Center the element vertically with a top margin of 15% */
        }
    }