:root {
    --accent-color: #1d4ed8;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "IBM Plex Mono", monospace;
    scroll-behavior: smooth;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

.nav-link-active {
    color: var(--accent-color) !important;
}

@media (max-width: 640px) {
    .mobile-nav-link.nav-link-active {
        background-color: var(--accent-color);
        color: white !important;
        border-radius: 9999px;
        padding: 4px 12px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.section-hidden {
    display: none !important;
}

.project-card:hover .project-arrow-icon {
    transform: translate(2px, -2px);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-button-pop {
    animation: slideInRight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1s;
    opacity: 0;
}

/* Prevent image dragging and saving shortcuts */
.no-drag {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
}