Basic layout and style

sass/_fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;700&display=swap');

sass/style.scss

@@ -0,0 +1,105 @@
+@import "fonts";
+
+* {
+	box-sizing: border-box;
+}
+
+html, body, h1, h2, h3, p, ul, li {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	line-height: 1.6;
+	font-size: 16px;
+	color: #333;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	&>* {
+		width: 100%;
+	}
+}
+
+.wrap {
+	width: 100%;
+	max-width: 50em;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+nav {
+	min-height: 10em;
+	display: flex;
+	align-items: center;
+	border-bottom: 8px solid;
+	border-image: linear-gradient(to right, #BF616A 20%, #D08770 20%, #D08770 40%, #EBCB8B 40%, #EBCB8B 60%, #A3BE8C 60%, #A3BE8C 80%, #B48EAD 80%) 5;
+
+	.wrap {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		padding: 0 1em;
+
+		ul {
+			list-style: none;
+			display: flex;
+		}
+
+		a {
+			display: block;
+			padding: 1em;
+			color: inherit;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+}
+
+a {
+	text-decoration: none;
+	color: #fff;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+header {
+	min-height: 35em;
+	background-color: #fff;
+	background-image:  url('img/forest.svg'), url('img/panorama.jpg');
+	background-size: contain, cover;
+	background-position: center bottom -4px, center center; // -4px fixes a visible line on some resolutions
+	background-repeat: no-repeat, no-repeat;
+	color: #fff;
+
+	.wrap {
+		padding: 5em 1em;
+	}
+
+	h1 {
+		font-size: 2.5em;
+		margin-bottom: 1.5em;
+	}
+}
+
+section {
+	padding: 3em 1em;
+}
+
+footer {
+	background-color: #333;
+	color: #fff;
+	text-align: center;
+	padding: 1em;
+	margin-top: auto;
+}