:root {
    --size-mini: min(0.25rem, 0.25vh);
    --size-xxxs: min(0.5rem, 0.5vh);
    --size-xxs: min(0.75rem, 0.75vh);
    --size-xs: min(1rem, 1vh);
    --size-xs: min(1.25rem, 1.25vh);
    --size-s: min(1.75rem, 1.75vh);
    --size-m: min(2.5rem, 2.5vh);
    --size-l: min(3.75rem, 3.75vh);
    --size-xl: min(6.25rem, 6.25vh);
    --size-xxl: min(10rem, 10vh);
    --size-xxxl: min(15rem, 15vh);
    --size-mega: min(25rem, 25vh);
    --size-huge: min(45rem, 40vh);
}

:root {
    --neutral-0: #fff;
    --neutral-50: #f6f6f6;
    --neutral-100: #e7e7e7;
    --neutral-200: #d1d1d1;
    --neutral-300: #b0b0b0;
    --neutral-400: #888888;
    --neutral-500: #6d6d6d;
    --neutral-600: #5d5d5d;
    --neutral-700: #4f4f4f;
    --neutral-800: #454545;
    --neutral-900: #3d3d3d;
    --neutral-950: #2b2b2b;
    --neutral-1000: #000;
    --primary-50: #f0f9f4;
    --primary-100: #dbf0e3;
    --primary-200: #b9e1cb;
    --primary-300: #8bcaab;
    --primary-400: #5aad87;
    --primary-500: #38916b;
    --primary-600: #277454;
    --primary-700: #1f5d45;
    --primary-800: #1b4a38;
    --primary-900: #143529;
    --primary-950: #0c221b;
    --secondary-50: #faf9ec;
    --secondary-100: #f4f0cd;
    --secondary-200: #ebdf9d;
    --secondary-300: #dfc865;
    --secondary-400: #d4af37;
    --secondary-500: #c59b2d;
    --secondary-600: #aa7a24;
    --secondary-700: #885920;
    --secondary-800: #724921;
    --secondary-900: #623e21;
    --secondary-950: #382010;
    --success-50: #fbffe4;
    --success-100: #f6ffc4;
    --success-200: #ebff90;
    --success-300: #d9ff50;
    --success-400: #bfff00;
    --success-500: #a6e600;
    --success-600: #80b800;
    --success-700: #618b00;
    --success-800: #4d6d07;
    --success-900: #415c0b;
    --success-950: #213400;
    --warning-50: #fcfee8;
    --warning-100: #f8fec3;
    --warning-200: #f7fe8a;
    --warning-300: #f9fd47;
    --warning-400: #faf61b;
    --warning-500: #eadc08;
    --warning-600: #caae04;
    --warning-700: #a17e07;
    --warning-800: #85630e;
    --warning-900: #715012;
    --warning-950: #422b06;
    --danger-50: #fef1f6;
    --danger-100: #fee5f0;
    --danger-200: #ffcae2;
    --danger-300: #ff9fc9;
    --danger-400: #ff64a3;
    --danger-500: #fe347e;
    --danger-600: #ef1359;
    --danger-700: #d00640;
    --danger-800: #ac0835;
    --danger-900: #8f0c30;
    --danger-950: #580017;
}

