#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; } .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; } .mrlogin-btn { background: #28a745; color: white; border:none; padding: 5px 12px; margin-top: 10px; cursor: pointer; border-radius: 5px; } .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.2rem; font-weight:bold; color:var(--light-text); margin:5px 0; } #mrlogin-divform img { max-width:250px; border-radius:5px; width:100%; max-height:250px; margin:10px 5px; } #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(--g-branding); color:var(--light-text); font-weight:bold; border:none; padding:10px; border-radius:9px; } .btn-form-login::hover { border:2px dashed var(--branding); background:var(--background); transform: translateY(20px); transition: all 0.3s ease; }