html, body { margin:0; padding:0; height:100%; overflow:hidden; }
body {
    background: linear-gradient(45deg,#1e3791,#9b59b6);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-family:Arial, sans-serif;
    color:#fff;
}
img { max-width:100%; height:auto; }

.text {
    font-size:24px;
    margin-top:20px;
    text-align:center;
}
.text::before,.text::after {
    content:"";
    display:inline-block;
    width:20px;
    height:2px;
    background:#fff;
    margin:0 10px;
    vertical-align:middle;
}

.open-modal-btn {
    margin-top:30px;
    padding:12px 26px;
    background:#fff;
    color:#1e3791;
    font-size:18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:bold;
}
.open-modal-btn:hover { background:#e2e2e2; }

.modal {
    display:none;
    position:fixed;
    z-index:9999;
    left:0; top:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.6);
    justify-content:center;
    align-items:center;
}

.modal-content {
    background:#fff;
    color:#333;
    padding:25px;
    width:90%;
    max-width:450px;
    border-radius:10px;
    box-shadow:0 0 15px rgba(0,0,0,0.3);
}

.close-btn {
    float:right;
    font-size:22px;
    cursor:pointer;
}

.modal-content h2 { margin-top:0; }

.modal-content input {
    width:100%;
    padding:10px;
    margin:6px 0;
    border-radius:5px;
    border:1px solid #ccc;
}

.modal-content button {
    margin-top:10px;
    width:100%;
    padding:12px;
    background:#1e3791;
    color:#fff;
    font-size:16px;
    border:none;
    border-radius:6px;
    cursor:pointer;
}
.modal-content button:hover { background:#16306d; }

.msg {
    margin-top:20px;
    color:#000;
    font-size:18px;
}