@font-face {font-family: 'round'; src: url(../assets/fonts/round.woff);}
@font-face {font-family: 'square'; src: url(../assets/fonts/square.woff);}
@font-face {font-family: 'sans'; src: url(../assets/fonts/sans.woff);}

:root{
	--headroom:2.25rem;
	--sideroom:18rem;
	--burgersize:3rem;
	--menupad:0.25rem;

	--body-bg:#aaa;
	--body-fg:#000;
	--header-bg:none;
	--sidebar-bg:rgba(0,0,0,0.75);
	--sidebar-fg:#eee;
	--sidebar-button-bg:#000;
	--sidebar-button-fg:#fff;
	--menu-bg:rgba(0,0,0,0.5);
	--menu-fg:#fff;
	--menu-bghl:#000;
	--menu-fghl:#fff;
	--section-bg:none;
	--section-fg:var(--body-bg);
	--article-bg:#aaa;
	--article-fg:#000;
	--article-edge:#000;
	--article-head-fg:#cc0;
	--article-head-bg:#040;
}

header{z-index:200;position:fixed;top:0;left:0;right:0;width:100vw;height:var(--headroom);display:inline-block;background:var(--header-bg);transition:background 0.25s;}
header a.logo{border-radius:0 0 var(--block-roundness) 0;transition:text-shadow 1s,background 2s;color:white;text-shadow:0px 0px 0.5rem #440;margin:0;padding:var(--padd-thickness);font-size:1.5rem;text-decoration:none;user-select:none;padding-right:0.5rem;}
header a.logo:hover{color:white;background:rgba(0,0,0,0.75);text-shadow:0px 0px 0.5rem #ff0;}
img.headicon{float:right;height:var(--burgersize);vertical-align:top;cursor:pointer;border-radius:var(--burgersize);transition:background 0.5s;margin:0;padding:0;}
img.headicon:hover{background:var(--menu-bg);}
footer{z-index:200;position:fixed;bottom:0;left:0;right:0;}
footer a.foot,footer a.foot:visited{color:#eee;background:var(--header-bg);text-shadow:var(--shade);transition:color 1s,text-shadow 2s,background 2s;margin:0;padding:var(--padd-thickness) var(--block-roundness);text-decoration:none;border-radius:var(--block-roundness) var(--block-roundness) 0 0;}
footer a.foot:hover,footer a.foot:visited:hover{background:var(--menu-bg);color:#fff;text-shadow:0px 0px 0.5rem #ff8;}

img.hamburger{margin:0;padding:0;height:var(--burgersize);float:right;cursor:pointer;}
img.hamburger:hover{background:var(--menu-bghl);}
div.sidebar{z-index:200;opacity:0.95;color:var(--sidebar-fg);background:var(--sidebar-bg);border-radius:var(--block-roundness) 0 0 0;overflow-y:scroll;text-align:center;display:inline-block;position:fixed;right:0;top:var(--burgersize);transition:width 0.25s;width:0;height:calc( 100vh - var(--burgersize) );margin:var(--marg-thickness);padding:0;}
div.sidebar article.login{background:#008;color:yellow;border:var(--edge-thickness) inset var(--button-edge);margin:1rem;}
div.sidebar a,div.sidebar a:visited{margin:0.5rem;background:var(--sidebar-button-bg);color:var(--sidebar-button-fg);border-radius:var(--edge-roundness);font-size:2rem;text-align:center;text-decoration:none;display:block;}
div.sidebar a:hover{background:var(--button-bghl);color:var(--button-fghl);}
div.sidebar p{text-align:center;}
form.sidebar input,form.sidebar button{width:calc(var(--sideroom) - 5rem);margin:0.5rem;}

details.menu{display:inline-block;vertical-align:top;margin:var(--edge-thickness);padding:0;border:none;}
details.menu summary{transition:background 0.5s;width:6rem;margin:0;padding:var(--menupad);border:none;vertical-align:top;border-radius:var(--tiny-roundness);color:var(--menu-fg);background:none;text-shadow:var(--shade);}
details.menu a{margin:var(--menupad) 0;padding:var(--menupad);text-align:center;display:block;text-decoration:none;border-radius:var(--block-roundness);color:var(--menu-fg);background:var(--menu-bg);}
details.menu a:hover,details.menu[open] summary,details.menu summary:hover{color:var(--menu-fghl);background:var(--menu-bghl);}
ul#header_submenu{position:fixed;top:var(--burgersize);right:0;margin:0;padding:0;}
ul#header_submenu li{display:inline;margin:0;padding:0;}

body{background:var(--body-bg);color:var(--body-fg);font-family:sans;}
section{background:var(--section-bg);color:var(--section-fg);margin-top:var(--headroom);}
article{opacity:0.9;background:var(--article-bg);color:var(--article-fg);border:var(--edge-thickness) solid var(--article-edge);}
h1.article{border-radius:var(--block-roundness);background:var(--article-head-bg);color:var(--article-head-fg);}
p.error{background:red;color:yellow;}
img.icon{border-radius:var(--xxsmall);height:4rem;padding:0;margin:0;}
form.tall{text-align:center;display:inline-block;}
form.tall input{display:block;}

input.red{font-weight:bold;color:#fff;background:linear-gradient(#f00,#800);border-color:#f00;}
input.red:hover{color:#ff0;background:linear-gradient(#800,#f00);border-color:#000;}
input.blue{font-weight:bold;color:#ff0;background:linear-gradient(#88f,#00f);border-color:#88f;}
input.blue:hover{color:#000;background:linear-gradient(#88f,#00f);border-color:#00f;}

input.round{vertical-align:middle;width:auto;border-radius:1rem;}
input[type=file].imageDrop{display:inline;cursor:pointer;width:10rem;height:10rem;background-repeat:no-repeat;background-position:50%;background-size:contain;background-image:none;text-align:center;}
input[type=range].boolean{display:inline-block;width:3rem;height:1.5rem;}
input[type=range].boolean::-webkit-slider-thumb,input[type=range].boolean::-moz-range-thumb{height:calc(1.25rem);width:calc(1.25rem);}
input[type=submit].gold,input[type=button].gold,button.gold{font-weight:bold;color:blue;background:linear-gradient(gold,#fa0);border-color:gold;}
input[type=submit].gold:hover,input[type=button].gold:hover,button.gold:hover{color:black;background:linear-gradient(yellow,gold);border-color:yellow;}
input[type=submit].gold:active,input[type=button].gold:active,button.gold:active{color:yellow;background:blue;border-color:black;}