<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
});