body { 
    font-family: Arial, sans-serif; 
    text-align: center; 
    background: linear-gradient(to right, #1E3C72, #2A5298); 
    color: white; 
    padding: 20px; 
    margin: 0;
}
.container { 
    max-width: 400px; 
    margin: auto; 
    padding: 20px; 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 15px; 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(10px);
    transition: all 0.3s ease-in-out;
}
input, button { 
    margin-top: 10px; 
    padding: 12px; 
    width: 85%; 
    border: none; 
    border-radius: 8px; 
    font-size: 16px;
}
input { 
    text-align: center; 
    font-size: 20px;
}
button { 
    cursor: pointer; 
    background: #ffffff; 
    color: #1E3C72; 
    font-weight: bold;
    transition: background 0.3s;
}
button:hover { 
    background: #a0c4ff; 
    transform: scale(1.05);
}
.fade { 
    animation: fadeIn 0.5s ease-in-out; 
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
    .container {
        width: 90%;
        padding: 15px;
    }
    input, button {
        width: 100%;
        font-size: 18px;
    }
}
@media (max-width: 480px) {
    .container {
        width: 95%;
        padding: 15px;
    }
    h2 {
        font-size: 22px;
    }
    input, button {
        font-size: 16px;
        padding: 10px;
    }
}