@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:50rem;
	--pagewidth:45rem;
	/* --pagewidth:40rem; */
	--cornersize:.625rem;
	/* Open Cell Scale */
	--opencellscale:3;

	/* 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;
	/* --yellow:#e9bd0c; */
	/* --yellow:#F8BF2F; */
	/* --yellow:#f4c531; */
	--yellow:#F4D35E;
	--yellow:#ffde59;
	/* --yellow:hsl(54,76%,79%); */
}

/* 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 header.topbar {display:none;} */
div#container header.topbar {width:100%;}
div#container header.topbar div.bin {display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:1rem;}
div#container header.topbar div.bin {display:grid; grid-template-columns:1fr auto;}
div#container header.topbar div.bin {max-width:var(--pagewidth); margin:0 auto;}
/* Top Bar */
/* div#container header.topbar {position:absolute; top:0; right:0; left:0;} */
/* div#container header.topbar {min-height:4rem; padding:1rem 0; border-radius:var(--cornersize); box-shadow:var(--boxshadow);} */


/* Top Bar: Header */
div#container header.topbar div.bin h1.head {order:10;}
div#container header.topbar div.bin h1.head {display:flex; flex-direction:row; align-items:center; margin:0;}
div#container header.topbar div.bin h1.head {font-size:1.75em;}
div#container header.topbar div.bin h1.head svg.icon {font-size:1.25em; transition:.5s;}
div#container header.topbar div.bin h1.head span.caption {white-space:nowrap; margin-left:.375rem;}


/* Top Bar: Box */
/* div#container header.topbar div.bin div.box {background-color:white; padding:.5rem 1rem; padding:.625rem .75rem .75rem; border-radius:var(--cornersize); box-shadow:var(--boxshadow);} */


/* Top Bar: Session Box */
div#container header.topbar div.bin div.sessionbox {order:20;}
/* div#container header.topbar div.bin div.sessionbox {display:none;} */
div#container header.topbar div.bin div.sessionbox {display:flex; flex-direction:row; align-items:center; gap:.375rem .625rem;}
div#container header.topbar div.bin div.sessionbox {flex-direction:column; align-items:flex-end;}
div#container header.topbar div.bin div.sessionbox {position:relative;}
/* div#container header.topbar div.bin div.sessionbox {flex-direction:row-reverse;} */
/* div#container header.topbar div.bin div.sessionbox::before {content:'Session'; font-weight:700;} */

/* Top Bar: Session Saver */
div#container header.topbar div.bin div.sessionbox form.saver {position:absolute; top:100%; right:0; z-index:20; margin-top:var(--cornersize);}
div#container header.topbar div.bin div.sessionbox form.saver {background-color:white; background-color: gainsboro; border-radius:var(--cornersize); box-shadow:var(--boxshadow);}
div#container header.topbar div.bin div.sessionbox form.saver {display:flex; flex-direction:row; align-items:center; gap:.25em;}
div#container header.topbar div.bin div.sessionbox form.saver {height:0; padding:0 .5rem; transition:.25s; overflow:hidden;}
/* div#container header.topbar div.bin div.sessionbox:hover form.saver, */
div#container header.topbar div.bin div.sessionbox.show form.saver {height:auto; padding:.5rem;}
/* Top Bar: Session Saver Components */
div#container header.topbar div.bin div.sessionbox form.saver > * {padding:.375em .875em; /* padding:.5em 1em; */ border:1px solid gainsboro; border-radius:var(--cornersize);}
/* div#container header.topbar div.bin div.sessionbox form.saver {flex-direction:column; align-items:flex-end;} */
div#container header.topbar div.bin div.sessionbox form.saver input.field {/* font-size:1em; */ width:9em; outline:none;}
/* div#container header.topbar div.bin div.sessionbox form.saver button.savebtn {font-size:1em;} */
/* div#container header.topbar div.bin div.sessionbox form.saver button.savebtn span.caption {} */

/* Top Bar: Session Display */
div#container header.topbar div.bin div.sessionbox div.display {background-color:var(--forecolor); color:var(--backcolor); padding:.25em .625em; border-radius:var(--cornersize); box-shadow:var(--boxshadow);}
div#container header.topbar div.bin div.sessionbox div.display {display:flex; flex-direction:row; align-items:center; gap:.5em;}
div#container header.topbar div.bin div.sessionbox div.display span.caption {font-size:.875em; user-select:none; opacity:0;}
div#container header.topbar div.bin div.sessionbox.show div.display span.caption {opacity:1;}
/* div#container header.topbar div.bin div.sessionbox div.display span.caption:empty {} */
/* div#container header.topbar div.bin div.sessionbox div.display span.caption:empty:before {content:'---';} */
div#container header.topbar div.bin div.sessionbox div.display span.caption:empty::after {background-color:gainsboro; content:''; opacity:.625; display:block; height:.875em; width:3em; border-radius:10em;}
div#container header.topbar div.bin div.sessionbox div.display div.toggler {cursor:pointer;}
div#container header.topbar div.bin div.sessionbox div.display div.toggler svg.icon {display:none;}
div#container header.topbar div.bin div.sessionbox div.display div.toggler svg.icon.hide {display:none;}
div#container header.topbar div.bin div.sessionbox div.display div.toggler svg.icon.show {display:block;}
div#container header.topbar div.bin div.sessionbox.show div.display div.toggler svg.icon.hide {display:block;}
div#container header.topbar div.bin div.sessionbox.show div.display div.toggler svg.icon.show {display:none;}


