/*
	Based on base16 architecture for building themes
	https://github.com/chriskempson/base16
*/
:root {
	--base00: #282c34; /* Default Background */
	--base01: #353b45; /* Lighter Background */
	--base02: #3e4451; /* Selection Background */
	--base03: #545862; /* Comments, Invisibles, Line Highlighting */
	--base04: #565c64; /* Dark Foreground (Used for status bars) */
	--base05: #abb2bf; /* Default Foreground, Caret, Delimiters, Operators */
	--base06: #b6bdca; /* Light Foreground (Not often used) */
	--base07: #c8ccd4; /* Light Background (Not often used) */
	--base08: #e06c75; /* Red */
	--base09: #d19a66; /* Orange */
	--base0A: #e5c07b; /* Yellow */
	--base0B: #98c379; /* Green */
	--base0C: #56b6c2; /* Aqua */
	--base0D: #61afef; /* Blue */
	--base0E: #c678dd; /* Purple */
	--base0F: #be5046; /* Dark red */
}

* {
	font-family: Verdana;
	font-size: 16px;
	color: var(--base05);
	margin: 0;
	padding: 0;
}

html {
	height: 100%
}

body {
	background-color: var(--base00);
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	flex-direction: column;
	height: 100%;
}

a {
	text-decoration: none;
	color: var(--base0D);
}

svg, img, object {
	vertical-align: middle;
	width: 1.5em;
	height: 1.5em;
}

header {
	flex-grow: 0;
	background-color: var(--base01);
	border-bottom: 1px solid var(--base02);
	padding: .5em;
	margin: 0;
}

main {
	flex-grow: 1;
	padding-left: 1em;
}

footer {
	background-color: var(--base01);
	border-top: 1px solid var(--base02);
	padding: .5em;
	margin: 0;
}

h1 {
	margin-top: 1em;
	font-size: 150%;
	margin-bottom: 0.5em;
}

ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

li {
	padding: 1em;
	min-width: 12em;
}

li:hover {
	background-color: var(--base01);
}

li > a {
	display: block;
}

li > a > object {
	margin-right: 0.5em;
}

li > a > span {
	color: var(--base03);
	font-size: 75%;
	display: block;
	text-align: left;
	margin-left: 3em;
}

form {
	width: calc(100% - 1em);
}

form > input {
	width: calc(100% - 2em);
	padding: .5em;
}

/* SVG styles */
path.red    {fill: var(--base08);}
path.orange {fill: var(--base09);}
path.yellow {fill: var(--base0A);}
path.green  {fill: var(--base0B);}
path.aqua   {fill: var(--base0C);}
path.blue   {fill: var(--base0D);}
path.purple {fill: var(--base0E);}