/* Colours */
:root {
	--main: #28ffac;
	--alt1: #0e84ce;
}

/* Global document stuff */
html {
	height:auto;
	background: #111;
}
html, body {
	min-height: 100vh;
	font-family: Arial;
	font-size: 18px;
	color: #ece3e3;
}
body {
	margin: 0 auto;
	max-width: 120ch;
	background: #222;
}
body p {
	line-height: 1.5;
}

/* Header and navigation */
header {
	padding-top: 1em;
	display: flex;
	background: #111;
	justify-content: space-between;
}
header h2 {
	text-align: center;
}
header div {
	display: flex;
	flex-direction: column;
	flex-grow: 2;
}
header svg { /* Logo */
	fill: var(--main);
	width: 80%;
	align-self: center;
}
nav ul {
	margin: 0 auto;
	padding: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
nav ul li {
	padding: 1em;
	transition: all 0.4s;
	list-style: none;
	text-align: end;
}
nav ul li:hover {
	background-color: var(--alt1); /* --main */
}
nav ul li a, nav ul li a:visited, nav ul li a:active {
	color: #fff;
}
nav ul li a {
	vertical-align: middle;
	text-decoration: none;
}
nav ul li a.current {
	color: var(--main);
	text-decoration: underline;
}

/* Main document content */
main p:nth-child(1) {
	margin-top: 0;
}
main {
	margin: 0 auto;
	min-height: 100%;
	padding: 1em;
	border-top: 1px solid var(--main);
	/*border-image: linear-gradient(var(--main), rgba(64,130,109,0)) 30;*/
	border-image: linear-gradient(var(--main), rgba(0,0,0,0) 80%) 1;
	border-width: 1px 1px 0px 1px;
	border-style: solid;
}
main a {
	color: var(--main);
}
main ul {
	padding: 0;
	margin: 0;
}
main ul li {
	transition: all 0.4s;
	text-decoration: none;
	list-style: none;
	padding: 1em;
	border: 5px solid rgba(0,0,0,0);
}
main ul li h2 {
	margin-bottom: 0.5em !important;
}
main ul li:hover {
	border: 5px solid var(--alt1);
}
main ul li h2 {
	margin: 0;
}
main ul li aside {
	padding: 0 0 1em 0;
}

/* Trailer */
footer {
	margin: 0 auto;
	width: fit-content;
	font-size: 0.8em;
	font-weight: 100;
}

/* Small mobile */
@media (max-width: 480px) {
	nav ul {
		flex-direction: row;
		border-top: 1px solid var(--main);
	}
	header h2 {
		font-size: 1.1em;
	}
	header {
		flex-direction: column;
	}
}

/* Small mobile */
@media (min-width: 480px) and (max-width: 860px) {
	nav ul {
		flex-direction: row;
		border-top: 1px solid var(--main);
	}
	header h2 {
		font-size: 1.1em;
	}
	header {
		flex-direction: column;
	}
}

/* Tablet and mobile */
@media (min-width: 860px) and (max-width: 1024px) {
	header h2 {
		font-size: 1.1em;
	}
}

/* Desktop layout */
@media (min-width:1024px) {
}