body {
    color: rgb(255, 255, 255);
    background: linear-gradient(to bottom, #0a0f4d, #001a66); /* deep cloudy night sky */
    text-align: center; 
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-items: center;
}

.maindiv {
    padding: 20px;
    margin:  auto;
    max-width: 450px;
    min-height: 450px;
    border-radius: 20px;
    
    /* Frosted glass effect */
    background: rgba(255, 255, 255, 0.1); /* translucent white */
    backdrop-filter: blur(10px) saturate(180%); /* blur + slightly boost color */
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    
    /* Shadow to lift it a bit */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Optional subtle border glow for cloudiness */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Optional rain streaks */
@keyframes rain {
    0% { background-position: 0 0; }
    100% { background-position: 100% 100%; }
}

.maindiv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.05) 1px,
        transparent 1px,
        transparent 5px
    );
    pointer-events: none;
    animation: rain 1s linear infinite;
}

/* Keep your button and input styles but slightly tweak for glassy feel */
button, select, input {
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(5px);
}