@import url("https://fonts.googleapis.com/css2?family=DM+Mono&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
body.is-preload,
#wrapper {
	background: #070b16 !important;
	color: #edf4ff !important;
	font-family: Inter, Arial, sans-serif;
	background-image:
		linear-gradient(rgba(125, 156, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(125, 156, 255, 0.035) 1px, transparent 1px);
	background-size: 42px 42px;
}
#wrapper:before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 20;
	background: linear-gradient(transparent 50%, rgba(1, 3, 9, 0.11) 50%);
	background-size: 100% 4px;
	opacity: 0.15;
}
#main {
	border-top: 0 !important;
	background: transparent !important;
}
#main > .inner {
	max-width: 1050px !important;
	padding: 95px 34px 105px !important;
	margin: auto !important;
}
#main > .inner:before {
	content: "PROJECT / MATT C. PERRY";
	display: block;
	color: #58f5e0;
	font:
		11px "DM Mono",
		monospace;
	letter-spacing: 0.14em;
	margin-bottom: 24px;
}
#main h1 {
	font:
		500 clamp(2.7rem, 6vw, 5.8rem)/0.93 "Space Grotesk",
		sans-serif !important;
	letter-spacing: -0.08em !important;
	color: #edf4ff !important;
	margin: 0 0 18px !important;
	max-width: 900px;
}
#main h2 {
	color: #58f5e0 !important;
	font:
		11px "DM Mono",
		monospace !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	margin: 0 0 42px !important;
}
#main p,
#main li {
	color: #b8c4d8 !important;
	font:
		400 1rem/1.75 Inter,
		Arial,
		sans-serif !important;
	max-width: 800px;
}
#main ul {
	margin: 25px 0 0;
	padding-left: 1.3em;
}
#main li {
	margin: 10px 0;
	padding-left: 8px;
}
#main li::marker {
	color: #58f5e0;
}
.image.main {
	display: block !important;
	margin: 0 0 43px !important;
	padding: 9px !important;
	background: linear-gradient(
		135deg,
		rgba(88, 245, 224, 0.35),
		rgba(145, 119, 255, 0.3)
	) !important;
	border: 1px solid rgba(88, 245, 224, 0.5) !important;
	box-shadow: 0 0 35px rgba(88, 245, 224, 0.1) !important;
}
.image.main img {
	display: block;
	width: 100%;
	filter: contrast(1.05) saturate(0.78) !important;
}
#footer {
	background: #090f20 !important;
	border-top: 1px solid rgba(181, 204, 255, 0.19) !important;
}
#footer > .inner {
	max-width: 1050px !important;
	padding: 55px 34px !important;
	margin: auto !important;
}
#footer h2 {
	font:
		11px "DM Mono",
		monospace !important;
	letter-spacing: 0.11em;
	color: #58f5e0 !important;
	text-transform: uppercase;
}
#footer h3,
#footer p,
#footer a {
	color: #b8c4d8 !important;
}
#footer a:hover {
	color: #58f5e0 !important;
}
#footer .icons a {
	border-color: rgba(181, 204, 255, 0.25) !important;
}
a:visited {
	color: inherit;
}
.universal-nav + #wrapper {
	min-height: calc(100vh - 64px);
}
@media (max-width: 736px) {
	#main > .inner {
		padding: 62px 22px 74px !important;
	}
	#footer > .inner {
		padding: 42px 22px !important;
	}
	#main h1 {
		font-size: clamp(2.5rem, 12vw, 4rem) !important;
	}
}