/* Fimm Font import */

@font-face {
	font-family: "Fimm";
	src:
	url("fonts/Fimm.otf") format("opentype"),
	url("fonts/Fimm.woff") format("woff"),
	url("fonts/Fimm.ttf");
}

@font-face {
	font-family: "TT2020";
	src:
	url("fonts/TT2020Base-Regular.woff2") format("woff2"),
	url("fonts/TT2020Base-Regular.ttf");
}

/* Header styling */

header {
	font-size: 1.8em;
	font-family: sans-serif;
	padding: 50px 100px 20px 100px;
}

header > h1 {
	margin-top: 0;
	font-family: "Fimm", serif;
}

header > h2 {
	margin: -1.8em 0 0 4em;
	font-size: 1em;
	transform: skew(-0.5rad);
}

contact {
	display: block;
	width: 100%;
	text-align: right;
	color: gray;
}

/* Main section */

main {
	font-family: "TT2020", monospace;
	padding: 20px 50px 50px 50px;
	line-height: 1.2;
}


@media (max-width: 1000px) {
	/* Formatting for mobile */

	main {
		font-size: 1.1em;
	}

	img {
		margin: 20px;
		width: 100%;
	}

	section {
		width: 100%;
	}
}

/* Variables for the photo arrangement to make it easier to tweak */
:root {
	--x: 600px;
	--y: 400px;
}

@media (min-width: 1000px) {
	/* Formatting for computer */

	img {
		width: 300px;
		position: absolute;
	}
	#finn {
		top: var(--y);
		left: var(--x);
	}
	#will {
		top: calc(var(--y) + 170px);
		left: calc(var(--x) + 50px);
	}
	#tegan {
		top: calc(var(--y) + 350px);
		left: calc(var(--x) + 25px);
	}

	section {
		width: 450px;
	}
}