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



* {box-sizing:border-box;}




/* :root {font-size:1rem;} */
/* html {background-color:#0A1857;} */
body {font-family:Nunito,sans-serif; margin:0; /* touch-action:pinch-zoom; */}
.frozen {overflow:hidden;}



/* Main Container */

div#container {background-color:var(--black1); background-color:white; min-height:100vh; padding:.25rem;}
div#container {display:flex; flex-direction:column; justify-content:flex-start; align-items:center; align-items:stretch;}
/* div#container {filter:drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 6px); perspective:75rem;} */

div#container header.header {flex:0 0 auto;}
div#container nav.switcher {flex:0 0 auto;}
div#container main.main {flex-grow:1; overflow-x:hidden; overflow-y:auto;}
div#container main.main div.inner {min-height:100%;}
div#container main.main div.inner section.page {/* min-height:100%; */ height:100%; max-height:0; overflow:hidden; transition:.25s;}
div#container main.main div.inner section.page.active {max-height:10000vh;}



/* Header Bar */
div#container header.header {background-color:var(--white); width:100%; max-width:var(--maxwidth); /* overflow-x:auto; */}
div#container header.header {padding:.75rem 1.25rem; border-radius:.5rem; margin:/* .25rem */ auto; box-shadow:var(--thinshadow);}
div#container header.header {display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
div#container header.header h1.head {flex-grow:1; color:var(--gdcblack); font-size:1.5rem; font-weight:lighter; white-space:nowrap; margin:0;}
div#container header.header h1.head {display:flex; align-items:center; cursor:pointer; user-select:none;}
div#container header.header h1.head img.logo {/* display:none; */ height:1em; object-fit:cover; opacity:.875; margin-right:.5rem;}
/* div#container header.header div.btnpanel.ud {} */
/* div#container header.header div.btnpanel.eou {} */
div#container header.header div.btnpanel {display:flex; align-items:center; position:relative;}
div#container header.header div.btnpanel div.userbox {position:absolute; top:100%; background-color:var(--white); overflow-y:auto; padding-top:.5rem; border-radius:.5rem;}
div#container header.header div.btnpanel div.userbox div.btn {margin:.5rem;}
/* div#container header.header div.btnpanel div.userbtn {} */
div#container header.header div.btnpanel div.userbox {max-height:0; overflow:auto; transition:.25s;}
div#container header.header div.btnpanel div.userbtn.active + div.userbox {max-height:50vh;}
div#container header.header div.btnpanel div.btn {display:grid; place-items:center; padding:.5rem .75rem .375rem; border-radius:.5rem; margin:0 .125rem;}
div#container header.header div.btnpanel div.btn {background-color:var(--blue); color:white; font-size:1rem; text-decoration:none;}
div#container header.header div.btnpanel div.btn {background-color:whitesmoke; color:var(--gdcblack); cursor:pointer; user-select:none; box-shadow:var(--thinshadow);}
div#container header.header div.btnpanel div.btn {margin-left:.5rem;}
/* div#container header.header div.btnpanel div.deltabtn {} */
/* div#container header.header div.btnpanel div.memorybtn {} */
div#container header.header div.btnpanel div.btn svg.icon {display:block; font-size:1.125rem;}
div#container header.header div.btnpanel div.deltabtn svg.icon.caret {display:none;}
div#container header.header div.btnpanel div.deltabtn svg.icon.chevron {display:none;}
div#container header.header div.btnpanel div.deltabtn svg.icon.caretfill {display:block;}
div#container header.header div.btnpanel div.togglebtn {padding-left:.5rem; padding-right:.5rem; margin-left:.5rem;}
div#container header.header div.btnpanel div.togglebtn svg.icon {font-size:1.5rem;}



/* Navigation Bar */

