/* style.css */

:root
{
	--main-bg-color:	#fff;
	--main-fg-color:	#000;
	--head-bg-color:	#048;
	--head-fg-color:	#AFF;
	--snav-bg-color:	#68c;
	--snav-fg-color:	#eee;
	--content-bg-color:	#fff;
	--content-fg-color:	#333;
	--link-fg-color:	#33a;

	--body-font-size:	100%;
	--margin:		1em;
}

html
{
	width: 100%;
	margin: 0px;
}

body
{
	margin:			0px;
	background:		var(--main-bg-color);
	color:			var(--main-fg-color);
	font-family:		monospace;
	font-size:		var(--body-font-size);
}

#wrapper
{
	width:			100%;
} 

#menu
{
	padding:		4px 20px 4px 20px;
	background:		#333;
	display:		none;
}

.link:link, .link:visited, .link:hover, .link:active
{
	color:			var(--link-fg-color);
	text-decoration:	none;
	outline:		0;
	font-size:		150%;
}

#header
{
	padding:		20px 10px 20px 10px;
	background:		var(--head-bg-color);
	color:			var(--head-fg-color);
	font-size:		300%;
}

#snav
{
	padding:		4px 10px 4px 10px;
	background:		var(--snav-bg-color);
	color:			var(--snav-fg-color);
}

#content
{
}

.flex {
	display:		flex;
}

.box
{
	margin:			var(--margin);
	border-radius:		1em;
	border:			1px solid #ccc;
	background:		var(--content-bg-color);
	color:			var(--content-fg-color);
}

.list
{
}
.list_head
{
	padding:		0.5em;
	border-bottom:		1px solid #ccc;
	background:		#eee;
	border-radius:		1em 1em 0em 0em;
}
.list_item
{
	padding:		0.5em;
	border-bottom:		1px solid #ccc;
}
.list_foot
{
	padding:		0.5em;
	border-bottom:		1px solid #ccc;
	background:		#eee;
	border-radius:		0em 0em 1em 1em;
}

@media (max-width: 500px)
{
	:root
	{
		--body-font-size:	100%;
		--margin:		5px;
	}
	.box
	{
	}
}