body {
    font-family: 'Poppins', sans-serif;
}

@keyframes rotateLogo {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rotate-on-load {
    animation: rotateLogo 1.2s ease-in-out;
}

/* Header Slide-in Animation */
@keyframes slideDown {
    from {
        transform: translateY(-100px);
        opacity: 0;
        scale: 0.5;
        background-color: rgb(138, 121, 121);
    }

    to {
        transform: translateY(2);
        opacity: 1;
    }
}

/* Sticky Glassmorphism Header */
.sticky-header {
    width: 90%;
    backdrop-filter: blur(12px);
    transition: all 0.5s ease-in-out;
    border-radius: 16px;
    animation: slideDown 1s ease-in-out;
}

@keyframes spin-border {
    0% {
        clip-path: inset(0 99% 99% 0);
    }

    25% {
        clip-path: inset(0 0 99% 0);
    }

    50% {
        clip-path: inset(0 0 0 99%);
    }

    75% {
        clip-path: inset(99% 0 0 0);
    }

    100% {
        clip-path: inset(0 99% 99% 0);
    }
}

/* List Items */
.nav-item {
    position: relative;
    padding: 10px 20px;
    border-radius: 8px;
    overflow: hidden;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

/* Border Animation */
.nav-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid yellow;
    border-radius: 8px;
    animation: spin-border 3s linear infinite;
}