/* ====== Main Nav ====== */
.main-nav {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-inline: 1em;
	height: 3em;
	width: 100%;
	background: #2f3a65;
	box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1);
	z-index: 2;
	.menu {
		display: flex;
		align-items: start;
		gap: 1em;
		list-style: none;
		&:hover a {
			opacity: 0.7;
		}
		a {
			display: block;
			color: #d7e7f7;
			text-decoration: none;
			padding: 0.5em; 
			transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
			&:hover {
				transform: translateY(-3px);
				opacity: 1;
			}
		}
	}
}
/* ====== Hamburger ====== */
.menu-icon {
	display: none;
}
#menu-toggle {
	display: none;
}

@media screen and (width <= 700px) {
	.menu {
		flex-direction: column;
		align-items: start;
		position: absolute;
		top: 3em;
		left: 0;
		padding-inline: 3em;
		padding-block: 1.5em 3em;
		background: #2f3a65;
		border-radius: 0 0 0.7em 0;
		box-shadow: 0.3em 0.3em 3em #0000;
		transform: translateX(-100%);
		transition: transform 0.2s ease-in-out;
	}
	.menu-icon {
		display: grid;
		place-items: center;
		width: 2.5em;
		height: 35px;
		cursor: pointer;
	}
	.menu-icon > * {
		grid-area: 1/1;
	}

	.bar {
		width: 1.5em;
		height: 3px;
		background: #fff;
		border-radius: calc(infinity * 1px);
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
	.top {
		transform: translateY(-9px);
	}
	.bottom {
		transform: translateY(9px);
	}

	#menu-toggle:checked ~ .menu {
		transform: translateX(0);
		box-shadow: 0.3em 0.3em 1.5em -0.5em #161616;
	}
	#menu-toggle:checked ~ .menu-icon > .top {
		transform: rotate(45deg) translateY(0);
	}
	#menu-toggle:checked ~ .menu-icon > .middle {
		transform: scaleX(0);
	}
	#menu-toggle:checked ~ .menu-icon > .bottom {
		transform: rotate(-45deg) translateY(0);
	}
}
/* ====== END HAMBURGER ====== */
/* ====== END MAIN NAV ====== */