/* Define Inter font family for modern look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    --primary-color: 167 139 250; /* Purple-400 */
}

img.logo {
    width: 100%; 
    max-width: 100px;
    display: inline-block;
}

footer img.logo {
    max-width: 60px;
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.5s, color 0.5s;
}

.spatial-bg {
     /* Background for non-canvas elements to keep the theme */
    background-color: #020617; /* Slate-950 */
}

/* Generic particle style */
.particle {
    position: absolute;
    background-color: rgba(var(--primary-color), 0.8);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    z-index: -20;
}

/* Nav link hover effect for spatial theme */
.nav-link-spatial {
    position: relative;
}
.nav-link-spatial::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #a78bfa; /* purple-400 */
    transition: width 0.3s ease-in-out;
}
.nav-link-spatial:hover::after {
    width: 100%;
}

/* Customize scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a; /* slate-900 */
}
::-webkit-scrollbar-thumb {
    background: #475569; /* slate-600 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}


@media(max-width: 767px) {
   .text-5xl {
        font-size: 42px!important;
        line-height: normal;
    }
    .gap-8 {
        gap: 1rem!important;
    }
}

@media(max-width: 425px) {
   .text-5xl {
        font-size: 32px!important;
        line-height: normal;
    }
}