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

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




:root {

	/* Base Colors */
	--bgwhite:#f7f8fb;
	/* --lightgrey:#CCC; */
	/* --lightblack:#333; */

	/* Theme Colors */
	/* --xyz:xyz; */

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

	/* Page Sizes */
	--dt:.5s;
	--pagewidth:60rem;
	--pagewidth:40rem;
	--cornersize:.625rem;

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

body {

	/* Xyz */
	--backcolor:var(--bgwhite);
	--forecolor:black;

	/* Xyz */
	--white:#fafafa;
	--offwhite:#DDD;
	--whitered:#ffd6d6;
	--whiteblue:#eef2f7;
	--whitegreen:#c8f7c5;
	--lightred:#ff7a7a;
	--lightgreen:#7bd67b;
}

/* body.dark {

	--backcolor:var(--lightblack);
	--forecolor:white;
} */



/* Base */
body {background-color:var(--backcolor); background-image:var(--bgimg); margin:0;}
body {color:var(--forecolor); font-family:Nunito,sans-serif;}
div#container {display:flex; flex-direction:column; align-items:center; gap:1rem;}
div#container {min-height:100vh; padding:1.25rem;}



/* Top Bar */
/* div#container nav.topbar {display:none;} */
/* div#container nav.topbar {position:absolute; top:0; right:0; left:0; width:100%;} */
/* div#container nav.topbar {min-height:4rem; padding:1rem 0; border-radius:var(--cornersize); box-shadow:var(--boxshadow);} */
div#container nav.topbar div.bin {display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:1rem; max-width:var(--pagewidth); margin:0 auto;}
div#container nav.topbar div.bin h1.head {display:flex; flex-direction:row; align-items:center; margin:0;}
/* div#container nav.topbar div.bin h1.head svg.icon {} */
div#container nav.topbar div.bin h1.head span.caption {margin-left:.375rem;}
div#container nav.topbar div.bin ul.navlist {display:flex; flex-direction:row; align-items:center; list-style:none; padding:0; margin:0;}
div#container nav.topbar div.bin ul.navlist li.navitem {padding:.5rem;}
div#container nav.topbar div.bin ul.navlist li.navitem a.navlink {color:inherit; text-decoration:none;}
div#container nav.topbar div.bin div {padding:.5rem 1rem; border-radius:var(--cornersize); box-shadow:var(--boxshadow);}
div#container nav.topbar div.bin div.tokenbox {background-color:white; display:flex; gap:.75rem;}
div#container nav.topbar div.bin div.tokenbox {display:none;}
div#container nav.topbar div.bin div.tokenbox span.caption {font-weight:700;}
div#container nav.topbar div.bin div.tokenbox span.tokendisplay {visibility:visible;}
div#container nav.topbar div.bin div.tokenbox span.tokendisplay.gone {visibility:hidden;}
/* div#container nav.topbar div.bin div.tokenbox button.tokentoggler {} */
/* div#container nav.topbar div.bin div.difficultyselector {display:grid;} */
/* div#container nav.topbar div.bin div.difficultyselector select.difficultyselector {} */


/* Main Grid (new) */
div#container main.main.new div.msg {display:block;}
div#container main.main.new div.grid {display:none;}
/* Main Grid */
div#container main.main {background-color:white; max-width:100%; overflow:auto; padding:.625rem; border-radius:var(--cornersize); box-shadow:var(--boxshadow);}
div#container main.main div.msg {display:none; padding:.25rem .5rem;}
div#container main.main div.msg span.caption {font-size:.75rem;}
div#container main.main div.grid {display:grid; gap:.25rem; width:fit-content; /* min-width:max-content; */}
div#container main.main div.grid {grid-template-columns:repeat( var(--currentgridsize) , 1fr ); --currentgridsize:18;}

/* Main Grid Cells */
div#container main.main div.grid div.cell {background-color:var(--white); overflow:auto; border-radius:.375rem; border:1px solid var(--offwhite);}
div#container main.main div.grid div.cell {position:relative; cursor:pointer; transition:0.2s ease;}
div#container main.main div.grid div.cell {height:var(--cellsize); width:var(--cellsize); --cellsize:3.75rem;}
div#container main.main div.grid div.cell.gone {display:none;}
/* div#container main.main div.grid div.cell.edit {} */
div#container main.main div.grid div.cell.no {background-color:var(--whitered); border-color:red; border-color:var(--lightred);}
div#container main.main div.grid div.cell.no {animation:noshake .375s ease;}
div#container main.main div.grid div.cell.yes {background-color:var(--whitegreen); border-color:green; border-color:var(--lightgreen);}
div#container main.main div.grid div.cell.yes {animation:yesglow .875s ease; --glowcolor:#78dc78e6;}
div#container main.main div.grid div.cell.empty {background-color:var(--whiteblue); border-color:var(--offwhite);}
div#container main.main div.grid div.cell > * {position:absolute; font-size:1.125rem;}
div#container main.main div.grid div.cell div.clearbtn {display:none;}
div#container main.main div.grid div.cell div.clearbtn {bottom:0; left:0; z-index:30;}
div#container main.main div.grid div.cell div.clearbtn {font-size:.625rem; user-select:none; padding:.375em; border-radius:.25rem;}
/* div#container main.main div.grid div.cell div.clearbtn {background-color:black; color:white; margin:.25em;} */
div#container main.main div.grid div.cell div.clearbtn svg.icon {display:block;}
div#container main.main div.grid div.cell div.clearbtn span.caption {display:none;}
div#container main.main div.grid div.cell div.clearbtn span.caption {position:absolute; bottom:100%; left:50%; transform:translateX(-50%);}
div#container main.main div.grid div.cell div.clearbtn span.caption {background-color:#333; color:white;}
div#container main.main div.grid div.cell label.celllabel {top:0; right:0;}
div#container main.main div.grid div.cell label.celllabel {pointer-events:none; user-select:none; z-index:30;}
div#container main.main div.grid div.cell label.celllabel {font-size:.5rem; opacity:.375; padding:.25em .5em;}
div#container main.main div.grid div.cell input.cellinput {background-color:transparent; text-align:center; border:0 none; outline:none;}
div#container main.main div.grid div.cell input.cellinput {/* display:none; */ visibility:hidden; z-index:20;}
div#container main.main div.grid div.cell input.cellinput {inset:0; height:100%; width:100%;}
div#container main.main div.grid div.cell span.celldisplay {inset:0; height:100%; width:100%;}
div#container main.main div.grid div.cell span.celldisplay {display:flex; align-items:center; justify-content:center; z-index:10;}
/* div#container main.main div.grid div.cell.edit div.clearbtn {display:block;} */
/* div#container main.main div.grid div.cell.edit label.celllabel {} */
div#container main.main div.grid div.cell.edit input.cellinput {/* display:block; */ visibility:visible;}
div#container main.main div.grid div.cell.edit span.celldisplay {/* display:none; */ visibility:hidden;}


/* Progress Saver */
div#container main.main button.savebtn {padding:.5em .75em;}
/* div#container main.main button.savebtn span.caption {} */


@keyframes noshake {
	0% {transform:translateX(0);}
	20% {transform:translateX(-.125rem);}
	40% {transform:translateX(.125rem);}
	60% {transform:translateX(-.125rem);}
	80% {transform:translateX(.125rem);}
	100% {transform:translateX(0);}
}

@keyframes yesglow {
	0% {box-shadow:0 0 0 transparent;}
	50% {box-shadow:0 0 .875rem var(--glowcolor);}
	100% {box-shadow:0 0 0 transparent;}
}





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

	/* Base */
	/* div#container {} */

	/* Top Bar */
	/* div#container nav.topbar {} */

	/* Main Grid */
	/* div#container main.main {} */
	/* div#container main.main div.grid {} */
	/* Main Grid Cells */
	/* div#container main.main div.grid div.cell {} */
}

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

	/* Base */
	/* div#container {} */

	/* Top Bar */
	/* div#container nav.topbar {} */
	div#container nav.topbar div.bin {flex-direction:column;}

	/* Main Grid */
	/* div#container main.main {} */
	/* div#container main.main div.grid {} */
	/* Main Grid Cells */
	div#container main.main div.grid div.cell {--cellsize:3.125rem; font-size:.875rem;}
}

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

	/* Base */
	/* div#container {} */

	/* Top Bar */
	/* div#container nav.topbar {} */

	/* Main Grid */
	/* div#container main.main {} */
	/* div#container main.main div.grid {} */
	/* Main Grid Cells */
	/* div#container main.main div.grid div.cell {} */
}