Untitled

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    background: linear-gradient(90deg, #f0f4f7, #ffffff, #f0f4f7);
}

.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ccc;
}

.column:last-child {
    border-right: none;
}

h2 {
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    background-color: #0078D7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

button:hover {
    background-color: #005ea0;
}

.username-box {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    background: #eef3f7;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#modalOverlay {
    display:none; 
    position:fixed; 
    top:0; left:0; 
    width:100%; height:100%;
    background:rgba(0,0,0,0.5); 
    justify-content:center; 
    align-items:center;
}

#modalBox {
    background:white; 
    padding:20px; 
    border-radius:10px; 
    width:400px; 
    max-height:90vh; 
    overflow-y:auto;
}

#modalBox h3 {margin-top:0;}
#modalBox form label {display:block; margin-top:8px;}