@font-face {
	font-display: swap;
	font-family: "Inter";
	src: url("./assets/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: oblique 0 90deg;
}

:root {
	--size-50: calc(4 / 16 * 1rem);
	--size-100: calc(8 / 16 * 1rem);
	--size-150: calc(12 / 16 * 1rem);
	--size-175: calc(14 / 16 * 1rem);
	--size-200: calc(16 / 16 * 1rem);
	--size-300: calc(24 / 16 * 1rem);
	--size-500: calc(40 / 16 * 1rem);

	--text-preset-1: var(--size-300);
	--text-preset-2: var(--size-175);

	--c-gray-900: #141414;
	--c-gray-800: #1f1f1f;
	--c-gray-700: #333;
	--c-green: #c4f82a;
	--c-white: #fff;
}

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

body {
	font-family: "Inter", sans-serif;
	background-color: var(--c-gray-900);
}

main {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	padding: var(--size-300);
}

.card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 384px;
	height: fit-content;
	background-color: var(--c-gray-800);
	border-radius: 12px;
	padding: var(--size-500);
}

.avatar-container {
	text-align: center;
}

.avatar-container img {
	width: 88px;
	height: 88px;
	border-radius: 999px;
	margin-bottom: var(--size-300);
}

h1 {
	color: var(--c-white);
	margin-bottom: var(--size-50);
}

p.location {
	color: var(--c-green);
	margin-bottom: var(--size-300);
}

p.quote {
	color: var(--c-white);
	margin-bottom: var(--size-300);
}

.link-container {
	display: flex;
	flex-direction: column;
	gap: var(--size-200);
	width: 100%;
}

.text-preset-1 {
	font-size: var(--size-300);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

.text-preset-2 {
	font-size: var(--size-175);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

.bold {
	font-weight: 700;
}

.link-container a {
	background-color: var(--c-gray-700);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	color: var(--c-white);
	text-decoration: none;
	text-align: center;
	padding: var(--size-150);
	transition: all 0.3s ease-in-out;
}

.link-container a:hover, .link-container a:focus {
	background-color: var(--c-green);
	color: var(--c-gray-700);
}

.attribution {
	font-size: 0.6875rem;
	text-align: center;
	color: var(--c-white);
}

.attribution a {
	color: hsl(228, 45%, 44%);
}

@media (max-width: 375px) {
	.card {
		min-width: 327px;
	}
}