@charset "UTF-8";
/* 101 navigation CSS Document */

button {
	all: unset;
	background: url("../images/Menu-button.png") no-repeat center;
	background-size: contain;
	width: 120px;
	aspect-ratio: 1.17 / 1;
	float: right;
	margin-top: -15px;
	position: relative;
}

.navigation {
	position: absolute;
	max-height: 0;
	overflow: hidden;
	width: 120px;
	top: 80px;
	transition: max-height 500ms ease-in-out;
	z-index: 100;
}
button:hover .navigation, button:focus .navigation {
	max-height: 600px;
}
.navigation li {
	text-align: center;
	background: gold;
	color: var(--red);
	font-size: 1.4em;
	padding: 5px 0;
}
.navigation li:hover {
	background: black;
	color: white;
}
.navigation li ~ li {
	border-top: solid 1px white;
}

/*

@media (max-width: 1000px) {
	.navigation {
		top: 80px;
	}
	
}


@media (max-width: 700px) {
	button {
		width: 20%;
	}
	.navigation {
		top: 75px;
	}
	
}
*/