

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@100;300;400;500;600&display=swap');

* {box-sizing:border-box; /* padding:0; margin:0; */}


:root {

	/* Page Sizes */
	--dt:.5s;
	--logosize:36em;
	--logosize:24em;
	--logosize:20em;
	--edgesize:.75rem;
	--edgesize:.5rem;
	--pagewidth:60rem;
	--cornersize:.375rem;
	--cornersize:.5rem;

	/* Numbers */
	--maximgsize:2.25em;
	--maximgsize:3em;
	--fieldspace:.75em;
	--fieldspace:.375em;
	--fieldspace:.25em;

	/* Relative Page Levels */
	--navbarlevel:100;
	--hangdisplaylevel:200;
	--hangdisplaybackdroplevel:199;
	--queryarenalevel:999;
	--queryarenaswitchlevel:1000;

	/* Glass Colors */
	--blkglass:#0008;
	--blkglass:#000A;
	--blackglass:#0004;
	--blackglasss:#0002;
	--blackglasss:#0001;
	--drkgreyglass:#444a;
	--greyglass:#8888;
	--greyglass:#8884;
	--whiteglass:#FFF8;
	--whiteglass:#FFF4;
	/* --whiteglass:#FFF2; */
	/* --whiteglass:#FFF0; */
	/* Default Glass Color */
	--defaultglasscolor:var(--whiteglass);

	/* Backdrop Color */
	--backdropcolor:var(--blackglass);
	--backdropcolor:var(--drkgreyglass);

	/* Theme Colors */
	--lightgrey:#CCC;
	--lightblack:#333;

	/* White Colors */
	--white:#f0f0f0;
	--offwhite:#e0e0e0;
	/* Grey Colors */
	--ltltgrey:#d0d0d0;
	--ltgrey:#b0b0b0;
	--grey:#888;
	--drkgrey:#555;
	/* Black Colors */
	--ltltblack:#333;
	--ltblack:#222;
	--black:#111;
	/* Green Colors */
	--green:#2ECC71;
	--drkgreen:#27AE60;
	/* Sky Blue Colors */
	--whtskyblue:#f0f8ff;
	--ltskyblue:#B4DCFF;
	--medskyblue:#84C4FE;
	/* Purple Colors */
	--whtpurple:#F2F1FF;
	--ltltpurple:#e4e3ff;
	--ltpurple:#BDBAFF;
	--medpurple:#928EFE;
	--medpurple:#7c78fa;
	--drkpurple:#615cff;
	--drkpurple:#4d47fb;
	/* --drkpurple:#3f39fb; */
	--blkpurple:#171550;

	/* Gradient Colors */
	/* --bgimg:linear-gradient(135deg,dodgerblue,white,wheat); */

	/* Box Shadows */
	--boxshadow:0 0 1rem 0 #0002;
	--boxshadow:0 0 .25rem 0 #0003;
	--boxshadow2:0 0 1rem 0 #0002;

	/* Box Shadows */
	--boxshadowltlt:0 1px .125rem 0 #0002;
	--boxshadowlt:0 1px .125rem 0 #0004;
	--boxshadow:0 1px .25rem 0 #0008;
	--boxshadow2:0 .25em .5rem 0 #0008;
	--boxshadow3:0 .25em .5rem 0 #0008;
}
body {

	--backcolor:var(--lightgrey);
	--forecolor:black;
}
body.dark {

	--backcolor:var(--ltblack);
	--forecolor:white;
}


body {

	/* Grey Theme Colors */
	--backcolor:var(--ltgrey);
	--backcolor2:var(--ltltgrey);
	--backcolor3:var(--offwhite);
	--backcolor4:var(--white);
	--backcolor5:white;

	/* SkyBlue Theme Colors */
	--backcolor:var(--whtskyblue);
	--backcolor2:var(--medskyblue);
	--backcolor3:var(--ltskyblue);
	--backcolor4:var(--white);
	--backcolor5:white;

	/* Purple Theme Colors */
	--backcolor:var(--whtpurple);
	--backcolor2:var(--medpurple);
	--backcolor3:var(--ltpurple);
	--backcolor4:var(--white);
	--backcolor5:white;
	/* Purple Theme Colors */
	--backcolor:var(--whtpurple);
	--backcolor1:var(--ltltpurple);
	--backcolor2:var(--ltpurple);
	--backcolor3:var(--medpurple);
	--backcolor4:var(--drkpurple);
	--backcolor5:white;

	--forecolor:black;
	--linkcolor:var(--drkgreen);
}
body.dark {

	/* Dark Grey Theme Colors */
	--backcolor:var(--grey);
	--backcolor2:var(--drkgrey);
	--backcolor3:var(--ltltblack);
	--backcolor4:var(--ltblack);
	--backcolor5:var(--black);

	--forecolor:var(--white);
	--linkcolor:var(--green);
}




/* Container */
body {background-color:var(--backcolor4); background-image:var(--bgimg); margin:0;}
/* body {display:grid; place-items:center; min-height:100vh;} */
body {color:var(--forecolor); font-family:Nunito,sans-serif;}
.freezer > * ,
.freezer {overflow:hidden;}


/* Container */
div#container {background-color:var(--backcolor); display:flex; flex-direction:column; align-items:center; /* justify-content:center; */ min-height:100vh;}
div#container > section {margin-top:1.25em; margin-top:2em;}
/* Button Links */
div#container a.btn {color:inherit; text-decoration:none;}
div#container a.btn {display:grid; place-items:center; padding:.75em 1em .625em; /* border:.125em solid */ /* var(--green) */; border-radius:.25em;}
/* Navigation List */
div#container ul.navlist {display:flex; flex-direction:row; justify-content:center; align-items:center;}
div#container ul.navlist {list-style:none; padding:0; margin:0;}
/* div#container ul.navlist li.navitem {padding:.5rem; padding:.25rem;} */
div#container ul.navlist li.navitem a.navlink {transition:.125s;}






/* Tablet Screen */
@media screen and (max-width:64rem) {
}

/* Big Smartphone Screen */
@media screen and (max-width:48rem) {
}

/* Small Smartphone Screen */
@media screen and (max-width:32rem) {
}

/* Tiny Smartphone Screen */
@media screen and (max-width:20rem) {
}
