@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300&display=swap');

#nav__toggle {
	top: 50px;
	left: 50px;
	display: block;
	position: absolute;

	z-index: 999;
	user-select: none;
	-webkit-user-select: none;

	animation: 1s ease-out 0s 1 slideInFromLeft;
	font-family: 'Montserrat Alternates', sans-serif;
}

#nav__toggle input {
	top: -5px;
	left: -3px;
	width: 40px;
	height: 32px;
	display: block;
	position: absolute;

	cursor: pointer;

	opacity: 0; /* Hide this input element */
	z-index: 1000;
	-webkit-touch-callout: none;
}

#nav__toggle a {
	color: #ffffff;
	text-decoration: none;

	transition: color .3s ease;
}
#nav__toggle a.v1:hover {
	color: tomato;
}

#nav__toggle span {
	width: 33px;
	height: 4px;
	display: block;

	margin-bottom: 5px;
	position: relative;

	border-radius: 3px;
	background: #cdcdcd;

	z-index: 999;

	transform-origin: 4px 0px;

	transition: transform .5s ease-in-out,
				background .5s ease-in-out,
				opacity .55s ease;
}
#nav__toggle span:nth-child(1) {
	transform-origin: 0% 0%;
}
#nav__toggle span:nth-last-child(2) {
	transform-origin: 0% 100%;
}

/*
**	When checked, change the hamburger slices into a crossmark.
*/
#nav__toggle input:checked ~ span {
	opacity: 1;
	transform: rotate(45deg) translate(-2px, -1px);
	background: #e6e6e6;
}
#nav__toggle input:checked ~ span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(.2, .2);
}
#nav__toggle input:checked ~ span:nth-last-child(2) {
	transform: rotate(-45deg) translate(0, -1px);
}

#nav__menu {
	width: 300px;
	position: absolute;

	padding: 50px;
	padding-top: 125px;
	margin: -100px 0 0 -50px;
	border-radius: 0 0 10px 0;

	background: #202020b7;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;

	transform-origin: 0% 0%;
	transform: translate(-100%, 0);

	transition: transform .5s ease-in-out;
}

#nav__menu li {
	padding: 10px 0;
	font-size: 22px;
}

#nav__toggle input:checked ~ #nav__menu {
	transform: none;
}

@keyframes slideInFromLeft {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}