header {
	width: 92vw;
	max-width: calc(28 * var(--unit-font));
	margin: 0 auto 0 auto;
}

header img {
	display: block;
	width: 80vw;
	max-width: calc(16 * var(--unit-font));
	margin: calc(1.4 * var(--unit-font)) auto calc(1.4 * var(--unit-font)) auto;
}

body {
	color: var(--gray-dark);
	background-color: var(--gray-white);
}

main {
	font-size: var(--unit-font);
}

main p {
	text-align: justify;
	line-height: 1.15;
	margin-bottom: calc(.7 * var(--unit-font));
}

h1 {
	font-size: calc(1.4 * var(--unit-font));
	margin-bottom: .4em;
	line-height: 1.2;
}

a {
	color: var(--brand-blue);
}

.contentbars {
	width: 92vw;
	max-width: calc(40 * var(--unit-font));
	margin: 0 auto 0 auto;
	display: grid;
	grid-template-columns: calc(15 * var(--unit-font)) 1fr;
	gap: var(--unit-font);
}

.sidebar {
	position: sticky;
	top: var(--unit-font);
	align-self: start;
	font-size: calc(.8 * var(--unit-font));
	background-color: var(--gray-light);
	padding-bottom: var(--unit-font);
	border: var(--unit-border) solid var(--gray-mid);
	border-radius: calc(.35 * var(--unit-font));
	display: grid;
	grid-template-columns: repeat(auto-fill, calc(14 * var(--unit-font)));
	justify-items: stretch;
}

.linknote {
	padding: var(--unit-font) var(--unit-font) 0 var(--unit-font);
	max-width: calc(11 * var(--unit-font));
}

.linknote a {
	color: var(--gray-dark);
	font-weight: 700;
	text-decoration: none;
	background-image: linear-gradient(to top, var(--brand-pink) 0%, var(--brand-pink) 35%, transparent 35%, transparent 100%);
}

.linknote a:hover {
	color: var(--gray-dark);
	background-image: linear-gradient(to top, var(--brand-pink) 0%, var(--brand-pink) 45%, transparent 45%, transparent 100%);
}

.datenote {
	padding: var(--unit-font) var(--unit-font) 0 var(--unit-font);
	max-width: calc(11 * var(--unit-font));
}

.datenote p, .linknote p {
	margin-bottom: 0;
}

.datenote p:last-of-type {
	font-size: var(--unit-font);
}

.letter {
	margin-bottom: calc(1.5 * var(--unit-font));
}

.letter p {
	line-height: 1.3;
	margin-bottom: calc(.5 * var(--unit-font));
}

.envelope {
	display: flex;
	flex-direction: row;
	gap: var(--unit-font);
	align-items: center;
	border: var(--unit-border) solid var(--gray-mid);
	border-radius: calc(.35 * var(--unit-font));
	padding: var(--unit-font);
	margin-bottom: var(--unit-font);
}

.envelope p {
	font-size: calc(1.2 * var(--unit-font));
	margin-bottom: 0;
}

.envelope:has(a:hover) {
	background-color: var(--gray-light);
}

footer {
	width: 92vw;
	max-width: calc(40 * var(--unit-font));
	margin: var(--unit-font) auto var(--unit-font) auto;
	text-align: center;
}

.light {
	display: block;
}

.dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
	body {
		color: var(--gray-white);
		background-color: var(--gray-dark);
	}
	
	a {
		color: var(--brand-pink);
		font-weight: 600;
	}
	
	.sidebar {
		background-color: var(--gray-dim);
		border: var(--unit-border) solid var(--gray-mid);
		
		p {
			color: var(--brand-blush);
		}
		
		a {
			color: var(--brand-pink);
			text-decoration: underline;
			background-image: none;
		}
	}
	
	.linknote a:hover {
		color: var(--brand-pink);
		background-image: linear-gradient(to top, var(--brand-pink) 0%, var(--brand-pink) 22%, transparent 22%, transparent 100%);
		text-decoration: none;
	}
	
	.envelope:has(a:hover) {
		background-color: var(--gray-dim);
	}
		
	.light {
		display: none;
	}
	
	.dark {
		display: block;
	}
}

@media screen and (max-width: 66rem) {
	.contentbars {
		grid-template-columns: 1fr;
		max-width: calc(30 * var(--unit-font));
	}
	
	.sidebar {
		position: static;
	}
}