/** @format */

/* Fonts */

@font-face {
	font-family: "Inter";
	src: url(../assets/fonts/Inter-VariableFont_slnt_wght.ttf) format(truetype);
	font-weight: 400 700;
	font-style: normal;
}

/* General styles */

:root {
	/* Colors */
	--green: hsl(75, 94%, 57%);
	--white: hsl(0, 0%, 100%);
	--grey-700: hsl(0, 0%, 20%);
	--grey-800: hsl(0, 0%, 12%);
	--grey-900: hsl(0, 0%, 8%);
	/* Transitions */
	--transition-duration: 300ms;
}

*,
*::before,
*::after {
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-items: center;
	min-height: 100svh;
	min-width: 100svw;
	text-align: center;
	background-color: var(--grey-900);
	font-family: "Inter", sans-serif;
	font-size: 0.875rem; /* 14px */
	color: var(--white);
}

main {
	display: flex;
	justify-content: center;
}
/* Class styles */

.profile-card {
	min-width: 85%;
	padding: 1.25rem 0.75rem 0.75rem; /* 20px 12px 12px */
	margin: 0 0.75rem 0.75rem; /* 0 12px 12px */
	border-radius: 0.625rem; /* 10px */
	display: flex;
	flex-direction: column;
	background-color: var(--grey-800);
}

.profile-card-header {
	display: flex;
	flex-direction: column;
}

.profile-picture {
	width: 5.625rem; /* 90px */
	height: 5.625rem; /* 90px */
	border-radius: 50%;
	align-self: center;
	margin-bottom: 1.25rem; /* 20px */
}

.profile-name {
	margin-bottom: 0.1875rem; /* 3px */
	font-size: 1.5rem; /* 24px */
}

.location {
	color: var(--green);
	font-weight: 600;
}

.profile-description {
	margin: 1.25rem 0 1rem; /* 20px 0 16px */
}

.social-media-list {
	display: flex;
	flex-direction: column;
}

.social-links-nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.social-media-list-element {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.social-link {
	padding: 0.75rem;
	margin: 0.5rem;
	border-radius: 0.5rem; /* 8px */
	background-color: var(--grey-700);
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	transition: background-color var(--transition-duration);
	transition: color var(--transition-duration);
}

/* Attribution */

.attribution {
	position: absolute;
	width: 100%;
	font-size: 0.6875rem /* 11px */;
	text-align: center;
}
.attribution a {
	color: var(--green);
}

/* Active states */
/* -- Disable transition at page load */
.no-transition .social-link {
	transition: none;
}
/* -- Class is removed on page load through js */

.social-link:active,
.social-link:hover {
	background-color: var(--green);
	color: var(--grey-800);
}

@media (min-width: 376px) {
	.profile-card {
		min-width: 337.5px;
		width: 22%;
		padding: 2rem; /* 32px */
	}
}