<div id="app">
	<nav class="menu">
		<ul class="menu__list">
			<li class="menu__item">Start</li>
			<li class="menu__item">About</li>
			<li class="menu__item">Contact</li>
		</ul>
	</nav>
</div>

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #feffdf;
  display: flex;
  justify-content: center;
  align-items: center;
	font-family: monospace;
}

#app {
	display: flex;
	flex-direction: column;
	justify-content: center;
  height: 87vh;
  width: 46vh;
  transform: scale(0.8);
  border-radius: 2rem;
  background-color: #ef5a5a;
	color: #fff;
  box-shadow: 0px 2vh 10vh rgba(0,0,0,.3);
  overflow: hidden;
  border: 1vh solid #F0F0F0;
	box-sizing: border-box;
}

.menu {
	height: 100%;
	width: 100%;
	background-color: #ffe79a;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	color: #222;
	cursor: pointer;
	transform: translateX(-90%);
	transition: transform 0.45s cubic-bezier(0.39, 0.575, 0.565, 1);
	
	&:hover {
		transform: translate(0%);
	}
}

.menu__item {
	font-size: 1.5em;
	padding: 10px 0;
	text-align: center;
}