nav {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 4px 4px 4px hsl(0, 0%, 0%, 0.25);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: hsl(0, 0%, 93%, 0.05);
	margin: auto;
	margin-top: 19px;
	padding: 9.5px;
	width: max-content;
	display: flex;
	gap: 9.5px;
	border: 2px solid hsl(0, 0%, 93%, 0.15);
	border-radius: 50px;
}

nav a {
	border: 2px solid transparent;
	border-radius: 50px;
	padding: 7.5px;
	color: #fff;
	text-decoration: none;
  transition:
    padding 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    border 0.3s ease;
}

nav a:hover {
	border: 2px solid hsl(0, 0%, 93%, 0.15);
	box-shadow: 2px 2px 2px hsl(0, 0%, 0%, 0.25);
	background: hsl(0, 0%, 93%, 0.05);
	padding: 7.5px;
}

nav a:active {
	box-shadow: 2px 2px 2px hsl(0, 0%, 0%, 0.25) inset;
}

header {
	position: absolute;
	width: calc(100vw - 4rem);
	height: 2rem;
	display: none;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 2rem;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
	align-items: center;
  width: 25px;
  height: 20px;
  cursor: pointer;
}

#hamburger-input {
	z-index: 1000;
	width: 100%;
	height: 100%;
	opacity: 0;
}

#menu-btn, #menu-btn::after, #menu-btn::before {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

#menu-btn::before {
  content: '';
  margin-top: -8px;
}

#menu-btn::after {
  content: '';
  margin-top: 8px;
}

#hamburger-input:checked ~ #menu-btn::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#hamburger-input:checked ~ #menu-btn {
	background: transparent;
}

#hamburger-input:checked ~ #menu-btn::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

#hamburger-input:checked ~ #hamburger-menu {
	display: flex;
}

#hamburger-menu {
	align-items: start;
  display: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 -4px 4px hsl(0, 0%, 0%, 0.25);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: hsl(0, 0%, 93%, 0.05);
	margin: auto;
	justify-content: space-around;
	margin-top: 6rem;
	padding: 9.5px;
	width: calc(100% - 18px - 4px);
	flex-direction: column;
	height: calc(100vh - 6rem - 18px);
	border-radius: 0;
}

body:has(#hamburger-input:checked) {
  overflow: hidden;
}

#name {
	color: #fff;
	font-weight: bold;
	font-size: larger;
	text-decoration: none;
}

@media (max-width: 750px) {
	nav {
		display: none;
	}

	header {
		display: flex;
	}
}