header {
	background: #000000;
	width: 100%;
	box-shadow: rgba(50, 50, 93, 0.8) 0px 50px 100px -20px,
		rgba(0, 0, 0, 0.8) 0px 30px 60px -30px;
	position: sticky;
	top: 0;
	z-index: 99;
}

.logo {
	font-weight: bold;
	font-size: 1.25rem;
}

nav ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	font-size: 1rem;
	margin-bottom: 0;
}
nav ul li {
    margin-right: 20px;
}

a {
	color: inherit;
	text-decoration: none;
	width: 100%;
	height: 100%;
}

nav ul li {
	border-bottom: 2px solid transparent;
	transition: all 200ms ease;
	cursor: pointer;
}

nav ul li:hover {
	border-bottom: 2px solid #ff2424;
}

#burger {
	display: none;
}

@media (max-width: 991px) {
	#burger {
		box-sizing: initial;
		display: block;
		width: 1rem;
		color: white;
		cursor: pointer;
		margin-bottom: 0.5em;
	}

	#burger:focus {
		border: none;
		outline: none;
	}

	nav {
		position: absolute;
		right: 0;
		top: 3em;
		background: #000000;
		min-width: 10em;
		padding: 2em;
		box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
		clip-path: circle(0% at 100% 0);
		transition: all 500ms ease-in-out;
	}

	nav.show {
		clip-path: circle(200% at 100% 0);
		transition-duration: 300ms;
	}

	nav ul {
		flex-direction: column;
		padding-left: 0;
	}
}