@font-face {
  font-family: "VC Garamond Condensed";
  src: url("GaramondCondensed-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "VC Garamond Condensed";
  src: url("GaramondCondensed-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

* {
	font-family: 'VC Garamond Condensed';
	margin: 0;
	padding: 0;
}

:root {
	--back-color: white;
	--font-color: #222222;
	--off-color: #5A5A5A;
	--contrast-color: hsl(45, 55%, 45%);
	--blur-color: rgba(255,255,255,0.7);
}

body {
	color: var(--font-color);
	background-color: var(--back-color);
	width: 100vw;
	overflow-x: hidden;
	padding: .6rem 0 1rem 0;
}

header, main, footer {
	width: 38rem;
	max-width: 92vw;
	margin: 1rem auto 1rem auto;
}

h1 {
	font-size: 4rem;
	text-align: center;
	line-height: 1;
	margin-bottom: 1.2rem;
}

h2 {
	font-size: 2rem;
	line-height: 1;
}

p {
	font-size: 1.3rem;
	line-height: 1.25;
	text-align: justify;
	margin-bottom: .6rem;
}

footer p {
	color: var(--off-color);
	text-align: center;
	font-size: 1rem;
}

a {
	color: var(--contrast-color);
}

blockquote {
	box-sizing: content-box;
	margin: 0 0 .6rem 0;
	padding: 0 0 0 1rem;
	border-left: .1rem solid var(--off-color);
	color: var(--off-color);
}

video {
	width: 100%;
	margin-bottom: .4rem;
}

.video-wrapper:has(video[data-playing]) {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100dvw;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-items: center;
	justify-content: center;
	background-color: var(--blur-color);
	backdrop-filter: blur(.1rem);
}

video[data-playing] {
	/* width: 50rem;
	max-width: 96vw; */
	width: 96vw;
	max-height: 96vh;
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--back-color: #222222;
		--font-color: #FDFDFD;
		--off-color: #EEEEEE;
		--contrast-color: hsl(45, 55%, 65%);
		--blur-color: rgba(20,20,20,0.7);
	}
}