:root{
	--color-yellow : #f8b800;
	--color-beige  : #ac7c00;
	--color-brown  : #503000;
	--color-sky    : #3cbcfc;
	--color-blue   : #0058f8;
	--color-purple : #0000bc;
	--color-orange : #f83800;
	--color-black  : #000000;
	--color-white  : #fcfcfc;
}

body { margin: 0 10vw; background-image:url("assets/backgrounds.png"); font-size: 1.1rem;
	background-size:calc(100vh * 4/3); image-rendering: crisp-edges; }
body > div { background: #000; color:#fff;
	border-left:solid var(--color-brown) 1rem; border-right:solid var(--color-brown) 1rem; }
header { background:var(--color-black) }
header a { width: 100%; text-align: center; }
nav { background:var(--color-beige);display:flex }
nav a { flex:1;padding:0.5rem;text-align:center;color:var(--color-white);
	font-size: 1.2rem; align-content: center }
nav a:hover { background:var(--color-brown) }
main { background:var(--color-yellow);flex:1;color:var(--color-black); overflow:hidden; }
main > div { overflow-y: auto }
main[data-page="play"]{padding:0}
main[data-page="about"] > div{padding: 1em }
main[data-page="devlog"] > div{padding: 1em }
main[data-page="post"] > div{padding: 1em }
a { text-decoration:none; }

iframe{width:100%; height:100%;}
h1{color: var(--color-white); background: var(--color-beige); border-left: solid 1em var(--color-brown);padding-left:1em; 
	font-size:1.5em; width:100%; margin-block-end: 0.5rem;}
p { margin-block: 0.5em}

.postMeta { font-style: italic; text-align: end; color: var(--color-brown); margin-top:-0.5rem; margin-bottom: 0.5rem }
.post a {color: var(--color-brown)}

#logo { zoom: 2; max-width:100% }

#postsFilters{flex:0.25}