@import url(https://fonts.bunny.net/css?family=source-code-pro:300,300i,700,700i|vt323:400);
/*   Josh's Custom CSS Reset   https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after {   box-sizing: border-box; } * {   margin: 0; } @media (prefers-reduced-motion: no-preference) {   html {     interpolate-size: allow-keywords;   } } body {   line-height: 1.5;   -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg {   display: block;   max-width: 100%; } input, button, textarea, select {   font: inherit; } p, h1, h2, h3, h4, h5, h6 {   overflow-wrap: break-word; } p {   text-wrap: pretty; } h1, h2, h3, h4, h5, h6 {   text-wrap: balance; } #root, #__next {   isolation: isolate; }

:root {
--maxdvb: 100dvb;  --halfdvb: 500dvb; --quarterdvb: 25dvb; 
--basefont: 1.125rem;
--maxfont: clamp(3rem, calc(16.5vw - 3ex),18rem); /*huge, then counting up-sizing down like h tags*/
--1font: clamp(2.8rem, calc(var(--basefont,1rem) + 6.25vw), 6rem);  
--2font: clamp(2.5rem, calc(var(--basefont,1rem) + 4.25vw), 5rem);
--3font: clamp(2.3rem, calc(var(--basefont,1rem) + 3vw), 4rem);
--4font: clamp(2.1rem, calc(var(--basefont,1rem) + 1.8vw), 3.6rem); 
--5font: clamp(2rem, calc(var(--Bfont,1rem) + 1.2vw), 3rem); 
--cobaltBlue: oklch(0.2878 0.1412 270.53); 
--atomicGreen: oklch(0.6173 0.1532 135.77);
}


main {margin-inline: auto; font-family: 'source-code-pro', 'Nimbus Mono PS', 'Courier New', monospace;
color: #fff;
padding-block: 5dvh;
    display: flex;justify-content: center; flex-wrap: wrap; 
	background: linear-gradient(180deg, var(--cobaltBlue) 0% , var(--atomicGreen) 100%);
	}
header, footer {block-size: var(--quarterdvb); 
    background-color: var(--cobaltBlue);
	color: #fff;
    display: flex; justify-content: center; align-items: center; flex-direction: row;
}
footer{background-color: var(--atomicGreen);}
div.articles, aside {padding-inline: 2vw 5vw;margin-block: 3vh;}
article{margin-block: 3vh;}
aside { background: var(--modBrand); padding-block-start: 3vh;}
h1,h2,h3,h4,h5, .h1,.h2,.h3,.h4,.h5 {	font-family: 'vt323', sans-serif; font-weight: 100;}
h1,.h1{font-size: var(--1font,3rem);  }
h2,.h2{font-size: var(--2font,2.8rem); }
h3,.h3{font-size:var(--3font,2.5rem); }
h4,.h4{font-size:var(--4font,2.1rem);  } 
h5,.h5{font-size:var(--5font, 2rem);  }
a {font-weight: 600; letter-spacing: 0.1rem; text-decoration: underline dotted 1px;}
a:hover {color: var(--modBrand);}

/* sizing helper classes*/
.dvb100 {min-block-size: 100dvb;}.dvb80{min-block-size: 80dvh;}.dvb50 {min-block-size: 50dvb;}
.ci75 {max-inline-size: 75cqi;}.ci50 {max-inline-size: 50cqi;}.ci25 {max-inline-size: 25cqi;}

/* background helper classes */
.sheerpattern {opacity: .051}.ltpattern {opacity: .21}.medpattern {opacity: .51}.apattern  {opacity: var(--alpha,1);}


/*brand color helper classes*/
/* Must select a bc and cbase For solids, do bc## cbase and insert var(--modBrand) where color required*/
.bc01{ --baseBrand: var(--cobaltBlue);  }
.bc02{ --baseBrand: var(--atomicGreen);  }
/* .bc03{ --baseBrand: ;  }
.bc04{ --baseBrand: ;   }
.bc05{ --baseBrand: ;   }
*/

/*light increments 5 up to 20, manually override by setting --lightness at element level */
.lp80 {--lightness: 1.8;}.lp50 {--lightness: 1.5;}.lp20 { --lightness: 1.2;}.lp15 { --lightness: 1.15;}.lp10 { --lightness: 1.10;}.lp05 { --lightness: 1.05;}.lbase { --lightness: 1;}.lm05 { --lightness: .95;}.lm10 { --lightness: .90;}.lm15 { --lightness: .85;}.lm20 { --lightness: .80;}.lm50 { --lightness: .50;}.lm80 { --lightness: .20;}

.a0 {--alpha: 0;}.abase {--alpha: 1;}.a75 {--alpha: .75;}.a50 {--alpha: .5;}.a25 {--alpha: .25;}.a20 {--alpha: .20;}.a15 {--alpha: .15;}.a10 {--alpha: .10;}.a05 {--alpha: .05;}
.a04 {--alpha: .04;}.a03 {--alpha: .03;}.a02 {--alpha: .02;}
/*color bases, use cbase for selected color*/
.triad1{ --modBrand: oklch(from var(--baseBrand, #333) calc(l * var(--lightness, 1) ) c calc(h - 120) / var(--alpha, 1));}
.triad2{ --modBrand: oklch(from var(--baseBrand, #333) calc(l * var(--lightness, 1) ) c calc(h + 120) / var(--alpha, 1)); }
.cbase { --modBrand: oklch(from var(--baseBrand, #333) calc(l * var(--lightness, 1) ) c h / var(--alpha, 1));}  
.tetra1{ --modBrand: oklch(from var(--baseBrand, #333) calc(l * var(--lightness, 1) ) c calc(h + 90) / var(--alpha, 1));}
.tetra2{ --modBrand: oklch(from var(--baseBrand, #333) calc(l * var(--lightness, 1) ) c calc(h + 180) / var(--alpha, 1));}
.tetra3{ --modBrand: oklch(from var(--baseBrand, #333) calc(l * 1) c calc(h + 270) / var(--alpha, 1));}