@charset "UTF-8";

nav {
	position: fixed;
	z-index: 0;
	top: calc(var(--header-height));
	width: 100%;
	height: calc(var(--nav-height));
	background-color: var(--color-grey-2);
	border-top: 1px solid var(--color-grey-1);
	border-bottom: 1px solid var(--color-grey-1);
	padding: 10px;
	input {
		display: none;
	}
	label[for="menuOpenClose"] {
		display: none;
		width: 30px;
		line-height: 4px;
		cursor: pointer;
		margin-top: 2px;
		margin-right: 25px;
	}
	label[for="menuOpenClose"] span {
		display: inline-block;
		width: 24px;
		height: 1px;
		border: 1px solid black;
		margin: 0;
		background-color: var(--color-black);
		transition: all 0.5s;
	}
	input:checked + label {
		span:nth-of-type(1) {
			transform: translateY(10px) rotateZ(45deg);
		}
		span:nth-of-type(2) {
			opacity: 0;
		}
		span:nth-of-type(3) {
			transform: translateY(-9px) rotateZ(-45deg);
		}
	}
	#navContent {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
		a {
			padding: 0px 10px;
			/*border: 1px dotted green;*/
			height: 20px;
		}
	}
}

@media screen and (max-width: 900px), screen and (max-height: 900px) {
	:root {
		--nav-height: 36px;
	}
	nav {
		text-align: right;
		padding: 0;
		label[for="menuOpenClose"] {
			display: inline-block;
		}
		#navContent {
			position: absolute;
			top: 10px;
			right: 0;
			width: 0;
			height: fit-content;
			border: 1px solid var(--color-grey-1);
			background-color: var(--color-grey-2);
			border-radius: 10px;
			text-align: center;
			overflow: hidden;
			opacity: 0;
			transition: all 1s allow-discrete;
			a {
				display: inline-block;
				width: 100%;
				padding: 5px 0;
			}
			a:hover {
				background-color: var(--color-grey-0);
			}
		}
		input:checked ~ #navContent {
			display: initial;
			opacity: 1;
			right: 60px;
			width: 300px;
		}
	}
}

@media screen and (max-width: 700px) {
	nav input:checked + label {
		span:nth-of-type(3) {
			transform: translateY(-6px) rotateZ(-45deg);
		}
	}
}
@media screen and (max-height: 700px) {
	nav input:checked + label {
		span:nth-of-type(3) {
			transform: translateY(-6px) rotateZ(-45deg);
		}
	}
}
@media screen and (max-width: 600px) {
	nav input:checked + label {
		span:nth-of-type(3) {
			transform: translateY(-4px) rotateZ(-45deg);
		}
	}
}
@media screen and (max-height: 600px) {
	nav input:checked + label {
		span:nth-of-type(3) {
			transform: translateY(-4px) rotateZ(-45deg);
		}
	}
}
@media screen and (max-width: 500px) {
	nav input:checked + label {
		span:nth-of-type(3) {
			transform: translateY(-4px) rotateZ(-45deg);
		}
	}
}
@media screen and (max-height: 500px) {
	nav input:checked + label {
		span:nth-of-type(3) {
			transform: translateY(-4px) rotateZ(-45deg);
		}
	}
}
@media screen and (max-width: 400px) {
	nav input:checked + label {
		span:nth-of-type(3) {
			transform: translateY(-2px) rotateZ(-45deg);
		}
	}
}
@media screen and (max-height: 400px) {
	nav input:checked + label {
		span:nth-of-type(3) {
			transform: translateY(-2px) rotateZ(-45deg);
		}
	}
}