.bg-liquid-glass {
        /* Semi-transparent background fill */
        background-color: rgba(255, 255, 255, 0.25);

        /* The blur effect applied to elements behind the card */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px); /* Safari support */

        /* Simulates light reflecting off a glass edge */
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;

        /* Adds subtle depth and separation */
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}


html, body {
    width: 100%;
    height:100%;
}

body {
    background: linear-gradient(90deg,rgba(146, 154, 156, 1) 0%, rgba(82, 92, 85, 1) 50%, rgba(165, 175, 209, 1) 100%);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}


#home {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
}

#home.visible {
    transform: scale(1);
    opacity: 1;
}

#projects, #credits {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
}

#projects.visible, #credits.visible {
    transform: scale(1);
    opacity: 1;
}

#home, #projects, #credits {
    margin-top: 10px;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes zoom {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}