#navbar {
	display: none;
}

main {
	display: flex;
	flex-direction: column;
	gap: 5rem;
	max-inline-size: 80ch;
	margin-inline: auto;

	header {
		display: grid;
		place-content: center;
		min-block-size: 60vh;
		inline-size: 100cqi;
		margin-inline-start: calc(50% - 50cqi);
		background: radial-gradient(light-dark(oklch(from var(--white) calc(l - 0.1) c h / alpha), oklch(from var(--black) calc(l - 0.03) c h / alpha)));
		padding-inline: 0.8rem;

		p {
			font-size: 1.2rem;
			font-style: italic;
		}
	}

	h1 {
		font-size: 3.5rem;
		background: linear-gradient(315deg, light-dark(var(--black), var(--white)), var(--green));
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;

		&::selection {
			color: light-dark(var(--black), var(--bright_white));
		}
	}
}

.browse-by {
	max-inline-size: fit-content;

	ul {
		display: flex;
		flex-direction: column;
	}

	a {
		font-weight: bold;
	}
}

.recent a {
	font-weight: bold;
}

.blog-latest h2 {
	margin-block-end: 1rem;
}

.short-about {
	margin-block: 3rem;
	max-inline-size: 60ch;
	margin-inline: auto;
	text-align: justify;
}

.also-see {
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
	margin-inline: auto;
	place-content: center;

	div {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		justify-content: space-between;
		max-inline-size: 20rem;
		padding-block: 1rem;
		padding-inline: 1.25rem;
		background: var(--green_bg);
		border-radius: 10px;
	}

	a {
		text-align: end;

		&::before {
			content: "➔ ";
		}

		&::after {
			content: "";
			display: block;
			position: absolute;
			inset: 0;
		}
	}
}