/* Glassmorphism requires a visually interesting background to show off the blur effect. */

body {
    /* Use a gradient for a modern, vibrant background */
    background: linear-gradient(135deg, #ffc738, #f538ff, #385aff);
    /* Make sure the gradient covers the entire viewport */
    min-height: 100vh;
    /* Keeps the background fixed so the glass effect is clear */
    background-attachment: fixed; 

    /* Keep the font, but consider a slightly lighter color for better contrast 
       against a potentially dark/vibrant background. */
    color: white; 
    font-family: Verdana, sans-serif;
    /* Center content in the body for presentation */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* --- Example of a 'glass' element (you would need an HTML element with class="glass-card") ---

.glass-card {
    background: rgba(255, 255, 255, 0.15); /* Semi-transparent white background */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Subtle shadow for depth */
    backdrop-filter: blur(10px); /* THE KEY: Frosted glass effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    border-radius: 10px; /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Light border for definition */
    padding: 20px;
    color: white; /* Text color inside the glass element */
}

*/