: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:       #eafffd;
    --primary-100:      #cbfffd;
    --primary-200:      #9efffe;
    --primary-300:      #5bfdff;
    --primary-400:      #00f0ff;
    --primary-500:      #00d3e5;
    --primary-600:      #00a8c0;
    --primary-700:      #03859b;
    --primary-800:      #0d6a7d;
    --primary-900:      #105869;
    --primary-950:      #033a49;
    --secondary-50:     #fcf3ff;
    --secondary-100:    #f8e2ff;
    --secondary-200:    #f1cbff;
    --secondary-300:    #e7a2ff;
    --secondary-400:    #d867ff;
    --secondary-500:    #ca2dff;
    --secondary-600:    #bc06ff;
    --secondary-700:    #a800f8;
    --secondary-800:    #8a00c4;
    --secondary-900:    #7402a1;
    --secondary-950:    #51007b;
    --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;

    --box-shadow: 0 0px 10px -2px var(--neutral-0);
    --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%);
}
:root {
    --mono-family: "Roboto Mono", monospace;
    --font-family: "Poppins", sans-serif;
    --font-size: max(14px, 0.75vh);
    --font-color: var(--neutral-0);

    --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);

    --border-radius: var(--size-xs);
    
    font-size: var(--font-size);
    font-family: var(--font-family);
    font-weight: 300;
    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;
    margin-top: var(--header-height);
    background-color: var(--neutral-1000);
    /* padding-bottom: calc(var(--footer-height) + var(--spacing-l)); */
}
main {
    min-height: calc(100vh - var(--header-height));
    z-index: 0;
}
footer {
    --space: var(--size-s);
    width: 100%;
    padding: var(--gutter);
    z-index: 100;
}
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"].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-950), 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;
}
h1.special {
    text-transform: uppercase;
    background: linear-gradient(170deg, var(--neutral-950), var(--primary-950));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
}
h2 {
    font-size: large;
	width: 100%;
    margin-bottom: var(--size-m);
	font-weight: 700;
}
h3 {
    font-size: xx-large;
	width: 100%;
	font-weight: 700;
}
h4 {
    font-weight: 500;
    font-size: 1rem;
}
p, p span {
    line-height: 1.2em;
    max-width: 58ch;
}
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;
    }
    h1, h2, h3 {
        text-align: center;
    }
}
@media screen and (min-width: 600px) {
    footer {
        z-index: 200;
    }
    .m-only {
        display: none !important;
    }
    main h1,
    main h2,
    main h3 {
        font-size: 4em;
    }
    section {
        padding: var(--gutter-h) calc(4 * var(--gutter));
    }
}