un-menu-drop {
	display: flex;
	flex-direction: column;
	row-gap: 2vh;
	align-items: end;
}
un-menu-drop a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 200px;
	color: #fff;
	cursor: unset;
}

un-menu-drop .drop-down {
	display: none;
}

un-menu-drop .drop-down.active {
	display: flex;
	flex-direction: column;
	align-items: end;
}

un-menu-drop .drop-down.active .drop-item {
	opacity: 0;
	transform-origin: top center;
}

un-menu-drop .drop-down.active .drop-item:nth-child(1) {
	animation-name: topToBottom;
	animation-duration: 400ms;
	animation-delay: -150ms;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

un-menu-drop .drop-down.active .drop-item:nth-child(2) {
	animation-name: topToBottom;
	animation-duration: 400ms;
	animation-delay: 0ms;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

un-menu-drop .drop-down.active .drop-item:nth-child(3) {
	animation-name: topToBottom;
	animation-duration: 400ms;
	animation-delay: 150ms;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

un-menu-drop .drop-down.active .drop-item:nth-child(4) {
	animation-name: topToBottom;
	animation-duration: 400ms;
	animation-delay: 300ms;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

/* presentational */

un-menu-drop .drop-item {
	cursor: pointer;
	background-color: transparent;
	color: var(--page-color-2);
    font-weight: bold;
    font-size: large;
    text-shadow: -1px -1px 1px var(--page-color-1), 1px 1px 0px black;
	width: fit-content;
	height: fit-content;
	padding: 10px;
	border-top: none; /*thin solid black;*/
	border-right: none /*thin solid black;*/
}

un-menu-drop .drop-item:hover {
	filter: brightness(85%);
}

/* animations */

@keyframes topToBottom {
	0% {
		opacity: 0;
		transform: rotateX(-90deg);
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg);
	}
}

@media (min-width: 1100px) {
	un-menu-drop .drop-down.active {
		display: flex;
		flex-direction: row;
	}
	/*un-menu-drop .drop-item {
		border-left: thin solid black;
	}*/
}