:root {
    --mono-family: "Roboto Mono", monospace;
    --font-family: "PT Serif", serif;
    --font-size: max(16px, 0.75vh);
    --font-color: var(--neutral-1000);

    --header-height: min(4rem, 10vh);
    --header-space: var(--size-xs);
    --footer-height: min(20rem, 20vh);
    --nav-width: 20vw;
    --gutter: var(--size-s);
    --gutter-v: var(--size-m);
    --gutter-h: var(--size-l);

    --icon-size: var(--size-m);
    --icon-color: var(--neutral-200);

    --border-radius: var(--size-xs);
    --box-shadow: 0 0px 60px -40px var(--neutral-1000);

    --glow-primary: radial-gradient(var(--primary-900), var(--primary-800), var(--primary-700), var(--primary-600), transparent 70%);
    --glow-secondary: radial-gradient(var(--secondary-900), var(--secondary-800), var(--secondary-700), var(--secondary-600), transparent 70%);
    --glow-success: radial-gradient(var(--success-900), var(--success-800), var(--success-700), var(--success-600), transparent 70%);
    --glow-warning: radial-gradient(var(--warning-900), var(--success-800), var(--success-700), var(--success-600), transparent 70%);
    --glow-danger: radial-gradient(var(--danger-900), var(--success-800), var(--success-700), var(--success-600), transparent 70%);

    font-size: var(--font-size);
    font-family: var(--font-family);
    font-weight: 200;
    font-style: normal;
    font-optical-sizing: auto;
    color: var(--font-color);
    line-height: 1em;
    z-index: 0;
}

* {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-optical-sizing: inherit;
    line-height: 1em;
    color: inherit;
    box-sizing: border-box;
    z-index: inherit;
}

html {
    scroll-behavior: smooth;
    margin: 0;
}

body {
    position: relative;
    margin: 0;
    background-color: var(--neutral-0);
    /* padding-bottom: calc(var(--footer-height) + var(--spacing-l)); */
    z-index: 0;
}

main {
    position: relative;
    min-height: calc(100vh - var(--header-height));
    z-index: 100;
}

footer {
    --space: var(--size-s);
    position: relative;
    width: 100%;
    padding: var(--gutter-h) var(--gutter-v);
    z-index: 200;
}

header {
    z-index: 300;
}

section {
    min-height: 100vh;
    padding: var(--gutter-h) var(--gutter);
}

button {
    height: 2em;
    padding: var(--size-xs);
    border: none;
    outline: none;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    box-shadow: var(--box-shadow);
}

button[type="button"] {}

button[type="button"].primary {
    background-color: var(--primary-500);
    border-left: 3px solid var(--primary-700);
    color: var(--neutral-0);
}

button[type="button"].neutral {
    background-color: var(--neutral-0);
    border-left: 3px solid var(--neutral-200);
}

hr {
    border: none;
    outline: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--neutral-500), transparent);
    margin: var(--gutter-h) 0;
}

p,
h1,
h2,
h3 {
    margin: var(--gutter) 0;
}

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

h4,
h5 {
    margin: 0;
}

h1 {
    width: 100%;
    font-size: xx-large;
    letter-spacing: 0.05em;
    font-weight: 500;
}

h2 {
    font-size: large;
    width: 100%;
    margin-bottom: var(--size-m);
    font-weight: 700;
}

h3 {
    font-size: xx-large;
    line-height: 1.4em;
    width: 100%;
    font-weight: 500;
    color: transparent;
    background: linear-gradient(170deg, var(--primary-500), var(--primary-600), var(--primary-700), var(--primary-800), var(--primary-900));
    -webkit-background-clip: text;
    background-clip: text;
}

h4 {
    font-weight: 500;
    font-size: 1rem;
}

p,
p span {
    line-height: 1.2em;
    max-width: 70ch;
}

strong {
    font-weight: bolder;
}

ul {
    list-style-type: none;
    margin: var(--size-s) auto;
}

ul li {
    display: grid;
    margin: var(--size-xxs) 0;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--size-xxs);
    line-height: 1em;
}

img {
    margin: 0;
    outline: none;
    border: none;
}

@media screen and (max-width: 600px) {
    .d-only {
        display: none !important;
    }

    footer {
        flex-direction: column;
    }

    h2,
    h3 {
        text-align: center;
    }
}

@media screen and (min-width: 600px) {
    footer {
        z-index: 200;
    }

    .m-only {
        display: none !important;
    }

    body {
        padding-left: calc(var(--size-mega) + var(--gutter-v) + var(--gutter-v));
    }

    main h3 {
        font-size: 2em;
    }

    section {
        padding: var(--gutter-h) calc(4 * var(--gutter));
    }
}