<nav>
	<ul>
		<li>Home</li>
		<li>About</li>
		<li>Contacts</li>
		<li>Magic</li>
		<li>Settings</li>
	</ul>
</nav><div class="bodyContainer">
	<h1>Navigation.</h1>
	<h4>By <a href="https://www.linkedin.com/in/giorgioacquati/">Giorgio Acquati.</a></h4>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio modi eligendi eveniet ullam maiores esse dolor illo voluptatum placeat doloribus obcaecati ab cum, magnam officia quis explicabo vel mollitia enim.</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, nam quas? In sint enim libero repellendus? Quis dicta, repellendus consequatur ratione, asperiores ut incidunt aperiam voluptates tempora cum sunt ex!</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam cupiditate, libero odio quam deserunt expedita excepturi aliquid odit, error a quas. Ullam inventore earum sed eaque natus sequi, distinctio minus?</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptatem delectus harum quis minus sed optio, laudantium, qui quo incidunt vitae, doloremque nostrum quidem magnam facilis explicabo impedit nemo. Dolore.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet possimus incidunt laboriosam nostrum officiis quaerat deleniti quisquam neque? Similique, assumenda saepe. Consequatur reiciendis atque eligendi quia veniam iusto minus praesentium!</p>
</div>
	<div class="hamburger">
		<span></span>
		<span></span>
		<span></span>
	</div>

$raisinblack: #262626;
$isabelline: #fafafa;
$accent: #00c7be;

* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 24px;
	font-family: sans-serif;
}

body {
	background-color: $accent;
}

nav {
	position: fixed;
	height: 100%;
	width: 65%;
	&::before {
		content: '';
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
	}
	> ul {
		width: 80%;
		display: inline-block;
		vertical-align: middle;
		> li {
			display: block;
			text-transform: uppercase;
			line-height: 2;
			font-size: .8rem;
			padding-left: 30%;
		}
	}
}

.hamburger {
	left: 1rem;
	top: 1rem;
	width: 1.5rem;
	height: .7rem;
	position: fixed;
	z-index: 2;
	cursor: pointer;
	> span {
		display: block;
		background-color: $raisinblack;
		height: 20%;
		margin-bottom: 20%;
	}
	
	
	
}
.bodyContainer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: $isabelline;
	color: $raisinblack;
	padding: 4rem;
	overflow: auto;
	transition: .2s ease;
	
	@media screen and (orientation: portrait) {
		padding: 4rem 1rem;
	}
	
	a {
		color: $accent;
	}
	
	> p {
		padding-bottom: 1em;
	}
	
	> h4 {
		margin: 1em 0;
	}
	
}

@media screen and (orientation: portrait) {
	nav.active + .bodyContainer {
		transform: translateX(55%) scale(.8);
		box-shadow: 0 0 30px 5px rgba($raisinblack, .3);
	}
}

@media screen and (orientation: landscape) {
	nav.active + .bodyContainer {
		transform: translateX(35%) scale(.8);
		box-shadow: 0 0 30px 5px rgba($raisinblack, .3);
	}
}

$(".hamburger").click(function() {
	$("nav").toggleClass("active");
})