:root {
    --bg-color: white;
    --primary-font: 'Poppins', sans-serif;
    --heading-font: 'Inter', sans-serif;
    --gradient: linear-gradient(90deg, #ee00ff, #3333ff);
}

[data-theme="dark"] {
    --bg-color: #0b1120;
    --nav-bg: rgba(18, 18, 18, 0.7);
    --nav-border: rgba(255, 255, 255, 0.1);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    font-family: 'Inter', sans-serif;
}

.main {
    padding-top: 50px;
    animation: fadeIn .8s ease;
}

body,
.nav-bar,
.intro,
.get-in-toch-section,
.contact-form,
.work-section-box,
button,
a,
div {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}