@charset "utf-8";

html {
	color: hsl(280, 15%, 25%);
    font-family: sans-serif;
}

body {
    background-color: hsl(0, 0%, 97.5%);
}

header {
    background-color: hsla(0, 0%, 100%, 0.75);
    box-shadow: 0 1px 1px 0 hsla(0, 0%, 0%, 0.05);
	-webkit-backdrop-filter: brightness(250%) blur(25px) saturate(250%);
	backdrop-filter: brightness(250%) blur(25px) saturate(250%);
    display: flex;
	align-items: baseline;
	position: sticky;
	top:0;
}

h1 {
	font-family: 游明朝, serif;
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0.5rem;
	margin: 0.75rem 0 0.65rem 1.75rem;
	flex: 1;
}

h1 > a {
	color: hsl(280, 15%, 25%);
	text-decoration: none;
}

nav {
	margin-right: 1.75rem;
}

nav > ul {
	list-style-type: none;
	font-family: "Helvetica Neue";
	font-weight: 300;
    text-transform: uppercase;
	letter-spacing: 0.0625rem;
	margin: 0;
	padding: 0;
	display: inline-flex;
}

nav > ul > li {
	margin-left: 1.75rem;
}

nav > ul > li:first-child {
	margin-left: 0;
}

nav a {
	text-decoration: none;
}

nav a:link,
nav a:visited {
	color: hsl(280, 15%, 25%);
}

nav a:hover,
nav a:active {
	color: hsl(280, 15%, 50%);
}

main {
	padding: 0 0 0;
}

.feature-photo {
	
}

.feature-photo > img {
	width: 100vw;
	aspect-ratio: 3/2;
	object-fit: cover;
}

footer {
	color: hsl(0, 0%, 80%);
	font-family: "Helvetica Neue";
	background-color: hsl(0, 0%, 15%);
    box-shadow: 0 -1px 1px 0 hsla(0, 0%, 0%, 0.05);
}

footer > p {
	text-align: center;
	padding: 1rem 0;
}

footer a:link,
footer a:visited {
	color: hsl(0, 0%, 80%);
}

footer a:hover,
footer a:active {
	color: hsl(0, 0%, 100%);
}