website/components/Header.css

header {
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: var(--_translucent);
	color: var(--_font-color);
	user-select: none;
}

header div {
	max-width: var(--_wide-screen);
	margin: auto;
	padding: var(--_gap);
	display: flex;
	gap: var(--_gap);
}

header span {
	text-wrap: nowrap;
	padding: var(--_gap);
	font-size: large;
	font-weight: bolder;

	& a {
		text-decoration: none;
	}
}

header nav {
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	gap: var(--_gap);
	align-items: center;

	& > li {
		list-style: none;
		transition: border var(--_transition-delay) ease;
		border: var(--_border-size) solid transparent;

		& > a {
			display: inline-block;
			text-decoration: none;
			outline: none;
		}

		& > * {
			padding: var(--_gap-half) var(--_gap);
		}
	}

	& > li:hover,
	& > li:has(a:focus-visible),
	& > li:has(summary:focus-visible),
	& > li:has(details[open]) {
		border: var(--_border-size) solid currentColor;
	}
}

header details {
	cursor: pointer;

	& summary {
		display: flex;
		gap: var(--_gap);
		list-style: none;
		outline: none;

		&::after {
			display: inline-block;
			content: '▽';
			transition: all var(--_transition-delay) ease;
		}
	}

	&[open] summary::after {
		transform: rotate(60deg);
	}

	& ul {
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		position: absolute;
		background-color: var(--_translucent);
		backdrop-filter: blur(var(--_blur));
		border: var(--_border-size) solid currentColor;
		border-top: none;
		transform: translate(
			calc(-1 * var(--_gap) - 2px),
			calc(var(--_gap-half) + 2px)
		);
	}

	& li {
		list-style: none;
		border: none;
	}

	& li:hover,
	& li:has(a:focus-visible) {
		background-color: var(--_translucent);
	}

	& a {
		text-decoration: none;
		padding: var(--_gap) calc(var(--_gap) + 0.24rem);
		display: inline-block;
		outline: none;
	}
}

header input {
	padding: var(--_gap-half) var(--_gap);
	align-self: center;
	border: none;
	background-color: var(--_translucent);
}