* {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	box-sizing: border-box;
}
body {
	padding: 0;
	margin: 0;
	width: 100vw;
}
#wrapper {
	width: 100vw;
	border-color: red;
	margin: 0;
	padding: 0;
}

#wrapper div {
	padding: 0.25rem;
}

#nav {
	border-color: purple;
	background-color: white;
	padding: 0.25rem;
	overflow: hidden;
}
#nav.animation {
	animation-name: hideNav;
	animation-duration: 500ms;
	animation-fill-mode: both;
	animation-direction: normal;
}
#nav.animation.closed {
	animation-direction: reverse;
}

@keyframes hideNav {
	0% {
		max-height: 0;
		transform: translateX(-100vw);
	}
	25% {
		transform: translateX(-100vw);

	}
	75% {
		max-height: 500px;
	}
	100% {
		/* display: none; */
		transform: translateX(0);
	}
}