:root {
    --primary: #09ff00;
    --bg: #000;
}

/* ================= RESET ================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background: var(--bg);
    font-family: 'Share Tech Mono', monospace;
    color: var(--primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ================= RESPONSIVE TYPOGRAPHY ================= */

h1 { font-size: clamp(28px, 4vw, 72px); }
h2 { font-size: clamp(22px, 3vw, 40px); }
h3 { font-size: clamp(16px, 2vw, 22px); }
p  { font-size: clamp(14px, 1.2vw, 18px); }

/* ================= FADE ================= */

body.fade-out {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ================= VIGNETTE ================= */

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at center,
        transparent 40%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 1;
}

/* ================= GLOBAL LINKS ================= */

a {
    text-decoration: none;
    color: inherit;
}

/* ================= SECTIONS ================= */

section {
    position: relative;
    z-index: 2;
    padding: clamp(60px, 6vw, 120px) 20px;
    text-align: center;
    max-width: 1600px;
    margin: auto;
}