:root {
	--card-color: #201e28;
	--card-border: rgba(255, 255, 255, 0.15);
}

html {
	font-size: 100%;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body {
	background-color: #16141F;
	color: #F5F5F7;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

a {
	color: #F58275;
}

p {
	color: #DEDCE4;
	line-height: 1.55;
	text-align: left;
}

h1,
h2,
h3 {
	font-weight: 600;
	color: #F5F5F7;
}

h1 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
}

h3 {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
}

main {
	width: 80%;
	max-width: 90%;
	margin: 5rem auto;
}

main section {
	margin-bottom: 1.5rem;
}

main section p {
	margin: 0.5em 0 1em;
}

main ul {
	line-height: 1.6;
}

footer {
	margin-top: 50px;
	background-color: var(--card-color);
}

footer p {
	margin: 0;
	width: 100%;
	padding: 1.5em;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid var(--card-border);
}

.site-navigation {
	width: fit-content;
	margin: 0 auto;
	margin-top: 15px;
	padding: 25px;
	background-color: var(--card-color);
	border: 1px solid var(--card-border);
	border-radius: 100px;
	text-align: center;
}

.site-navigation a {
	font-weight: 600;
	font-size: 1.125rem;
	text-decoration: none;
}

.site-navigation a:hover {
	color: #ff9a91;
	text-decoration: underline;
}

.card {
	width: 400px;
	border-radius: 1rem;
	text-align: center;
	background-color: var(--card-color);
	border: 1px solid var(--card-border);

	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.card a {
	text-decoration: none;
	text-emphasis: none;
}

.card h2 {
	margin-top: 0;
	text-align: center;
}

.card figure {
	margin: 0;
}

.card figure figcaption {
	font-size: 0.7rem;
	line-height: 1.4;
	color: rgba(222, 220, 228, 0.8);
}

.card img {
	border-radius: 1rem;
	width: 398px
}

.card:hover {
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
	transform: translateY(-8px);
	cursor: pointer;
}

.card-content {
	padding: 25px;
	text-align: left;
}

.emphasized-text {
	color: transparent;
	background: linear-gradient(135deg, #5ebcff, #5191ff);
	background-clip: text;
}