:root {
	--bg: #161617;
	--fg: #c9c7cd;
	--bg-dark: #131314;

	/* Normal */
	--black: #27272a;
	--red: #f5a191;
	--green: #90b99f;
	--yellow: #e6b99d;
	--blue: #aca1cf;
	--magenta: #e29eca;
	--cyan: #ea83a5;
	--white: #c1c0d4;
	/* Bright */
	--bright-black: #353539;
	--bright-red: #ffae9f;
	--bright-green: #9dc6ac;
	--bright-yellow: #f0c5a9;
	--bright-blue: #b9aeda;
	--bright-magenta: #ecaad6;
	--bright-cyan: #f591b2;
	--bright-white: #cac9dd;
	/* Grays */
	--gray01: #1b1b1d;
	--gray02: #2a2a2d;
	--gray03: #3e3e43;
	--gray04: #57575f;
	--gray05: #757581;
	--gray06: #9998a8;
	--gray07: var(--white);
}

html, body {
	background-color: var(--bg-dark);
	max-width: 80ch;
	max-height: 100%;
	margin: auto;
}

@media (orientation: portrait) {
	html, body {
		max-width: 100% !important;
		padding: 5px !important;
	}
}

#font, p, ul, ol, h1, h2, h3, h4, h5, table {
	font-family: sans-serif;
	color: white;
}
pre {
	color: white;
}
h1 {
	font-size: 3em;
}
a {
	font-family: sans-serif;
	text-decoration: none;
	color: var(--cyan);
}
a:hover, a:active {
	text-decoration: underline;
}

#search {
	display: flex;
	align-items: center;

	#search-bar, #search-btn {
		height: 2.25em;
		background-color: var(--bg);
		color: white;
		padding: 0 15px;
		border: none;
	}
	#search-bar {
		width: 100%;
	}
	#search-bar:focus {
		outline: none;
		background-color: var(--gray01);
	}
	#search-btn {
		background-color: var(--yellow);
		color: var(--bg);
		font-weight: bold;
		cursor: pointer;
	}
	#search-btn:focus {
		outline: none;
		background-color: var(--bright-yellow);
	}
}
#search-results {
	height: 15lh;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 15px;
	overflow: scroll;
	background-color: #111112;
}