//Variables for change animation and colors of background, menu overlay, text and icons

$transition-type: ease-in;
$overlay-color: #1e88e5;
$texts-and-icons: #fff;
$body-background: url(https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/96.jpg);

//ZOOM EFFECT ON HOVER MENU ICONS AND LINKS

@keyframes zoom {
	0%, 100% { transform: scale(1);}

	50% { transform: scale(1.1);}
}

// SET BASIC CONTENT - HTML AND BODY 

html, body {
	overflow: hidden;
	line-height: 1.5;
	font-family: 'Montserrat', 'Arial', sans-serif;
	color: $texts-and-icons;
	text-align: center;
}

html, body, .full-menu, .content {
	width: 100%;
	height: 100%;
}

.full-menu, .content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.content {
	background-image: $body-background;
	background-size: cover;
	font-size: 3em;
}

// SET BASIC CONTENT AND ANIMATION EFFECT- MENU OVERLAY

.full-menu {
	position: absolute;
	background-color: $overlay-color;
	opacity: 0.5;
	transform: translateX(100%);
	transition: all 400ms $transition-type;

	li {
		font-size: 4em;
		color: $texts-and-icons;
		opacity: 0;
		transform: translateY(2%);
		transition: all 300ms $transition-type;
		cursor: pointer;

		&:after {
			content: "";
			position: absolute;
		    height: 5px;
		    width: 0%;
		    left: 0;
		    bottom: 0;
		    background-color: $texts-and-icons;
		    transition: width 200ms $transition-type;
		}

		&:hover:after { width: 100%;}
	}

	ul { list-style: none;}

	&.active {
		transform: translateX(0%);
		opacity: 1;
		z-index: 0;

		.home { transition-delay: .3s;}

		.about { transition-delay: .4s;}

		.works { transition-delay: .5s;}

		.contact { transition-delay: .6s;}

		li {
			opacity: 1;
			transform: translateX(0%);

			&:hover {
				animation: zoom 200ms $transition-type;
			}
		}
	}
}

// SET BASIC CONTENT AND ANIMATION EFFECT- HAMBURGUER MENU

.hamburguer {
	position: absolute;
	width: 2em;
	height: 2em;
	margin: 3em;
	z-index: 1;
	cursor: pointer;

	&:hover {
		animation: zoom 300ms $transition-type;
	}
}

.lines {
	background-color: $texts-and-icons;
	width: 100%;
	height: 5px;
	margin: 5px 0;
	transition: all 450ms $transition-type;
}

// SET ANIMATION EFFECT - HAMBURGUER MENU CLOSED

.close-hamburguer {
	.lines { cursor: pointer;}

	.line-top { transform: translateY(200%) rotate(45deg);}

	.line-mid { opacity: 0;}

	.line-bottom { transform: translateY(-200%) rotate(135deg);}
}

//Using Vanilla JS
document.querySelector(".hamburguer").addEventListener("click", function(){
	document.querySelector(".full-menu").classList.toggle("active");
	document.querySelector(".hamburguer").classList.toggle("close-hamburguer");
});