@import url("https://fonts.googleapis.com/css2?family=Fuggles&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@400;600;900&display=swap");

/* ====== Main general typography at bottom of page ====== */
/* ====== GENERAL BODY STYLING ====== */
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-size: clamp(0.7rem, 0.7rem + 1cqi, 1rem);
}
body {
	display: grid;
	place-items: start center;
	gap: 2em;
	min-height: 100dvh;
	background: linear-gradient(to bottom in oklch, #010203 60%, #000d49);
	font-family: "Helvetica", system-ui, sans-serif;
	color: #f7f5fd;
}

main {
	display: grid;
	place-items: center;
	gap: 4em;
	margin-block: 2em;
	width: calc(100% - 2em);
	max-width: 75em;
}
header,
footer {
	display: grid;
	width: 100%;
}
header {
	gap: 0.2em;
		h1 {
			font-size: calc(1.8rem + 1.5cqi);
			letter-spacing: -1px;
			text-box: cap alphabetic;
		}
		h2 {
			line-height: 1;
			margin-block-start: 0.2em;
		}
} /* === END HEADER === */

.container {
	width: 100%;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-rows: fit-content;
	grid-template-areas:
		"pressured  identicode "
		"pink-plaques bargain";
		
		a {
			text-decoration: none;
			color: #f7f5fd;
		}

		.pressured {
			grid-area: pressured;
		}
		.identicode {
			grid-area: identicode;
		}
		.plaques {
			grid-area: pink-plaques;
		}
		.bargain {
			grid-area: bargain;
		}
} /* === END CONTAINER === */

.card {
	display: grid;
	grid-template-columns: 25% 75%;
	place-items: start;
	gap: 1em;
	padding: 1em;
	height: 100%;
	background: linear-gradient(
		60deg,
		#010203,
		#11072a 20%,
		#371580 40%,
		#010203 60%
	);
	background-size: 100% 200%;
	background-position: 20% 40%;
	outline: 1px solid #3d3f23;
	transition: background-position 0.7s ease-in-out;

	&:hover {
		background-position: 100% 100%;
		z-index: 200;

		& .icon {
			transform: scale(1.1);
		}

		& > section > div > h3 {
			border-block-end: 2px solid #f7f5fd;
		}
	}

	h4 {
	place-self: end start;
	margin-block-start: 2.5em;
	}

.icon {
	width: 100%;
	max-width: 7em;
	transform-origin: center;
	object-fit: cover;
	filter: brightness(1.2);
	transition: transform 0.7s ease-in-out;
}

section {
		display: grid;
		gap: 0em;
		width: calc(100% - 0.5em);
		height: 100%;

		h3 {
			position: relative;
			width: fit-content;
			padding-block-end: 4px;
			margin-block-end: 1em;
			border-block-end: 2px solid #0000;
			font-weight: 400;
			font-size: max(1.5rem, 2cqi);
			letter-spacing: 1px;
			transition: border-block-end 0.7s ease-in-out;
		}

		h4 {
			font-size: max(1cqi, 0.7rem);
			}
	}
} 
/* === END CARD === */

footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	padding-block-end: 1em;
	padding-inline: 0.5em;
	background: transparent;

	nav {
		display: flex;
		flex-direction: column;
		gap: 0.5em;

		a {
			font-size: 1.1rem;
			color: lightblue;
			text-decoration: none;
			padding-block: 3px;
			padding-inline: 8px;
			width: fit-content;
			border: 1px solid transparent;
			border-radius: 4px;
			transition: border 0.5s ease;

			&:hover {
				border: 1px solid currentColor;
			}
		}
	}
		p + p {
			text-indent: 2rem;
		}
		p + h4 {
			margin-block-start: 2em;
		}
		h4 {
			margin-block-end: 1em;
		}
} /* === END FOOTER === */

/* ====== GENERAL TYPOGRAPHY ====== */
h1,
h2,
h3 {
	font-family: "Exo", sans-serif;
	line-height: 1;
}
h1,
h3,
h4 {
	text-transform: uppercase;
}
h2,
h4 {
	font-weight: 200;
}
h4 {
	letter-spacing: 1px;
}
p {
	font-size: max(1rem, 1.5cqi);
	font-weight: 200;
	line-height: 1.6;
	letter-spacing: 1px;
		max-width: 55ch;
}
.no-data {
	font-size: 1rem;
	text-align: center;
}
.haiku {
	text-indent: 1.5em each-line;
	font-style: italic;
}


@media (width <= 650px) {
	.container {
		grid-template-areas:
			"pressured"
			"identicode"
			"pink-plaques"
			"bargain";
	}
	.card {
	&:hover {
		background-position: 70% 100%;
		scale: 1;
		}
	}
}
@media (width > 650px) {
	.container {
		grid-template-areas:
			"pressured identicode"
			"pink-plaques bargain";
	}
}