:root {
	--header-height: 6vh;
	--menu-width: 60vw;
}


* {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font: 16px Tahoma, Verdana, sans-serif;
}

.main {
	display: grid;
	grid-template-areas: 
		"h h"
		"m c"
}

.header {
	grid-area: h;
	display: flex;
	align-items: center;
	justify-content: space-between;

}

#menubutton {
	visibility: hidden;
	padding: 0;
	margin: 0;
	border: 0 solid transparent;
}

#menu {
	grid-area: m;
	transition: width 300ms ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	user-select: none;
}

#menu > label {
	font-weight: bold;
	font-size: 1.25em;
	padding-top: 1rem;
}

#menu #templates {
	padding: 0;
	margin: 0;
	width: 100%;
}

#menu #templates > li {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	white-space: nowrap;
}

#menu #templates > li.heading {
	font-weight: bold;
	padding: 2.75rem 0 0.75rem 1rem;
	font-size: 1.1em;
}

#menu #templates > li.template {
	cursor: pointer;
	
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 0.75rem 0 0.75rem 1rem;
}

#menu #templates > li.template:not(:last-child) {
}

#menu #templates > li.template:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

#menublocklayer {
	display: none;
	background-color: transparent;
}

.content {
	grid-area: c;

	padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}




.header::after {
    content: "";
    position: absolute;
    display: block;
    width: 100vw;
    left: 0;
}

/** Sizes: **/

.header {
	height: var(--header-height);
	
	padding: 0 1rem;
	font-size: calc(var(--header-height) * 0.5);
	line-height: var(--header-height);
}

.header a {
	font-size: 0.75em;
	text-decoration: none;
	display: block;
	background-color: rgba(255,255,255,0.3);
	padding: 1rem 1rem;
	line-height: 0.75em;
	border-radius: 0.25em;
}
.header a:hover {
	background-color: rgba(255,255,255,0.5);
}

.header::after {
	height: 5px;
	top: var(--header-height);
}

#menubutton {
	width: calc(var(--header-height) - 0.5rem);
	height: calc(var(--header-height) - 0.5rem);
}
#menubutton > svg {
	width: calc(var(--header-height) - 0.5rem);
	height: calc(var(--header-height) - 0.5rem);
}

#menu {
	overflow: auto;
}

#menu::after {
    content: "";
    position: absolute;
	height: calc(100vh - 2rem);
    width: 5px;
    background: linear-gradient(to right, #aaa, transparent);
}

#menu #templates > li > img {
	width: 32px;
	height: 32px;
	margin-right: 0.5rem;
}

.content {
	height: calc(100vh - var(--header-height));
}

.content > canvas {
	max-width: 100%;
	max-height: 100%;
}

.footer {
	height: 1rem;
}


/** Colors: **/

.header  {	background-color: #1d1da1; }
.header, .header a, .header button { color: white; }
.header::after {
    background: linear-gradient(to bottom, black 0%, transparent 50%);
}

#menubutton {
	cursor: pointer;
	background-color: transparent;
}
#menubutton:hover {
	background-color: rgba(255, 255, 255, 0.25);
}
#menubutton  svg {
	stroke: white;
}


#menu    {	background-color: #eee; }

.content {	background-color: #fcfcfc; }



.footer  {	background-color: transparent; }

.content > canvas {
	border: 2px outset lightgray;
}

#download[href=""] {
	visibility: hidden
}


/** Landscapy **/
@media (min-aspect-ratio: 4/3) {
	#menu {
		width: 30vw;
		height: calc(100vh - var(--header-height));
	}

	#menu::after {
		top: calc(var(--header-height) + 2px);
		height: calc(100vh - var(--header-height) - 2px);
		left: 30vw;
	}
	
	.content {
		width: 70vw;
	}
}

/** Portraity **/
@media (max-aspect-ratio: 4/3) {
	#menubutton {
		visibility: visible;
	}
	
	#menu {
		position: fixed;
		width: 0;
		left: 0;
		top: 0;
		bottom: 0;
		height: 100vh;
	}

	#menu::after {
		top: 0;
		display: none;
	}
	
	#menu.open {
		width: var(--menu-width);
	}

	#menu.open::after {
		left: var(--menu-width);
	}

	#menublocklayer.open {
		display: block;
		position: fixed;
		left: var(--menu-width);
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	.content {
		width: 100vw;
	}
}

@media (orientation: portrait) {
}

@media (orientation: landscape) {

}