@font-face {
	font-family: 'Fredoka';
	src: url('./fonts/Fredoka-VariableFont_wdth,wght.woff2') format('woff2');
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--bg: oklch(0.99 0.003 325);
	--primary: oklch(0.25 0.01 325);
	font-family: 'Fredoka', 'Arial';
	line-height: 1.6;
	scroll-behavior: smooth;
	background-color: var(--bg);
	color: var(--primary);
}

body {
	margin: 0;
}

.container {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1rem;
}

header {
	background-color: var(--primary);
	color: var(--bg);
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

nav a {
	display: block;
	padding: 1rem 2rem;
	color: inherit;
	text-decoration: none;
}

header nav a:first-child {
	padding-left: 0;
}

.row {
	display: flex;
	flex-direction: row;
	gap: 2rem;

	> * {
		border: 1px dashed blueviolet;
		padding: 1rem;
		flex-grow: 1;
	}

	> div:nth-child(1) {
		flex-grow: 2;
	}
}

.visually-hidden {
	/* Contain text within 1px box */
	height: 1px;
	overflow: hidden;
	width: 1px;
	/* Keep the layout */
	position: absolute;
	/* Remove any visible trace (e.g. background color) */
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%); /* browsers in the future */
	/* Prevent the screen reader to skip spaces between words */
	white-space: nowrap;
}

main {
	nav {
		--text: oklch(0.99 0.003 325);
		--bg: oklch(0.45 0.32 40);
	}

	nav a {
		color: var(--text);
		background-color: var(--bg);
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

		&:hover,
		&:focus-visible {
			color: var(--bg);
			background-color: var(--text);
		}
	}

	nav li:first-child {
		margin-inline-end: auto;
	}

	nav li:first-child a {
		color: inherit;
		background-color: inherit;
		font-weight: bold;
	}
}

.cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2rem;
	list-style: none;

	> li {
		position: relative;
		border-radius: 0.75rem;
		display: flex;
		flex-direction: column-reverse;
		overflow: hidden;
		min-width: 18rem;
		flex: 0 1 calc(33% - 2rem);
		box-shadow: 0 0 1rem oklch(24.963% 0.00952 325.719 / 0.264);

		> div {
			padding: 1rem;
			background-color: var(--text);

			> h3 {
				margin-top: 0;
				margin-bottom: 0.5rem;
			}
		}

		> picture img {
			width: 100%;
			height: auto;
			display: block;
			overflow: hidden;
			object-fit: cover;
		}
	}

	> li::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		background: rgba(24, 24, 205, 0.233);
		pointer-events: none;
		z-index: 4;
		border-radius: 100%;
		transition: all 0.25s ease-in-out, transform 0s ease-in-out;
	}

	> li:hover::after {
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
		border-radius: 0.75rem;
	}
}