*{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html, body {
    font-family: Arial, sans-serif;
    background-color: #040f0f !important;
    margin: 0;
    padding: 0;
    color: white;
  }
  
  .container {
  width: 50%;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  background-color: #051313;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Slight shadow for depth */
  filter: blur(0px);
  transition: filter 0.5s ease; /* Smooth transition for removing blur */
}

/* Blur class to apply background blur effect */
.blur {
  filter: blur(8px);  /* Blur effect for the background */
  pointer-events: none;
  transition: filter 0.5s ease; /* Smooth transition for the blur */
}
  
  .container.clear {
    filter: none;
  }
  
  .question {
    margin-bottom: 70px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color:#071B1BC2;
    
  }
  .question label{
    font-size: 17px;
  }

    /* Increase the size of radio buttons */
    input[type="radio"] {
      appearance: none; 
      -webkit-appearance: none;
      width: 14px; 
      height: 14px; 
      cursor: pointer; 
      border: 2px solid #333;
      border-radius: 50%; 
      background-color: white;
      position: relative;
      margin-right: 10px;
      transition: all 0.3s ease;
    }

    /* Optional: Style for radio button when focused */
    input[type="radio"]:focus {
      outline: none;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a subtle glow */
    }

    /* Style for selected radio button */
    input[type="radio"]:checked {
      background-color: #61ff84;
      border-color: #61ff84; 
    }

    /* Add an inner dot for the checked state */
    input[type="radio"]:checked::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px; /* Size of inner dot */
      height: 10px;
      border-radius: 50%;
    }

    /* Label styling */
    label {
      font-size: 18px;
      cursor: pointer;
      user-select: none; /* Prevent text selection */
    }

  
  button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  /* Popup styles */
  #user-info {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    z-index: 1000;
    text-align: center;
    display: none; /* Initially hidden */
    background-color: #051313;
    color: white;
  }
  
  #user-info input {
    width: 80%;
    margin: 10px 0;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #071B1BC2;
    color: white;
  }
  
  #user-info button {
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #61ff84;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: 500ms ease;
    font-weight: 600;
    font-size: 15px;
  }
  
  #user-info button:hover {
    background-color: #61ff84;
    border: 2px solid transparent;
    color: black;
    font-size: 17px;

  }

  /* Timer styles */
  #timer {
    position: fixed; /* Keeps it fixed on the screen */
    top: 8px;       /* Pushes it slightly below the top */
    right: 15px;     /* Aligns it to the right of the screen */
    background-color: transparent; /* Blue background */
    border: 2px solid #61ff84;
    color: white;
    padding: 6px 20px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;  /* Ensures it appears above other elements */
  }
  
  .hidden {
    display: none;
  }
  .blur-bg{
    backdrop-filter: blur(10px);
  }

#iq-test-form button{
      background-color: #61ff84;
      font-size: 17px;
      transition: 500ms ease;
      border-radius: 10px;
}
#iq-test-form button:hover{
  background-color: #4ef472;
  box-shadow: 0 0 8px #4ef472, 0 0 16px #4ef472;
  color: black;
  font-size: 19px;
}


#rights {
 background-color: #040f0f !important;
 display: flex;
 align-items: center;
 border-top: 1px solid white;
 height: 7vh;
}
#rights p{
 margin: 0 auto;
 top: 10px;
 color: white;
 font-size: 14px;
}