<section class="landing-page">
	<div class="menu-btn"></div>
	<div class="overlay"></div>
	<div class="menu-container">
		<ul class="menu-wrapper">
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Services</a></li>
			<li><a href="">Team</a></li>
			<li><a href="">Contact</a></li>
		</ul>
		<div class="menu-underlay"></div>
	</div>

	<div class="landing-page-content">
		<div class="line-1">
			Animated <br />CSS
			Menu
		</div>
	</div>
</section>

$gray: #343436;
$not-black-but-dark: #1c1b20;
$silver: #f8f8f8;

//GLOBAL STYLES
* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;

	background-size: cover;
	background-repeat: no-repeat;

	font-family: sans-serif;
}

//MIXIN
@mixin flexcenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

//MAIN CSS
.landing-page {
	//overflow-x: hidden;
	height: 100vh;
	width: 100%;
	background-color: lightcoral;

	.menu-btn {
		position: fixed;
		top: 30px;
		right: 30px;
		height: 50px;
		width: 50px;
		border-radius: 100%;
		background-color: $silver;
		color: $not-black-but-dark;
		z-index: 6;

		&:hover {
			cursor: pointer;
		}
	}

	.menu-btn::before {
		position: absolute;
		top: 0;
		left: 0;
		content: "+";
		//color: $gr;
		width: 100%;
		height: 100%;
		border-radius: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 40px;
		font-weight: 100 !important;
		font-family: serif;
		transition-duration: 500ms;
	}

	.menu-btn.active::before {
		transform: rotate(405deg);
		background-color: $gray;
		color: $silver;
	}

	.overlay {
		position: fixed;
		top: 30px;
		right: 30px;
		height: 50px;
		width: 50px;
		border-radius: 100%;
		background-color: #eeeeee;
		transition-duration: 700ms;
		z-index: 4;

		&.active {
			transform: scale(100, 100);
		}
	}

	.menu-container {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100%;
		z-index: -5;
		opacity: 0;
		transition: opacity 1500ms;
		@include flexcenter();

		.menu-wrapper {
			list-style: none;

			li {
				margin: 10px 0;
				//background-color: lightblue;
				display: flex;
				justify-content: left;

				a {
					text-decoration: none;
					letter-spacing: 5px;
					font-weight: 700;
					font-size: 15vmin;
					color: rgba(255, 255, 255, 0);
					-webkit-text-stroke: 1.4px $gray;
					transition-duration: 200ms;

					&:hover {
						color: $gray;
						-webkit-text-stroke: 0px $gray;
					}
				}

				span {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					font-size: 68vmin;
					font-weight: 900;
					color: rgba(0, 0, 0, 0.2);
				}
			}
		}

		.menu-underlay {
			position: absolute;
			top: 100px;
			left: 100px;
			background-color: lightblue;
		}

		&.active {
			transition-delay: 00ms;
			opacity: 1;
			z-index: 5;
		}
	}

	.landing-page-content {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: $gray;
		color: $silver;
		@include flexcenter();
		flex-direction: column;

		div {
			font-size: 20vmin;
			font-weight: 700;

			span {
				font-size: 40px;
				font-weight: 400;
			}
		}
	}
}

$(".menu-btn").click(function () {
	$(".menu-btn").toggleClass("active");
	$(".overlay").toggleClass("active");
	$(".menu-container").toggleClass("active");
});

const cursor = curDot();

cursor.over(".line-1", {
	borderColor: "rgba(255,255,255,.38)",
	broderWidth: 2
});