:root {

    --accent-color: #e2e8f0;
    
    --primary-text-color: color-mix(in srgb, var(--accent-color) 15%, #e8ecea);
    --secondary-text-color: color-mix(in srgb, var(--disabled-text-color) 50%, var(--primary-text-color));
    --disabled-text-color: #6b7280;

    --text-xs:   clamp(11px, 0.3vw + 0.55rem, 0.70rem);
    --text-sm:   clamp(12px, 0.3vw + 0.65rem, 0.80rem);
    --text-base: clamp(13px, 0.3vw + 0.75rem, 0.90rem);
    --text-lg:   clamp(16px, 0.5vw + 1.00rem, 1.25rem);
    --text-xl:   clamp(18px, 0.7vw + 1.10rem, 1.50rem);
    --text-2xl:  clamp(28px, 1.5vw + 2.00rem, 2.75rem);
    --text-3xl:  clamp(32px, 2.0vw + 2.25rem, 3.25rem);

    --horizontal-padding: clamp(1rem, 8vw, 12rem);
}

html {
  scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'DM Mono', monospace;
}

h1, h2, h3, h4 {
  font-family: 'Syne', sans-serif;
}

h1 {
    font-size: var(--text-2xl);
}

h2 {
    font-size: var(--text-xl);
}

h3 {
    font-size: var(--text-lg);
}

p {
    font-size: var(--text-base);
}

body {
    background-color: #0f1117;

    background-image:
        radial-gradient(circle at 1px 1px, rgba(74,222,128,0.05) 1px, transparent 0),
        linear-gradient(rgba(74,222,128,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74,222,128,0.02) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 40px 40px;
}

a {
    text-decoration: none;
}

a, h1, h2, p, span {
    transition: color 400ms ease-in-out;
}