:root {
	--white: hsl(0, 0%, 100%);
	--slate300: hsl(212, 45%, 89%);
	--slate500: hsl(216, 15%, 48%);
	--slate900: hsl(218, 44%, 22%);
}

body {
	background-color: var(--slate300);
}

.main {
	display: grid;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.card {
	width: 15.35rem; /* 240px */
	background-color: var(--white);
	border-radius: 0.625rem; /* 10px */
	padding: 1em; /* 16px */
	text-align: center;
}

h1,
p,
.attribution {
	font-family: 'Outfit', serif;
	font-optical-sizing: auto;
}

p {
	font-size: 0.9375rem; /* 15px */
	line-height: 1.4;
	color: var(--slate500);
	font-weight: 400;
}
h1 {
	font-size: 1.2875rem; /* 20.6px */
	color: var(--slate900);
	font-weight: 700;
}

img {
	width: 100%;
	border-radius: 0.625rem; /* 10px */
}
.attribution {
	font-size: 11px;
	text-align: center;
	align-self: end;
	margin-bottom: 2em;
}
.attribution a {
	color: hsl(228, 45%, 44%);
}