@import url(reset.css) layer(reset);

@layer reset, card, utility;

@layer card {
	:root {
		--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%);
	}

	body {
		font-size: 1rem;
	}

	main {
		/* to be altered in social media query */
		max-width: 327px;
	}

	/* typography */

	.card-social {
		text-align: center;
		/* is shared can do media queries simpler */
		font-size: 0.875rem;
		font-family: "Inter", serif;
	}

	.card-social-title {
		font-size: 1.5rem;
		font-weight: 600;
	}

	.card-social-location,
	.card-social-link {
		font-weight: 700;
	}

	.card-social-location {
		color: var(--green);
	}

	.card-social-link {
		text-decoration: none;
	}

	/* layout */

	.flex-container-col {
		display: flex;
		flex-direction: column;
	}

	.flex-container-center {
		justify-content: center;
		align-items: center;
	}

	.card-social {
		background-color: var(--grey-800);
		padding: 1.5rem;
		color: white;
		border-radius: 0.75rem;
	}

	.card-social-img {
		/* declare local var with local var syntax */
		--_size: 88px;
		width: var(--_size);
		height: var(--_size);
		border-radius: 50%;
	}

	.card-social-links {
		list-style-type: none;
		padding: 0;
		width: 100%;
	}

	.card-social-item {
		margin-bottom: 1rem;
	}

	.card-social-link {
		padding: 0.75em 0;
		display: block;
		background-color: var(--grey-700);
		border-radius: 0.5rem;

		&:hover {
			cursor: pointer;
			background-color: var(--green);
			color: var(--grey-700);
		}
	}

	/* footer */
	.attribution {
		font-size: 11px;
		text-align: center;

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

	@media screen and (width > 768px) {
		main {
			max-width: 456px;
		}
		.card-social {
			width: 456px;
		}
	}

	@media screen and (width > 1440px) {
		main {
			max-width: 384px;
		}
		.card-social {
			width: 304px;
		}
	}
}
@layer utility {
	.mt-med {
		margin-top: 1.5rem;
	}
	.padding-med {
		padding: 1.5rem;
		/* should you really do this works in this example...? */
		@media screen and (width > 768px) {
			padding: 2.5rem;
		}
	}
	.mh-100dvh {
		/* simply to have it go to center of screen */
		min-height: 100dvh;
	}
}