@import url(https://fonts.bunny.net/css?family=abril-fatface:400);

/* Presentational styles */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-family: system-ui, sans-serif;
	font-size: 1.25rem;
}
body {
	min-height: 100dvh;
	width: 100dvw;
	background: #73862B;
}
#masthead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	width: 100%;
	padding-block: 2rem;
	padding-inline: 1rem;
	background: #004d00;
	box-shadow: -1px 22px 20px -22px rgba(0 0 0 / 0.4);
	transition: all .5s ease;
}
@media screen and (max-width: 800px) {
	#masthead {
		flex-direction: column;
		padding: 25px;
	}
	h1 {font-size: 1.5rem;}
	h2 {font-size: 1.2rem;}
}

header {
	place-self: start center;
	height: 50vh;
	display: grid;
	place-items: start center;
	/* outline: 1px dashed white; */
}
#title {
	position: relative;
	font-family: "Abril Fatface", display;
	font-size: 4vmin;
	font-weight: 400;
	color: greenyellow;
	text-align: center;
	letter-spacing: 4px;
	text-shadow: 4px 4px #613d27;
}

a {
	text-decoration: none;
	cursor: pointer;
}
h1, h2 {
	font-weight: 400;
	color: #c9fdc9;
}
h1 {
	place-self: center start;
	font-size: 2rem;
}
h2 {
	place-self: center end;
	font-size: 1.5rem;
}
p {
	margin-block-end: 1lh;
	max-width: 65ch;
	line-height: 1.4;
}

main {
	display: grid;
	place-content: center;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 1.5rem;
	width: 100%;
	margin-block-start: 40px;
	padding: 30px;
}

.content {
	aspect-ratio: 1.5 / 1;
	padding: 1em;
	background: bisque;
	border: 1px solid white;
	border-radius: 1em;
		filter: drop-shadow(5px 5px 6px rgba(0, 0, 0, .3));	
	transition: all .3s ease;
}
img {
	max-width: 100%;
	object-fit: cover;
}

footer {
	position: sticky;
	top: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2rem;
	width: 100%;
	height: 50px;
	background: #0b520f;
}

a.find-me {
  position: relative;
  margin: 0 30px 0 0;
  padding: 2px 5px 3px 5px;
  font-size: .8rem;
  text-decoration: none;
  color: #fff;
  transition: color .3s ease-in-out;
}
a.find-me:hover {
  color: dodgerblue;
}

@media (prefers-reduced-motion) {
  #masthead
 {
	transform: rotateZ(0) scale(1);
	transform-origin: none;
  }
}