.animate__animated {
    animation-duration: 0.75s;
    animation-fill-mode: both;
}
.navbar-blur {
    background-color: rgba(
        0,
        0,
        0,
        0.5
    ) !important; /* semi-transparent black */
    backdrop-filter: blur(5px); /* blur effect */
    transition: all 0.3s ease-in-out;
}

body {
    min-height: 200vh; /* so you can scroll */
    position: relative;
    z-index: 0;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(
        circle at center bottom,
        #5e43f3 0%,
        #1d2125 50%,
        #1d2125 100%
    );
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    animation: fadeUp 1s ease-out both;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}