/* Light theme */
:root {
	--base-font-color:         rgb(16, 16, 16);
	--secondary-font-color:    rgb(0, 110, 144);
	--emphasised-font:         rgb(147, 161, 161);

	--background-color:      rgb(235, 235, 235);
	--background-highlights: rgb(174, 212, 253);

	--c-yellow:      rgb(181, 137,   0);
	--c-orange:      rgb(203,  75,  22);
	--c-red:         rgb(220,  50,  47);
	--c-magenta:     rgb(211,  54, 130);
	--c-violet:      rgb(108, 113, 196);
	--c-blue:        rgb(38,  139, 210);
	--c-cyan:        rgb(42,  161, 152);
	--c-green:       rgb(133, 153,   0);
}

/* Dark theme */
[data-theme="dark"] {
	--base-font-color:         rgb(184, 184, 184);
	--secondary-font-color:    rgb(110, 215, 247);
	--emphasised-font:         rgb(255, 255, 255);

	--background-color:      rgb(31, 31, 31);
	--background-highlights: rgb(27, 40, 52);
}

/* Global styles */

/* navbar */
nav {
	display: flex;
	flex-direction: row;
}

nav > ul {
	flex-grow: 1;
}

nav > ul > li {
	display: inline;
	margin: 10px;
}

nav > * {
	margin: 10px;
}

/* header */
header {
	display: flex;
	flex-direction: row;
}

header > h1 {
	flex-grow: 1;
}

header > button {
	align-self: center;
}

/* body */

body {
	max-width: 70%;
	background-color: var(--background-highlights);
	color: var(--base-font-color);
	margin: auto;
}

main {
	background-color: var(--background-color);
	padding: 10px;
	border-radius: 10px;
}

a {
	color: var(--secondary-font-color);
}

input[type=submit], button {
	background-color: var(--background-color);
	border-radius: 10px;
	color: var(--base-font-color);
	border: 1px solid var(--secondary-font-color);
}
	
input[type=submit]:hover, button:hover {
	background-color: var(--background-highlights);
	border: 2px solid var(--secondary-font-color);
	cursor: pointer;
}

input[type=text], input[type=password] {
	background-color: var(--background-color);
	border-radius: 2px;
	color: var(--base-font-color);
	border: 1px solid var(--secondary-font-color);
}

input[type=text]:hover, input[type=password]:hover {
	border: 2px solid var(--secondary-font-color);
}

.error {
	color: red;
}