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

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.glass-effect {
    background: rgba(var(--bs-tertiary-bg-rgb), 0.55);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.main-header {
    transition: background-color 0.3s ease;
}

.offcanvas {
    --bs-offcanvas-bg: rgba(var(--bs-tertiary-bg-rgb), 0.7);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-wrapper {
    animation: fade-in-up 0.6s ease-out forwards;
}

#landing-page .btn {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

#landing-page .btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}