@media (hover:none) and (pointer:coarse) {
	@media only screen and (max-width:49.99em) {
		footer #wrap {
			flex-direction: column;
		}

		footer .menu {
			justify-content: left;
		}
		
		footer .submenu {
			left: 1em;
		}
	}

	@media only screen and (min-width:50em) {
		footer #wrap {
			flex-direction: row;
		}

		footer .menu {
			justify-content: center;
		}
	}

	footer .arrowcheck:checked~.arrow {
		color: orangered;
		transform: rotate(-90deg)
	}

	footer .arrowcheck:checked~.submenu {
		transform: scale(1);
		z-index: 1;
		opacity: 1
	}

	footer .arrow {
		transform: rotate(90deg);
		transition: transform 0.2s linear;
		border: 2px solid green;
		border-radius: 1em;
		width: 1.5em;
		height: 1.5em;
		display: flex;
		font-size: 1.2em;
		background-color: white;
		justify-content: center;
		align-items: center
	}
}

@media (hover:hover) and (pointer:fine) {
	footer #wrap {
		flex-direction: row
	}

	footer .menu a:hover~.submenu {
		transition-delay: 0.5s;
		transform: scale(1);
		z-index: 1;
		opacity: 1
	}

	footer .submenu:hover {
		transform: scale(1);
		z-index: 1;
		opacity: 1
	}

	footer #wrap a:hover {
		color: midnightblue
	}

	footer .arrow {
		display: none
	}

	footer .menu {
		justify-content: center;
	}
}

footer {
	font-size: 0.8em
}

footer a {
	cursor: pointer;
	padding: 1em
}


footer #wrap a {
	color: steelblue;
	display: block
}

footer #wrap {
	color: steelblue;
	font-weight: bold;
	font-family: Arial;
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	background-color: navajowhite;
}

footer .menu {
	position: relative;
	display: flex;
	flex-direction: row;
	height: 3em;
	align-items: center;
}

footer .submenu {
	position: absolute;
	white-space: nowrap;
	background-color: lightcyan;
	transform: scale(1.1);
	cursor: pointer;
	opacity: 0;
	bottom: 2.5em;
	transform-origin: center;
	z-index: -1;
	transition: 1ms z-index, transform 0.2s linear, opacity 0.3s linear;
}

footer .submenu div>a {
	display: block;
	width: 100%;
	padding: 1em
}