@font-face {
 font-family: "Grand";
 src: url("/assets/fonts/Grand-Light-2022-01-30.woff2") format("woff2");
 font-weight: 300;
}

html, body, div, ul {
	margin: 0; padding: 0;
}

body {
	font-family: "Grand", sans-serif;
	background: #fff;
	color: #567;
	font-weight: 300;
}

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

body > footer {
	flex: 1;
}

a:link {
	color: #567;
}

a:visited {
	color: #567;
}

a:hover {
	color: #89a;
}

a:active {
	color: #456;
}

.cover {
	width: 100vw;
	height: 100vh;
	background-size: contain;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	align-items: end;
	justify-content: center;
	border-bottom: 1px solid #f46;
}

.cover section {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 0.5rem;
	margin: 1rem;
	padding: 0.5rem 0;
	position: relative;
	z-index: 9;
	max-width: 20em;
}

.cover section > * {
	margin: 0.5rem 1.5rem;
	color: rgb(0, 32, 64, 0.6);
}

.cover input {
	border: none;
	color: rgb(0, 32, 64, 0.6);
	background: rgba(0, 32, 64, 0.05);
	font-family: "Grand";
	font-size: 0.95rem;
	font-weight: 300;
	border-radius: 2rem;
	border: 1px solid rgb(0, 32, 64, 0.6);
	padding: 0.2rem 1rem;
	margin: 0;
}

.cover h2, .cover p {
	font-size: 0.95rem;
	font-weight: 300;
}

.cover strong {
	font-weight: 500;
}

body > header {
	mix-blend-mode: multiply;
}

body > header > a, body > header > ul {
	position: fixed;
	top: 0.5rem;
	z-index: 3;
}

body > header > ul {
	right: 1rem;
	top: 1rem;
}

header ul li {
	display: inline;
	margin: 0 0.5rem;
}

body > header a {
	text-decoration: none;
}

body > header > a {
	left: 1rem;
	font-weight: 300;
	font-size: 2rem;
	color: #789;
	letter-spacing: -0.04rem;
}


body > header > a:link {
	color: #789;
}

body > header > a:visited {
	color: #789;
}

body > header > a:hover {
	color: #9ab;
}

body > header > a:active {
	color: #456;
}


footer {
	display: flex;
	flex-direction: column;
	justify-content: end;
	background: #eee;
}

footer small {
	margin: 1.5rem
}

footer a {
	text-decoration: none;
	color: #456;
}

footer ul {
	list-style: none;
	margin: 4rem 1.5rem 1rem 1.5rem;
	padding: 0;
}

.three {
	background-size: cover;
}

.sold {
	color: #842;
}


/* ----------------- Mobile-ish ------------------ */
@media (max-width: 50rem) {
	.cover {
		background-attachment: scroll;
		align-items: center;
		justify-content: end;
	}

	header > ul {
		display: none;
	}

	body > header > a {
		font-size: 1.5rem;
	}

	.three {
		background-size: contain;
	}
}