 /* This is the overlay that shows the quiz – hidden initially */
    #mrlogin-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; 
      height: 100vh;
      background: rgba(0, 0, 0, 0.9);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 12000;
    }

    /* Container box for the quiz/login form */
    .mrlogin-box {
      background: var(--background);
      color: var(--light-text);
      padding: 10px;
      border:2px solid var(--branding);
      border-radius: 10px;
      max-width: 300px;
      width:95%;
    }

    .mrlogin-hidden { display: none; }

    /* Button style  green, clickable */
    .mrlogin-btn {
      background: #28a745;
      color: white;
      border:none;
      padding: 5px 12px;
      margin-top: 10px;
      cursor: pointer;
      border-radius: 5px;
    }

    /* Style for each answer option (auto-clickable) */
    .mrlogin-option {
      background: var(--background);
      padding: 6px;
      font-size:18px;
      font-weight:bold;
      text-align:center;
      margin: 5px 0;
      border-radius: 5px;
      border:2px solid var(--light-text);
      cursor: pointer;
    }
 
    .mrlogin-option:hover {
      border:2px solid var(--branding);
      color:var(--branding);
    }
    
    #mrlogin-form {
        justify-content:center;
        align-items:center;
        flex-wrap:nowrap;
        padding:3px;
        flex-wrap:wrap;
        white-space:normal;
        overflow-x:hidden;
    }
    
    #mrlogin-divform h3 {
        font-size:1.1rem;
        font-weight:bold;
        color:var(--branding);
        margin:5px 0;
    }
    
    #mrlogin-form input {
        background:var(--background);
        color:var(--light-text);
        border:1px dashed var(--branding);
    }
    
    #mrlogin-divform a {
        color:var(--branding);
    }
    
    .btn-form-login {
        background:var(--branding);
        color:var(--background);
        font-weight:bold;
        border:none;
        padding:10px;
        border-radius:9px;
    }
    
   .btn-form-login::hover {
    border:2px solid var(--light-text);
     transform: translateY(20px);
    transition: all 0.3s ease;
        
    }