.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 90%; 
    max-width: 500px; 
    margin: 80px auto 0;
  }
  
  .floating-gif {
    position: absolute;
    bottom: -28%;
    left: 50%; /* Adjust this as needed */
    transform: translateX(-50%);
    width: 18%; /* Adjust size as needed */
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite alternate;
  }
  
  @media (min-width: 768px) {
    #result {
      padding: 30px;
    }
  }
  
  h1, p {
    text-align: center;
    color: #6e4942;
  }
  
  h2 {
    text-align: center;
    color: #993f2d;
    font-size: 20px;
  }
  
  .btn-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 100%; /* Ensure the container takes up the full height */
  }
  
  .btn {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #8d633e;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Pangolin", cursive;
  }
  
  .intro-message {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 90%; 
    text-align: center;
    max-width: 500px; 
    margin: 80px auto 0;
  }
  
  #result {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    text-align: center;
    margin: 0px auto 0; 
  }
  
  #assessmentContainer {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 90%; 
    max-width: 500px; 
    margin: 80px auto 0; 
  }
  
  #result {
    display: none;
    margin-top: 20px;
    margin: 80px auto 0;
    position: relative;
  }
  
  #ObrL {
    position: fixed;
    bottom: 5%; /* Adjust as needed */
    left: -30%; /* Adjust as needed */
    width: 20%; /* Adjust size as needed */
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite alternate;
  }
  
  #ObrP {
    position: fixed;
    bottom: 5%; /* Adjust as needed */
    right: 70%; /* Adjust as needed */
    width: 10%; /* Adjust size as needed */
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite alternate;
  }
  
  @keyframes floatAnimation {
    0% {
      transform: translate(-30%, 0);
    }
    100% {
      transform: translate(-30%, 20px);
    }
  }
  
  .question {
    display: none;
  }
  
  .question.active {
    display: block;
  }
  
  .choices {
    display: flex;
    justify-content: center;
    margin-top: 20px; 
  }
  
  .choices label {
    margin: 0 10px;
  }
  
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* Center buttons */
  .btn-container {
    text-align: center;
  }
  
  /* Result box styles */
  #result {
    display: none;
    margin-top: 20px;
    margin: 0px auto 0;
  }
  
  @media (min-width: 768px) {
    .container,
    .intro-message {
      width: 60%; 
      max-width: 600px; 
    }
    
    #assessmentContainer {
      position: relative;
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 60%; 
      max-width: 600px; 
      margin: 80px auto 0;
    }
  
    #floatingGifLeft, #floatingGifRight {
      position: absolute;
      width: 100px;
      height: auto;
      display: block;
      bottom: 20px;
    }
  }