: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    );
    --narrow-width: 600px;
    --wide-width: 1024px;
    --mono-family: "Roboto Mono", monospace;
    --font-family: sans-serif;
    --font-size: max(16px, 0.75vh);
    --font-color: var(--neutral-900);
}
:root {
    /* --neutral-0: #ffffff;
    --neutral-50: #f6f5f5;
    --neutral-100: #e7e6e6;
    --neutral-200: #d1d0d0;
    --neutral-300: #b1afaf;
    --neutral-400: #898787;
    --neutral-500: #6e6c6c;
    --neutral-600: #5c5a5a;
    --neutral-700: #504f4e;
    --neutral-800: #464544;
    --neutral-900: #3d3c3c;
    --neutral-950: #262626;
    --neutral-1000: #000000; */
    --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: #fdf3f3;
    --primary-100: #fce4e4;
    --primary-200: #facfce;
    --primary-300: #f5adac;
    --primary-400: #eb7270;
    --primary-500: #e15452;
    --primary-600: #cd3735;
    --primary-700: #ac2b29;
    --primary-800: #8e2826;
    --primary-900: #772625;
    --primary-950: #40100f;
    --secondary-50: #eefffd;
    --secondary-100: #c6fffb;
    --secondary-200: #8dfff9;
    --secondary-300: #4cfcf6;
    --secondary-400: #18e9e9;
    --secondary-500: #00cbcd;
    --secondary-600: #00a0a5;
    --secondary-700: #027d83;
    --secondary-800: #076368;
    --secondary-900: #0c5155;
    --secondary-950: #002f34;
    --success-50: #f2fcf1;
    --success-100: #defade;
    --success-200: #c0f3bf;
    --success-300: #8de88d;
    --success-400: #54d454;
    --success-500: #32cd32;
    --success-600: #209920;
    --success-700: #1c791d;
    --success-800: #1b601c;
    --success-900: #184f1a;
    --success-950: #082b09;
    --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;
}
:root {
    --header-height: min(8rem, 8vh);
    --header-space: var(--size-xs);
    --footer-height: min(20rem, 20vh);
    --nav-width: clamp(320px, 20vh, 500px);
    --gutter: var(--size-m);
    --gutter-h: var(--size-l);
    --gutter-v: var(--size-xl);

    --icon-size: var(--size-m);
    --icon-color: var(--neutral-200);
    
    --border-radius: var(--size-xs);
    --box-shadow: 0px 2px 10px -6px var(--neutral-1000);

    
    font-size: var(--font-size);
    font-family: var(--font-family);
    font-weight: 400;
    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;
}
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--neutral-950);
    border-radius: 2px;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-950) transparent;
} 
body {
    position: relative;
    margin: 0;
    background-color: var(--neutral-50);
    background-size: 100vw max(100%, 100vh);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-bottom: calc(var(--footer-height) + var(--spacing-l));
}
main {
    padding-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
    z-index: 0;
}
footer {
    --space: var(--size-s);
    width: 100%;
    padding: var(--gutter);
    z-index: 100;
}
section {
    padding: var(--gutter-h) var(--gutter);
    max-width: 1080px;
    margin: 0 auto;
}
button {
    width: 100%;
    height: 2em;
    padding: var(--size-xs);
    border: none;
    outline: none;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--box-shadow);
    font-weight: 700;
}
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);
}
a {
    text-decoration: none;
    color: inherit;
}
h1, h2, h3, h4, h5 {
    margin: 0;
}
h1 {
    width: 100%;
    margin-bottom: var(--size-m);
    color: var(--neutral-1000);
    font-size: xx-large;
    font-weight: 800;
    letter-spacing: 0.05em;
}
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 {
	width: 100%;
    margin-bottom: var(--size-m);
	font-weight: 700;
}
p, p span {
    line-height: 1.2em;
    max-width: 76ch;
    text-align: justify;
}
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;
}
fieldset {
    max-width: 600px;
}

@media screen and (max-width: 600px) {
    body {
        margin-top: var(--header-height);
    }
    h3 {
        font-size: xx-large;
    }
    .d-only {
        display: none !important;
    }
}
@media screen and (min-width: 600px) {
    footer {
        z-index: 200;
    }
    main {
		/* padding-left: var(--nav-width); */
	}
    .m-only {
        display: none !important;
    }
    main h1 {
        font-size: 3em;
    }
    main h2,
    main h3 {
        font-size: 2em;
    }
    main h2 {font-weight: 500;}
}