:root {
    --color-primary: #00ff87;
    --color-primary-dark: #00d873;
    --color-bg: #0d0d0d;
    --color-surface: #151816;
    --color-surface-light: #1b201d;
    --color-text: #f5f7f6;
    --color-muted: #a6ada9;
    --color-line: rgb(255 255 255 / 12%);
    --color-error: #ff8d8d;
    --font-body: "Manrope", sans-serif;
    --font-mono: "DM Mono", monospace;
    --container: 77.5rem;
    --radius-sm: .24rem;
    --radius-md: 1.1rem;
    --radius-lg: 1.6rem;
    --section-space: clamp(5rem, 10vw, 9rem); 
    --section-space-sm: clamp(4rem, 5vw, 6rem);
    --transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--color-bg);
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image: linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
    background-size: 64px 64px;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
    pointer-events: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
}

.container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    padding: .7rem 1rem;
    color: var(--color-bg);
    background: var(--color-primary);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

.section {
    padding-block: var(--section-space);
}