@charset "UTF-8";
/* China Delight Nav CSS Document */

/*nav*/
nav {
	background: linear-gradient(to left, var(--med-green) 3%, var(--dark-green) 3%, var(--dark-green) 97%, var(--med-green) 97%);
}
.navigation {
	font-family: 'Cantata One', serif;
	font-weight: 400;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
}
.navigation > li {
	position: relative;
}

.navigation > li ~ li {
	margin-left: 1.5vw;
}
.navigation > li a {
	font-size: calc(1.4rem + 0.3vw);
	color: yellow;
	padding: 12px calc(0.2vw + 0.8vw);
	display: block;
}
.navigation > li a:hover {
	color: white;
	background: var(--dark-brown);
}

/*Dropdown menu*/
.nest_nav {
	font-family: 'Noto Sans', sans-serif;
	list-style-type: none;
	max-height: 0;
	overflow: hidden;
	position: absolute;
	top: 45px;
	left: 0;
	z-index: 100;
	transition: max-height 1.5s ease;
}
.navigation > li:hover .nest_nav {
	max-height: 450px;
}
.nest_nav > li {
	background: var(--lite-brown);
	border-bottom: solid 1px var(--dark-brown);
}
.nest_nav > li:last-child {
	border-bottom: none;
}
.nest_nav > li a {
	font-size: 1.4rem;
	text-align: center;
	color: black;
	padding: 5px 9px;
	display: block;
}
.nest_nav li a:hover {
	background: var(--dark-green);
	color: linen;
}


@media (max-width: 580px) {
	
	.navigation {
		flex-flow: column;
	}
	.navigation > li {
		margin: 0;
		text-align: center;
		border-bottom: solid 1px var(--med-green);
	}
	.navigation > li:hover {
		background: var(--dark-brown);
	}
	.navigation > li ~ li {
		margin-left: 0;
	}
	.navigation > li a {
		font-size: 1.6rem;
		display: block;
		padding: 5px 0;
	}
	.navigation > li a:hover {
		background: var(--dark-brown);
	}
	.navigation > li .nest_nav {
		position: static;
		max-height: 0;
	}
	.navigation > li:hover .nest_nav {
		max-height: 450px;
	}
	.nest_nav {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.nest_nav > li {
		width: calc(50% - 0.5vw);
		margin: 0 0.25vw;
		border-bottom: none;
	}
	.nest_nav > li a {
		font-size: 1.4rem;
		padding: 6px 0;
		display: block;
		border-bottom: 1px solid var(--dark-brown);
	}
	.nest_nav > li a:hover {
		background: black;
	}
	
}