@bg: #111;
@fg-mono: contrast(@bg);
@fg-color: #e11;

// Override defaults and things a user agent shouldn't choose
* {
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	box-sizing: border-box;
}

a {
	color: @fg-mono;
	transition: color 100ms ease-in;
	&:hover { color: @fg-color }
}

img {
	max-width: 100%;
	max-height: 100%;
}

h1 { font-size: 2em }
h2 { font-size: 1.5em }
h3 { font-size: 1.25em }

html {
	background: @bg; /* Fallback */
	background:
	linear-gradient(
		0deg,
		@bg,
		fade(overlay(@bg, contrast(@fg-mono)), 50%)),
	repeating-linear-gradient(
		45deg,
		@fg-color 0% 2%,
		transparent 2% 4%
	),
	repeating-linear-gradient(
		-45deg,
		@bg 0% 2%,
		average(@bg, @fg-color) 2% 4%
	);
	color: @fg-mono;
	font-size: 1em;
	width: 100%;
	min-width: 200px;
	min-height: 200px;
	@font-face {font-family: 'Oswald'; src: url('../fonts/Oswald/static/Oswald-Regular.ttf')}
	font-family: 'Oswald', sans-serif;
	scroll-behavior: smooth;
	body {
		width: inherit;
		min-height: inherit;
		min-width: inherit;
		display: flex;
		flex-direction: column;
		.semihidden {
			display: none;
			opacity: 0;
		}
		.header {
			min-height: inherit;
			height: 100vh;
			min-width: inherit;
			width: inherit;
			position: relative;
			display: inherit;
			.content, div.slideshow span {
				min-width: inherit;
				width: inherit;
				height: inherit;
				min-height: inherit;
				position: absolute;
				top: 0;
			}
			div.slideshow {
				z-index: 0;
				min-width: inherit;
				width: inherit;
				height: inherit;
				min-height: inherit;
				span {
					&:nth-child(1) {
						background-image: url(../res/slideshow/1.jpg);
						opacity: 1;
						animation-delay: 0s;
					}
					&:nth-child(2) {
						background-image: url(../res/slideshow/2.jpg);
						animation-delay: 5s;
					}
					&:nth-child(3) {
						background-image: url(../res/slideshow/3.jpg);
						animation-delay: 10s;
					}
					&:nth-child(4) {
						background-image: url(../res/slideshow/4.jpg);
						animation-delay: 15s;
					}
					min-width: inherit;
					width: inherit;
					color: transparent;
					opacity: 0;
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
					animation: slideshow 20s infinite;
					animation-timing-function: ease-in-out; 
				}
			}
			.content {
				z-index: 1;
				display: inherit;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 1.5em;
			}
		}
		.body {
			padding: 20px 10px;
			text-align: center;
			h3 {
				margin-top: 10px;
			}
		}
		.footer {
			display: inherit;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: overlay(@bg, contrast(@fg-mono));
			padding-bottom: 5%;
			border-top: 2px solid @fg-mono;
			justify-content: center;
			text-align: center;
			.branding, .links .column {
				padding: 10px;
			}
			.links {
				display: inherit;
				flex-direction: inherit;
				flex-wrap: wrap;
				flex-grow: 1;
				.column {
					flex-grow: 1;
					display: inherit;
					flex-direction: column;
					.title {
						font-size: 1.25em;
					}
				}
			}
		}
	}
}

@keyframes slideshow { 
	0%,35%,100% { opacity: 0 }
	5%,30% { opacity: 1 }
}