#nav-menu {
	display: none;
	font-size: 2rem;
	cursor: pointer;
	margin-left: auto;
	padding: 0 1rem;
}

nav {
	display: flex;
	margin-left: auto;
	z-index: 1;
}

nav a {
	margin-left: 1rem;
	position: relative;
	display: inline;
	padding: 0.5rem 1.2rem 0.5rem 1rem;
	text-decoration: none;
	color: inherit;
}

nav a::before,
nav a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid black;
}

nav a::before {
	transform: translate(-0.2rem, -0.2rem);
	transition: transform 0.3s ease;
}

nav a::after {
	transform: translate(0, 0);
}

nav a:hover::before {
	transform: translate(0.2rem, 0.2rem);
}

@media (max-width: 800px) {
	header {
		position: relative;
	}

	#nav-menu {
		display: block;
	}

	nav {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		right: 2rem;
		background-color: rgba(255, 0, 255, 0.1);
		backdrop-filter: blur(0.2rem);
		box-shadow: 0 0 5px 10px rgba(255, 0, 255, 0.1);
		padding-top: 0.5rem;
	}

	nav a {
		margin: 0 0.5rem 0.5rem 0.5rem;
	}
}