:root {
	--bar-width: 60px;
	--bar-height: 8px;
	--hamburger-gap: 6px;
	--foreground: #4b4b4b;
	--background: white;
	--hamburger-margin: 25px;
	--animation-timing: 300ms ease-in-out;
	--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu {
	--x-width: calc(var(--hamburger-height) * 1.41421356237);
	position: absolute;
	top: var(--hamburger-margin);
	right: var(--hamburger-margin);
	display: flex;
	flex-direction: column;
	gap: var(--hamburger-gap);
	width: max-content;
	cursor: pointer;
	z-index: 10;
}

.hamburger-menu.checked {
	--foreground: white;
	--background: #333;
}

.hamburger-menu.checked::before,
.hamburger-menu.checked::after,
.hamburger-menu input:focus-visible {
	border: 1px solid var(--background);
	box-shadow: 0 0 0 1px var(--foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: '';
	width: var(--bar-width);
	height: var(--bar-height);
	background-color: var(--foreground);
	border-radius: 9999px;
	transform-origin: left center;
	transition: opacity var(--animation-timing), width var(--animation-timing),
		rotate var(--animation-timing), translate var(--animation-timing),
		background-color var(--animation-timing);
}

.hamburger-menu input {
	appearance: none;
	padding: 0;
	margin: 0;
	outline: none;
	pointer-events: none;
}

.hamburger-menu.checked::before {
	rotate: 45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu.checked::after {
	rotate: -45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked {
	opacity: 0;
	width: 0;
}

.mask {
	position: fixed;
	top: 0;
	left: 100vw;
	height: 100vh;
	width: 100vw;
	background: rgba(52, 52, 52, 0.5);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	z-index: 8;
	transition: left var(--animation-timing);
}

.hamburger-menu.checked + .mask {
	left: 0;
}

.sidebar {
	position: fixed;
	top: 0;
	right: -25rem;
	width: 25rem;
	height: 100vh;
	padding: 0.5rem 1rem;
	padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
	background-color: var(--foreground);
	color: var(--background);
	z-index: 9;
	transition: right var(--animation-timing);
}

.hamburger-menu.checked + .mask .sidebar {
	right: 0;
}

.container ul {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.container ul li {
	position: relative;
	list-style: none;
}

.container ul li a {
	position: relative;
	font-family: 'Gill Sans', sans-serif;
	font-size: 2em;
	line-height: 1em;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	text-decoration: none;
	color: transparent;
	-webkit-text-stroke: 1px rgba(225, 225, 225, 0.5);
	cursor: pointer;
}

.container ul li a::before {
	content: attr(data-text);
	position: absolute;
	width: 0;
	color: var(--color);
	overflow: hidden;
	transition: 0.5s;
	border-right: 4px solid var(--color);
	-webkit-text-stroke: 1px var(--color);
}

.container ul li a:hover::before {
	width: 100%;
	filter: drop-shadow(0 0 25px var(--color));
}

@media screen and (max-width: 768px) {
	.hamburger-menu::before,
	.hamburger-menu::after,
	.hamburger-menu input {
		content: '';
		width: 30px;
		height: 3px;
	}
	.hamburger-menu.checked::before,
	.hamburger-menu.checked::after {
		width: 36px;
	}
}

@media screen and (max-width: 480px) {
	.sidebar {
		width: 100vw;
		right: -100vw;
	}
}