div#container nav.switcher {display:flex; justify-content:flex-start; width:100%; max-width:var(--maxwidth); margin:.25rem auto; margin:0 auto;}
div#container nav.switcher {max-height:0; transition:.25s ease-in-out;}
div#container nav.switcher.active {max-height:3.5rem;}
div#container nav.switcher ul.navlist {list-style:none; padding:0; padding:.75rem 0; border-radius:.5rem; margin:0; overflow:hidden;}
div#container nav.switcher ul.navlist {display:flex; flex-direction:row; justify-content:start; align-items:center; position:relative; overflow:visible;}
div#container nav.switcher ul.navlist li {flex:0 0 0; min-width:8.5rem; border-radius:inherit; transition:.5s;}
div#container nav.switcher ul.navlist li.navitem {text-align:center; position:relative; /* z-index:20; */}
div#container nav.switcher ul.navlist li.navitem img.bg {display:none;}
div#container nav.switcher ul.navlist li.navitem img.bg {position:absolute; top:0; left:0; height:100%; width:100%; z-index:-1; object-fit:cover; object-position:top;}
div#container nav.switcher ul.navlist li.navitem input {display:none;}
div#container nav.switcher ul.navlist li.navitem label.navlabel {font-size:1rem; padding:.5rem 1rem;}
div#container nav.switcher ul.navlist li.navitem label.navlabel {display:block; cursor:pointer; user-select:none;}
div#container nav.switcher ul.navlist li.navitem label.navlabel {color:#AAA; text-align:center; transition:.5s;}
div#container nav.switcher ul.navlist li.navitem input:checked + label.navlabel {color:white; color:var(--gdcblack);}
div#container nav.switcher ul.navlist li.navitem span.tooltip {display:none;}
div#container nav.switcher ul.navlist li.navitem span.tooltip {position:absolute; top:50%; left:50%; transform:translate(-50%,1rem); /* z-index:10; */}
div#container nav.switcher ul.navlist li.navitem span.tooltip {background-color:var(--black,#333); color:white; font-size:.75rem; text-align:center; white-space:nowrap; padding:.375rem .75rem; border-radius:.25rem;}
div#container nav.switcher ul.navlist li.navitem span.tooltip::before {position:absolute; bottom:100%; left:50%; transform:translateX(-50%);}
div#container nav.switcher ul.navlist li.navitem span.tooltip::before {content:''; display:block; width:0; height:0; border:.5rem solid transparent; border-bottom-color:#333;}
div#container nav.switcher ul.navlist li.navitem span.tooltip {visibility:hidden; opacity:0; transition:.125s;}
div#container nav.switcher ul.navlist li.navitem:hover span.tooltip {visibility:visible; opacity:1;}
div#container nav.switcher ul.navlist li.switch {position:absolute; bottom:0; left:0; /* z-index:10; */}
div#container nav.switcher ul.navlist li.switch {height:100%; height:.125rem; border-radius:1rem; margin-bottom:.125rem;}
div#container nav.switcher ul.navlist li.switch {display:flex; flex-direction:row; justify-content:center; /* transition:.125s; */}
div#container nav.switcher ul.navlist li.switch::after {content:''; background-color:var(--white); background-color:var(--gdcblack); width:50%;}
div#container nav.switcher ul.navlist li.switch {display:none;}
div#container nav.switcher {overflow:auto; /* IE & Edge */ -ms-overflow-style:none; /* Firefox */ scrollbar-width:none;}
div#container nav.switcher::-webkit-scrollbar {/* Chrome / Safari / Opera */ display:none;}
div#container nav.switcher.debug ul.navlist li.navitem input {display:inline-block;}



/* Page Container */

div#container main.main {background-color:var(--frost); background-color:var(--black2); background-color:white; box-shadow:var(--thinshadow);}
div#container main.main {width:100%; max-width:var(--maxwidth); /* padding:0 1rem; */ border-radius:.5rem; margin:.25rem auto; margin:0 auto;}
div#container main.main div.inner {display:flex; flex-direction:row; align-items:flex-start; transition:.5s;}
div#container main.main div.inner section.page {flex:0 0 auto; width:100%;}





@media screen and (max-width:52rem) {

	/* Main Container */
	
	/* Header Bar */
	div#container header.header div.btnpanel div.deltabtn {padding:.5rem .25rem .375rem;}
	/* div#container header.header div.btnpanel div.memorybtn {display:none;} */
	div#container header.header div.btnpanel div.deltabtn svg.icon.caret {display:none;}
	div#container header.header div.btnpanel div.deltabtn svg.icon.chevron {display:block;}
	div#container header.header div.btnpanel div.deltabtn svg.icon.caretfill {display:none;}

	/* Navigation Bar */
	div#container nav.switcher {flex-direction:column;}
	div#container nav.switcher.active {max-height:12rem;}
	div#container nav.switcher ul.navlist {flex-direction:column; align-items:stretch; text-align:center;}
	div#container nav.switcher ul.navlist li {min-width:7rem;}
	/* div#container nav.switcher ul.navlist li.navitem {} */
	div#container nav.switcher ul.navlist li.navitem label.navlabel {font-size:1rem; padding:.5rem .25rem;}
	div#container nav.switcher ul.navlist li.switch {display:none;}
	/* Navigation Bar (old version) */
	/* div#container nav.switcher {justify-content:center;} */
	/* div#container nav.switcher ul.navlist {background-color:white; display:grid; grid-template-columns:repeat(2,1fr); grid-gap:.5rem; padding:.5rem;} */
	/* div#container nav.switcher ul.navlist li.navitem {background-color:#0008; display:grid; place-items:center; min-width:8rem; min-height:6rem;} */
	/* div#container nav.switcher ul.navlist li.navitem:first-child {grid-column:1 / span 2;} */

	/* Page Container */
}