.menu-container {
	z-index: 3;
	position: fixed;

	height: 70px;

	display: flex;
	justify-content: center;
	align-items: center;
	
	animation: menu-container-scroll 1s linear paused;
}
.menu {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	backdrop-filter: blur(6px);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.2),
		inset 0 2px 10px rgba(255, 255, 255, 0.3),
		0 8px 32px 0 rgba(0, 0, 0, 0.2);

	animation: menu-scroll 1s ease paused;

	a {
		position: relative;
		display: block;
		width: fit-content;
		color: inherit;
		text-decoration: none;
		margin: 20px 10px;
		font-size: 16px;
		font-weight: 400;
		font-family: "Instrument Sans", sans-serif;

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 1.5px;
			border-radius: 4px;
			background-color: currentColor;
			bottom: 0;
			left: 0;
			transform-origin: right;
			transform: scaleX(0);
			transition: transform 0.3s ease-in-out;
		}

		&:hover::before {
			transform-origin: left;
			transform: scaleX(1);
		}
	}
}

.menu-container.nomove {
	padding: 0px;
	left: 0px;
	right: 0px;
	top: 0px;

	animation: none;

	.menu {
		border-radius: 0px;
		background: #fcf7ed55;
		color: #000;
		animation: none;
	}
}

@keyframes menu-container-scroll {
	0% {
		padding: 10px;
		left: 15px;
		right: 15px;
		top: 15px;
	}
	95% {
		padding: 0px;
		left: 0px;
		right: 0px;
		top: 0px;
	}
}

@keyframes menu-scroll {
	0% {
		border-radius: 35px;
		background: #fcf7ed11;
		color: #fff;
	}
	95% {
		border-radius: 0px;
		background: #fcf7ed55;
		color: #000;
	}
}