<nav class="nav">
	<ul class="nav__items">
		<li class="nav__item">
			<a href="/">Home</a>
		</li>
		<li class="nav__item">
			<a href="/about">About</a>
		</li>
		<li class="nav__item">
			<a href="/work">Work</a>
		</li>
		<li class="nav__item">
			<a href="/contact-us">Contact us</a>
		</li>
	</ul>
</nav>

:root {
	// Font
	--base-font-family: "Syne", sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semi-bold: 600;
	--font-weight-bold: 700;
	--font-weight-extra-bold: 800;

	// Colours
	--dark-black: #0e1111;
	--medium-black: #232b2b;
	--white: #ffffff;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100vw;
	height: 100vh;
}

body {
	background-color: var(--dark-black);
	font-family: var(--base-font-family);
	font-weight: var(--font-weight-regular);
}

.nav {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	padding: 2rem;
	background-color: var(--white);
}

.nav__items {
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: space-between;
	max-width: 40rem;
	margin: 0 auto;
	pointer-events: none;

	&:hover {
		> .nav__item a {
			opacity: 0.4;
		}

		> .nav__item:hover a {
			opacity: 1;
		}
	}
}

.nav__item {
	pointer-events: auto;

	a {
		color: var(--dark-black);
		text-decoration: none;
		transition: opacity 0.3s ease;
	}
}

console.clear();