@import 'breakpoints';
@import 'colors';
@import 'fonts';
@import 'mixins';

@keyframes cycle-link-background {
	0% {
		background-image: linear-gradient(
				to right,
				$highlight-3 0%, $highlight-3 10%,
				$highlight-1 10%, $highlight-1 20%,
				$highlight-2 20%, $highlight-2 30%,
				$highlight-3 30%, $highlight-3 40%,
				$highlight-2 40%, $highlight-2 50%,
				$highlight-3 50%, $highlight-3 60%,
				$highlight-1 60%, $highlight-1 70%,
				$highlight-3 70%, $highlight-3 80%,
				$highlight-1 80%, $highlight-1 90%,
				$highlight-2 90%,
		);
	}
	25% {
		background-image: linear-gradient(
				to right,
				$highlight-2 0%, $highlight-2 10%,
				$highlight-3 10%, $highlight-3 20%,
				$highlight-1 20%, $highlight-1 30%,
				$highlight-2 30%, $highlight-2 40%,
				$highlight-3 40%, $highlight-3 50%,
				$highlight-1 50%, $highlight-1 60%,
				$highlight-2 60%, $highlight-2 70%,
				$highlight-1 70%, $highlight-1 80%,
				$highlight-3 80%, $highlight-3 90%,
				$highlight-1 90%
		);
	}
	50% {
		background-image: linear-gradient(
				to right,
				$highlight-3 0%, $highlight-3 10%,
				$highlight-2 10%, $highlight-2 20%,
				$highlight-3 20%, $highlight-3 30%,
				$highlight-1 30%, $highlight-1 40%,
				$highlight-2 40%, $highlight-2 50%,
				$highlight-3 50%, $highlight-3 60%,
				$highlight-1 60%, $highlight-1 70%,
				$highlight-2 70%, $highlight-2 80%,
				$highlight-1 80%, $highlight-1 90%,
				$highlight-3 90%
		);
	}
	75% {
		background-image: linear-gradient(
				to right,
				$highlight-1 0%, $highlight-1 10%,
				$highlight-3 10%, $highlight-3 20%,
				$highlight-2 20%, $highlight-2 30%,
				$highlight-1 30%, $highlight-1 40%,
				$highlight-3 40%, $highlight-3 50%,
				$highlight-1 50%, $highlight-1 60%,
				$highlight-2 60%, $highlight-2 70%,
				$highlight-1 70%, $highlight-1 80%,
				$highlight-2 80%, $highlight-2 90%,
				$highlight-3 90%
		);
	}
}

* {
	font-family: Montserrat, sans-serif;
	color: $text-color;

	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: $background;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

header {
}

main {
	width: 100%;
	max-width: $large;
	margin: 0 auto;

	flex-grow: 1;
}

footer {
	border-top: 1px solid #666;
	font-size: 0.9em;
	color: $text-darker;

	width: 100%;
	max-width: $large;
	margin: 0 auto;
	padding: 0.5em;

	display: flex;
	align-items: center;
	flex-direction: column;

	@media screen and (min-width: $small) {
		flex-direction: row;

		& > :first-child {
			margin-left: auto;
		}
	}
}

h1, h2, h3, h4, h5, h6, p, ul {
	margin-top: 0.5em;
	padding: 0 0.5rem;

	&:last-child {
		margin-bottom: 0.5em;
	}
}

h1, h2, h3, h4, h5, h6 {
	@include heading;
}

h1 {
	border-bottom: 2px $text-color solid;
}

main {
	a {
		text-decoration: none;
		color: $highlight-1;
		text-shadow: -1px 1px 0 $background, 0 1px 0 $background, 1px 1px 0 $background;
		background: repeat-x center bottom / 10em 0.15em;
		background-image: linear-gradient(
				to right,
				$highlight-3 0%, $highlight-3 10%,
				$highlight-1 10%, $highlight-1 20%,
				$highlight-2 20%, $highlight-2 30%,
				$highlight-3 30%, $highlight-3 40%,
				$highlight-2 40%, $highlight-2 50%,
				$highlight-3 50%, $highlight-3 60%,
				$highlight-1 60%, $highlight-1 70%,
				$highlight-3 70%, $highlight-3 80%,
				$highlight-1 80%, $highlight-1 90%,
				$highlight-2 90%, $highlight-2 100%
		);

		&:hover, &:focus {
			animation: cycle-link-background 2s steps(4) infinite 0ms;
		}
	}
}


figure {
	margin: 1rem 0;

	img, video {
		max-width: 100%;
		display: block;
		margin: 0 auto;

		&.invert {
			filter: invert(100%);
		}

		&.fill {
			background: $fill-color;
			padding: 0.5em;
		}
	}

	figcaption {
		display: none;
	}
}

ul {
	padding-left: 1.5em;
}

iframe {
	border: none;

	width: 100%;
	height: 100vh;
	display: block;
	margin: 1rem 0;

	&.aspect-178 {
		height: 56.25vw;
		max-height: $large * 0.5625;
	}
}

.nav {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;

	&.nav-main {
		max-width: $large;
		margin: 0 auto;
		padding: 0.5em;
	}

	hr {
		margin: 0.5em 40%;
	}

	.nav-logo {
		@include heading;
		text-decoration: none;

		margin: 0 auto;

		img {
			width: 48px;
			display: inline-block;
			margin-right: 1em;
			vertical-align: middle;
		}

		@media screen and (min-width: $small) {
			margin-left: 0;
		}
	}

	.nav-link {
		align-self: center;
		padding: 0.5em;

		&.nav-link-active {
			color: $highlight-1;
		}
	}

	@media screen and (min-width: $small) {
		flex-direction: row;

		hr {
			margin: 0 0.5em;
			align-self: center;
		}
	}
}

.date {
	font-style: italic;
}