html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: "Inter", sans-serif;
}

main {
	height: 100%;
	background-color: var(--gray-900);
	color: var(--color-text-primary);
	display: grid;
	place-items: center;
}

.button {
	display: flex;
	width: 100%;
	background-color: var(--color-background-tertiary);
	border-radius: var(--spacing-100);
	padding: var(--spacing-150);
	font-size: var(--typography-preset-2-font-size);
	font-weight: var(--font-weight-bold);
	line-height: var(--typography-preset-2-line-height);
	letter-spacing: var(--typography-preset-2-letter-spacing);
	text-transform: capitalize;
	transition: background-color 0.6s ease;
	justify-content: center;
	color: var(--color-text-primary);
}

.button:hover {
	background-color: var(--color-primary);
	color: var(--color-background-secondary) !important;
}
.social-card {
	background-color: var(--color-background-secondary);
	border-radius: var(--spacing-150);	
	padding: var(--spacing-500);
	width: 24rem;
	max-width: 24rem;
}

.social-card__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-300);
	margin-bottom: var(--spacing-300);
    text-align: center;
}

.social-card__avatar {
	border-radius: 50%;
	width: 5.5rem;
	height: 5.5rem;
	object-fit: cover;
	object-position: center;
}

.social-card__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-50);
}

.social-card__location {
	color: var(--color-primary);
}

.social-card__links {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-200);
	padding: 0;
}

.social-card__link-item {
	list-style: none;
}

.social-card__link {
	text-decoration: none;
	cursor: pointer;
}

.social-card__link:visited {
	color: var(--color-text-primary);
}

@media screen and (max-width: 768px) {
	.social-card {
		padding: var(--spacing-300);
		width: 100%;
	}

	main {
		padding: var(--spacing-300)
	}
}