@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

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

.code-font {
    font-family: 'JetBrains Mono', monospace;
}

.gradient-bg {
    background: radial-gradient(circle at top right, rgba(241, 245, 249, 1), rgba(255, 255, 255, 1));
}

html.dark .gradient-bg {
    background: radial-gradient(circle at top right, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 1));
}

/* True Dark Mode Overrides */
html.truedark body {
    background-color: #000000 !important;
    background-image: none !important;
}

html.truedark .bg-white,
html.truedark .bg-slate-100\/80,
html.truedark .dark\:bg-slate-900\/40,
html.truedark .dark\:bg-slate-900\/30,
html.truedark .dark\:bg-slate-900\/50,
html.truedark .dark\:bg-slate-900\/60 {
    background-color: #09090b !important;
}

html.truedark #mobile-menu {
    background-color: #000000 !important;
}

html.truedark .border-slate-200,
html.truedark .border-slate-200\/60,
html.truedark .dark\:border-slate-800,
html.truedark .dark\:border-slate-800\/50,
html.truedark .dark\:border-slate-800\/60,
html.truedark .dark\:border-slate-900 {
    border-color: #18181b !important;
}

html.truedark .hover\:bg-slate-100,
html.truedark .dark\:hover\:bg-slate-800,
html.truedark .hover\:border-slate-300,
html.truedark .dark\:hover\:border-slate-700 {
    background-color: #18181b !important;
    border-color: #27272a !important;
}

.hero-title {
    font-size: clamp(4rem, 12vw, 10rem);
    transition: transform 0.15s ease-out;
    will-change: transform;
    text-shadow:
        0 0 40px rgba(20, 184, 166, 0.05);
}

#globe-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

#globe-container {
    opacity: 0.75;
}