:root {
	--f-blue-color: #aebecc;
	--s-blue-color: #a3b7c6;
	--dark-blue-color: #647888;
	--main-color: #c1cdd7;
	--txt-color: #575e71;
	--int-txt-color: #13499d;

	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--main-color);
	font-family: sans-serif;
	color: var(--txt-color);
	display: flex;
	flex-direction: column;
}

body > main {
	line-height: 1.5rem;
}

button {
	border-radius: 0;
	border: none;
	height: 25px;
}

button:hover {
	box-shadow: 0px 7px 10px 0px #eaf5ff inset;
}

button:hover, button:hover > a {
	text-decoration: underline !important;
}

button:active, button:active > a {
	color: brown !important;
}

header {
	margin: 0;
	padding: 0;
	background-color: var(--dark-blue-color);
	display: flex;
	justify-content: space-between;
	z-index: 3;
}

header * {
	color: var(--main-color);
}

header a {
	text-decoration: none;
}

header > div:first-child {
	display: flex;
	flex-wrap: wrap;
}

header > div > a {
	padding: 0 5px;
	align-self: center;
	margin-bottom: 1px;
}

header > div:first-child > a:first-child > h1 {
	padding: 5px;
	margin: 0;
	cursor: pointer;
	color: var(--main-color);
}

header > div:last-child {
	padding: 0 1rem;
	margin-bottom: 2px;
	align-self: center;
}

header > div:last-child > * {
	margin-left: 5px;
}

header > div:last-child > button {
	background-color: var(--s-blue-color);
}

details {
	background-color: var(--s-blue-color);
	border-radius: 2px;
	padding: 2px;
	margin: 0.5rem;
}

details > summary {
	cursor: pointer;
}

details:open > summary {
	background-color: var(--f-blue-color);
}

a:hover, a:focus {
	text-decoration: underline;
}

a:active {
	color: #a9d9ff;
}

header > div:nth-child(2) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

select#codeeditortheme {
	position: relative;
	top: 2px;
	height: 1.5rem;
	border: none;
	width: 100%;
	color: var(--int-txt-color);
	background-color: var(--s-blue-color);
}

select#codeeditortheme > option {
	color: var(--txt-color)
}