@font-face {
	font-family: 'Poppins';
	src: url('./assets/fonts/poppins/Poppins-Regular.ttf');
	font-weight: 400;
}

@font-face {
	font-family: 'Poppins';
	src: url('./assets/fonts/poppins/Poppins-SemiBold.ttf');
	font-weight: 600;
}

@font-face {
	font-family: 'Poppins';
	src: url('./assets/fonts/poppins/Poppins-ExtraLight.ttf');
	font-weight: 200;
}

:root {
	--clr-red: hsl(0, 78%, 62%);
	--clr-cyan: hsl(180, 62%, 55%);
	--clr-orange: hsl(34, 97%, 64%);
	--clr-blue: hsl(212, 86%, 64%);
	--clr-shadow: hsl(212, 23%, 87%);

	--clr-very-dark-blue: hsl(234, 12%, 34%);
	--clr-grayish-blue: hsl(229, 6%, 66%);
	--clr-very-light-gray: hsl(0, 0%, 98%);
	--clr-white: rgb(255, 255, 255);

	--card-max-width: 325px;
	--card-top-border-size: 5px;

	font-size: 15px;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	font-family: 'Poppins', sans-serif;

	background-color: var(--clr-very-light-gray);
	color: var(--clr-very-dark-blue);

	min-height: 100dvh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
}

/*** Header ***/

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	max-width: var(--card-max-width);

	margin-top: 4rem;
}

.header-title {
	font-weight: 200;
}

.header-subtitle {
	font-weight: 600;
}

.header-title,
.header-subtitle {
	font-size: 1.6rem;
	line-height: 1ch;
}

header > p {
	text-align: center;
	color: var(--clr-grayish-blue);
	font-size: 1rem;

	margin-top: 1.8rem;
	margin-bottom: 3rem;

	max-width: 34ch;
}

/*** Main ***/
main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;

	margin-block: auto;

	width: 100%;
}

/*** Card ***/

.card {
	position: relative;
	background-color: var(--clr-white);

	width: 100%;
	max-width: var(--card-max-width);

	padding-inline: 2rem;
	padding-block: 1rem;

	/* border-top: var(--card-top-border-size) solid; */
	border-radius: 10px;

	box-shadow: 0px 10px 20px var(--clr-shadow);

	overflow: hidden;
}

.card::before {
	content: '';
	position: absolute;
	inset: 0;
	height: var(--card-top-border-size);
}

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

.card > p {
	font-weight: 200;
}

.card > picture {
	display: flex;
	justify-content: end;

	margin-top: 2.8rem;
	margin-bottom: 1rem;
}

/*** Card Border Colors ***/

.card[data-card-type='supervisor']::before {
	background-color: var(--clr-cyan);
}

.card[data-card-type='team_builder']::before {
	background-color: var(--clr-red);
}

.card[data-card-type='karma']::before {
	background-color: var(--clr-orange);
}

.card[data-card-type='calculator']::before {
	background-color: var(--clr-blue);
}

/*** Footer ***/

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10rem;
	padding-bottom: 0.6rem;
	width: 100%;
	color: var(--clr-grayish-blue);
}

.attribution {
	font-size: 11px;
	text-align: center;
}
.attribution a {
	color: hsl(228, 45%, 44%);
}

/*** Desktop ***/

@media screen and (min-width: 1280px) {
	:root {
		--card-max-width: 375px;
	}

	header {
		max-width: 64ch;
		margin-top: 6rem;
		margin-top: auto;
	}

	.header-title,
	.header-subtitle {
		font-size: 2.4rem;
		line-height: 0.8ch;
	}

	header > p {
		max-width: 56ch;
	}

	main {
		display: grid;
		gap: 2rem;
		justify-content: center;
		align-content: center;
		margin-top: 0;
	}

	.card[data-card-type='supervisor'] {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.card[data-card-type='team_builder'] {
		grid-column: 2;
		grid-row: 1;
	}

	.card[data-card-type='karma'] {
		grid-column: 2;
		grid-row: 2;
	}

	.card[data-card-type='calculator'] {
		grid-column: 3;
		grid-row: 1 / span 2;
	}
}