* {
	font-family: IBM Plex Sans, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--light-color: hsl(210, 0%, 99%);
	--light-border: hsl(210, 0%, 90%);
	--off-light: hsl(210, 0%, 98%);
	--dark-color: hsl(210, 20%, 15%);
	--off-dark: hsl(210, 10%, 5%);
	--font-unit: clamp(.8rem, 3vw, 1rem);
	--matt-blue: hsl(227, 100%, 28%);
}

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

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

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


ul {
	list-style: none;
	margin-bottom: calc(var(--font-unit) * .5);
}

li {
	font-size: var(--font-unit);
	line-height: 1.2;
	margin-left: calc(var(--font-unit) * .5);
	margin-bottom: calc(var(--font-unit) * .2);
}

header {
	width: 8rem;
	max-width: 40vw;
	margin: 1rem auto 1rem auto;
}

header img {
	width: 100%;
}

.letter {
	width: 40rem;
	max-width: 94vw;
	margin: 1rem auto 1rem auto;
	border: .1rem solid var(--light-border);
	border-radius: calc(var(--font-unit) * .4);
	padding: calc(var(--font-unit) * 1.5);
	color: var(--dark-color);
	background-color: var(--off-light);
}

.signature {
	margin-top: calc(var(--font-unit) * .6);
	width: calc(var(--font-unit) * 6);
}

.testimony {
	width: 45rem;
	max-width: 94vw;
	margin: 0 auto 1rem auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
}

.testimony:nth-of-type(2n+1) {
	grid-template-columns: 2fr 1fr;
}

.name {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

footer {
	width: 100vw;
	padding: calc(var(--font-unit) * .6);
	margin: 1rem auto 0 auto;	
	text-align: center;
	color: var(--light-color);
	background-color: var(--matt-blue);
}

footer p {
	margin-bottom: 0;
}

@media screen and (max-width: 36rem) {
	.testimony {
		display: flex;
		flex-direction: column;
	}
	
	.testimony:nth-of-type(2n+1) {
		flex-direction: column-reverse;
	}
}