web/sass/main.scss

@import "minireset";
@import "fonts";

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: "roboto", sans-serif;
	font-size: 16px;
	color: #2E3440;
}

header {
	padding: 4rem 0;
	border-top: 5px solid;
	border-image: linear-gradient(to right, #8FBCBB 0%, #88C0D0 33%, #81A1C1 66%, #5E81AC 100%) 5;

	.wrap {
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		height: 6rem;
		max-width: 1100px;
	}

	a.logo {
		height: 100%;

		img { height: inherit; }
	}

	section {
		height: 100%;
		display: flex;
		flex-direction:column;
		justify-content: space-between;
	}

	nav {

		ul {
			display: flex;

			a {
				text-decoration: none;
				color: inherit;
				padding: 1rem;
			}
		}
	}

	nav.secondary {
		font-size: .8rem;
		color: #4C566A;

		a:hover {
			text-decoration: underline;
		}
	}

	nav.primary {
		font-weight: bold;

		a::after {
			content: "";
			display: inline-block;
			background: url("nav-arrow.svg") center center no-repeat;
			width: 1rem;
			height: .7rem;
			margin-left: .5rem;
		}
	}
}

main {
	max-width: 900px;
	width: 100%;
	margin: 0 auto 5rem auto;
	padding: 1rem;

	h1, h2, h3, h4, h5, h6 {
		font-weight: bold;
		margin: 2em 0 1em 0;
	}
	h1 { font-size: 2em }
	h2 { font-size: 1.6em }
	h3 { font-size: 1.2em }
	p {
		line-height: 1.5;
		margin: 1em 0;
	}
}

footer {
	margin-top: auto;
	padding: 3em;
	text-align: center;
	color: #ECEFF4;
	background-color: #2E3440;
	border-top: 5px solid;
	border-image: linear-gradient(to right, #BF616A 20%, #D08770 20%, #D08770 40%, #EBCB8B 40%, #EBCB8B 60%, #A3BE8C 60%, #A3BE8C 80%, #B48EAD 80%) 5;

	p:nth-child(2) {
		margin-top: 1rem;
		font-weight: bold;
	}
}