/* Top Bar: Progress Report */
div#container header.topbar div.bin div.progressreport {order:30; grid-column:1 / span 2;}
div#container header.topbar div.bin div.progressreport {display:flex; flex-direction:row; align-items:center; gap:0 .5em; width:100%;}
div#container header.topbar div.bin div.progressreport::before {content:'Progress:';}
div#container header.topbar div.bin div.progressreport div.bar {position:relative; overflow:hidden; z-index:10;}
div#container header.topbar div.bin div.progressreport div.bar {background-color:var(--ltgrey);--ltgrey:#CCC; height:1.5rem; width:100%; /* border:.125rem solid; */ border-radius:10em;}
div#container header.topbar div.bin div.progressreport div.bar div.progress {background-color:var(--lightgreen); height:100%; width:var(--studentprogress); min-width:.125rem;}
div#container header.topbar div.bin div.progressreport div.bar div.progress {--studentprogress:0%; transition:.25s;}
/* div#container header.topbar div.bin div.progressreport div.bar div.label {display:none;} */
div#container header.topbar div.bin div.progressreport div.bar div.label {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
div#container header.topbar div.bin div.progressreport div.bar div.label {font-size:.875rem; white-space:nowrap; padding:0 1em; margin:0; margin-bottom:.25rem;}
div#container header.topbar div.bin div.progressreport div.bar div.label span.value {font-weight:bold;}
/* div#container header.topbar div.bin div.progressreport div.bar div.label span.value:empty {} */
div#container header.topbar div.bin div.progressreport div.bar div.label span.value:empty::after {content:'0%';}




/* Control Panel */
div#container aside.panel {width:100%;}
div#container aside.panel div.bin {display:flex; flex-direction:row; align-items:center; justify-content:center; gap:1rem;}
/* div#container aside.panel div.bin {flex-flow:row wrap;} */
/* div#container aside.panel div.bin {flex-flow:column nowrap;} */
div#container aside.panel div.bin {max-width:var(--pagewidth); margin:0 auto;}

/* Control Panel: Navigation */
div#container aside.panel div.bin ul.navlist {display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap;}
div#container aside.panel div.bin ul.navlist {list-style:none; padding:0; margin:0;}
div#container aside.panel div.bin ul.navlist li.navitem {padding:.25rem;}
div#container aside.panel div.bin ul.navlist li.navitem a.navlink {color:inherit; text-decoration:none;}
div#container aside.panel div.bin ul.navlist li.navitem a.navlink {display:block; font-size:.875rem; min-width:6em; text-align:center;}
div#container aside.panel div.bin ul.navlist li.navitem a.navlink {background-color:var(--forecolor); color:var(--backcolor); padding:.125em; border-radius:var(--cornersize);}
/* div#container aside.panel div.bin ul.navlist {display:none;} */

/* Control Panel: Preferences */
div#container aside.panel div.bin div.prefs {display:flex; flex-direction:column; align-items:center; gap:.25em;}
/* div#container aside.panel div.bin div.prefs {flex-direction:column-reverse;} */
/* div#container aside.panel div.bin div.prefs {flex-direction:row;} */
/* div#container aside.panel div.bin div.prefs {flex-direction:row-reverse;} */
div#container aside.panel div.bin div.prefs label.frametoggle {cursor:pointer; user-select:none;}
/* div#container aside.panel div.bin div.prefs label.frametoggle span.caption {} */
div#container aside.panel div.bin div.prefs label.frametoggle input.framestate {display:none;}
div#container aside.panel div.bin div.prefs label.frametoggle input.framestate + span.caption {color:initial; font-weight:normal;}
div#container aside.panel div.bin div.prefs label.frametoggle input.framestate:checked + span.caption {color:dodgerblue; color:#345; font-weight:bold;}
/* div#container aside.panel div.bin div.prefs select.difficultyselector {} */
div#container aside.panel div.bin div.prefs {display:none;}






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

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

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

	/* Control Panel */
	/* div#container aside.panel {} */
}

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

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

	/* Top Bar */
	/* div#container header.topbar {} */
	/* div#container header.topbar div.bin {display:flex; flex-direction:column; align-items:center;} */

	/* Control Panel */
	/* div#container aside.panel {} */
	/* div#container aside.panel div.bin {} */
	/* div#container aside.panel div.bin ul.navlist {} */
	/* div#container aside.panel div.bin ul.navlist li.navitem {} */
	div#container aside.panel div.bin ul.navlist li.navitem a.navlink {font-size:.75rem;}
}

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

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

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

	/* Control Panel */
	/* div#container aside.panel {} */
}

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

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

	/* Top Bar */
	/* div#container header.topbar {} */
	/* div#container header.topbar div.bin {} */
	/* div#container header.topbar div.bin {display:flex; flex-direction:column;} */
	/* Top Bar: Header */
	div#container header.topbar div.bin h1.head {grid-column-end:span 2;}
	div#container header.topbar div.bin h1.head {justify-content:center;}
	/* div#container header.topbar div.bin h1.head svg.icon {font-size:1em;} */
	/* Top Bar: Session Box */
	div#container header.topbar div.bin div.sessionbox {order:30;}
	/* Top Bar: Progress Report */
	div#container header.topbar div.bin div.progressreport {order:20; grid-column-end:span 1;}
	div#container header.topbar div.bin div.progressreport::before {content:initial;}

	/* Control Panel */
	/* div#container aside.panel {} */
}