* {
	margin: 0;
	padding: 0;
}

:root {
	--card-title-border-color: #746615;
	--card-color-primary: #f7dd43;
	--card-bg-color: #1d1c19;
}
body.blue {
	--card-title-border-color: #0066ff;
	--card-color-primary: #0066ff;
	--card-bg-color: #1d1c19;
}

ul {
	list-style: none;
}

body {
	background-color: #121214;
	background-image: url(./assets/bg-blue.svg);
	background-position-x: center;
	background-position-y: -715px;
}
body * {
	font-family: "Roboto", sans-serif;
}

#app {
	width: fit-content;
	margin: 52px auto;
}

header {
	margin-bottom: 63px;
	text-align: center;
}
#cards {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.card {
	padding: 32px 23px;
	text-align: center;

	background: var(--card-bg-color);
	border-bottom: 2px solid var(--card-color-primary);
	border-radius: 6px;
}

.card h2 {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;

	padding: 8px 16px;
	border: 1px solid var(--card-title-border-color);
	border-radius: 6px;

	width: fit-content;
	margin-inline: auto;
	margin-bottom: 53px;

	color: #f7dd43;
}
.card h2 span {
	color: #e1e1e6;
	font-size: 14px;
	text-transform: uppercase;
}
.card ul {
	display: flex;
	flex-direction: column;
	gap: 24px;

	width: 270px;
}
.card ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card ul li + li {
	padding-top: 24px;
	border-top: 1px solid #323238;
}

.card ul li strong {
	font-weight: 900;
	font-size: 36px;

	color: #e1e1e6;
}

.card h2:hover,
.card ul li strong:hover,
.card ul li img:hover {
	transform: scale(1.1);
}

.card h2,
.card ul li strong,
.card ul li img {
	transition: transform 0.3s;
}

.card {
	opacity: 0;
	animation: appear 0.4s forwards;
}

@keyframes appear {
	0% {
		transform: translateY(-50px);
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media (min-width: 700px) {
	#cards {
		max-width: 670px;
		flex-direction: row;
		flex-wrap: wrap;
	}
}