@import 'fonts';
@import 'colors';

* {
	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 {
	margin-bottom: 1em;
}

main {
	max-width: 1200px;
	margin: auto;
}

footer {
	text-align: center;
	padding: 0.5em;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: Orbitron, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}

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

a {
	text-decoration: none;
}

figure {
	margin-bottom: 1rem;

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

	figcaption {
		display: none;
	}
}

.wrapper {
	flex: 1;
}

.nav {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5em;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	@media screen and (min-width: 800px) {
		flex-direction: row;

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

	hr {
		margin: 0.5em 40%;
	}

	.nav-logo {
		margin: 0 auto;

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

		img {
			width: 48px;
			display: block;
		}
	}

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

		&.nav-link-active {
		}
	}
}