* {
	margin: 0;
	padding: 0;
}

:root {

	/*					COLORS				 */

	/*					BODY				 */
	--body-background: #ffffff;
	--body-color: #000000;
	--body-a: #0000b3;
	--body-a-hover: #008a9f;
	--body-a-visited: #8d00c0;
	--body-a-active: #bc0009;

}

.darkmode {

	/*					COLORS				 */

	/*					BODY				 */
	--body-background: #101010;
	--body-color: #ffffff;
	--body-a: #68b1ff;
	--body-a-hover: #0ad2ff;
	--body-a-visited: #e15eff;
	--body-a-active: #ff6363;

}



html {
	font-family: sans-serif;
	font-size: 1rem;
}

body {
	background-color: var(--body-background);
	color: var(--body-color);
}

main a {
	color: var(--body-a);
}

main a:visited {
	color: var(--body-a-visited);
}

main a:hover {
	color: var(--body-a-hover);
}

main a:active {
	color: var(--body-a-active);
}


h1 {
	font-size: 2.3rem;
	padding: 0.3em 1em 0 5.5%;
}

h2 {
	font-size: 1.7rem;
	padding: 0.8em 0 0.5em 0;
}

h3 {
	font-size: 1.3rem;
	padding: 0.8em 0 0.58em 0;
}

h4 {
	text-decoration: underline;
	font-size: 1.05rem;
	padding: 0.86em 0 0.52em 2em;
}

main {
	padding: 0.6rem 5.5%;
}

p {
	padding: 0.5em 1%;
}


nav {
	padding: 1.2em 9% 2em 6%;
	font-size: 0.896em;
}

nav li{
	list-style: none;
	padding: 0.41em 1.1em;
	border-bottom: 1px solid #b9b9b9;
}

nav li:hover{
	background-color: #e1e1e1;
}

nav li:first-child{
	border-top: 1px solid #b9b9b9;
}

nav a{
	text-decoration: none;
}

nav a:hover{
	color: #bc0009;
	text-decoration: underline;
}