nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 400px;
	height: 100%;
	transform: translateX(-400px);
	background-image: radial-gradient(circle at bottom left, #222,#444);
	box-shadow: 6px 0 18px -3px #333;
	transition: 0.3s transform;
	z-index: 2;
}

nav h2 {
	text-align: center;
	padding: 2rem;
}

nav ul {
	padding: 0;
	margin: 0;
}

nav ul li {
	list-style: none;
	padding: 0;
	margin: 0;
}

nav ul li a {
	background-color: rgba(0, 0, 0, 0.05);
	display: flex;
	font-size: 1.3rem;
	text-transform: uppercase;
	color: #eee;
	transition: 0.3s box-shadow, 0.3s background-color;
    align-items: center;
}

nav ul li a:hover {
	background-color: rgba(0, 0, 0, 0.3);
	box-shadow: inset -10px 0 0  rgba(25, 180, 250, 0.5);
}

nav ul li a:hover i {
	background-color: rgba(25, 180, 250, 0.5);
}


nav ul li a i {
	flex: 1;
	background-color:  rgba(25, 180, 250, 0.1);
	font-size: 1.5rem;
	color: #eee;
	text-align: center;
	box-sizing: border-box;
	padding: 1.1rem;
	transition: 0.3s background-color;
}

nav ul li a span {
	flex: 8;
	padding: 1.2rem;
}


#mouse-hint {
	position: absolute;
	top: 47%;
	left: 2%;
	font-size: 2em;
	color: #222;
	animation: pulse 1s infinite;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {

}
@media only screen and (max-width: 830px) {

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {

}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 640px) {

}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	nav {
		width: 85%;
		transform: translateX(-100%);
	}
	nav ul li a {
		font-size: 1.1rem;
	}

}