.lines{
        display:flex;
        position:fixed;
        height:70px;
        width:30px;
        left:90%;
        top:38px;
        background-color:transparent;
        z-index:4;
        flex-direction:column;
    }
.line{
  position:absolute;
  display:flex;
  height:4.5%;
  width:90%;
  background-color:transparent;
  border-radius:60px;
  z-index:-2;
}
.line::before{
  content:"MENU";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:0%;
  background-color:transparent;
  border-radius:60px;
  z-index:2;
  color:#e4e4e6;

  font-size:20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
letter-spacing: 0px;
line-height: 1;
word-spacing: 2px;
font-weight: 700;
text-decoration: none solid rgb(68, 68, 68);
font-style: normal;
font-variant: normal;
text-transform: none;  
}
.line::after{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:300%;
  background-color:transparent;
  border-radius:60px;
}
.linefunc{
}
.linefunc::before{
  top:-50%;
  animation:linefuncbe 0.3s;
  animation-fill-mode:forwards;
}
.linefunc::after{
  top:300%;
  animation:linefuncaf 0.3s;
  animation-fill-mode:forwards;
}
@keyframes linefuncbe{
  0%{
    display:flex;
    top:-50%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform:rotate(0deg);
  }
  100%{
    top:-50%;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform:rotate(0deg);
  }
}
@keyframes linefuncaf{
  0%{
    top:300%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform:rotate(0deg);
  }
  100%{
    top:300%;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transform:rotate(0deg);
  }
}
  .menu{
          display: flex;
          position: fixed;
          height: 100%;
          width: 100%;
          left: 0%;
          top: 0%;
          background-color: #fdebb8;
          backdrop-filter:blur(10px);
	      -webkit-backdrop-filter:blur(10px);
          flex-direction: column;
          overflow:hidden;
          clip-path: circle(0px at 90% -20%);
          transition: all 0.4s ease-out;
          pointer-events: none;
          z-index:4;
          animation: menuactivere 0.4s;
          animation-fill-mode: forwards;
      }
.menuactive{
      animation: menuactive 0.4s;
      animation-fill-mode: forwards;
      animation-delay:0.1s;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      pointer-events: all;
      z-index:4;
      
}
@keyframes menuactive{
  0%{
  }
  100%{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes menuactivere{
  0%{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100%{
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
}
.menucross{
  display:flex;
  position:fixed;
  height:70px;
  width:30px;
  left:90%;
  top:38px;
  background-color:transparent;
  z-index:123;
  flex-direction:column;
  opacity:0;
  cursor:pointer;
}
.menucross::before{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  background-color:transparent;
  color:#1d1d1d;
  overflow:visible;
font-family: "Trebuchet MS", Helvetica, sans-serif;
letter-spacing: 0px;
line-height: 1;
word-spacing: 2px;
font-weight: 700;
text-decoration: none solid rgb(68, 68, 68);
font-style: normal;
font-variant: normal;
text-transform: none; 
  transform:none;
  border-radius:0;
  clip-path:none;
  animation:none;
  opacity:0;
  font-size:20px;
}
.menucross::after{
  display:none;
}
.menucross h2{
  color:#191919;
}
.menucrossactive{
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
}
.menucrossactive::before{
  content:"CLOSE";
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
}
@keyframes menucross{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
.menuitems{
    position:fixed;
    display:flex;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:#00000000;
    flex-items:column;
    z-index:4;
    
}
.itemdiv::before{
  content:"+";
  position:absolute;
  display:flex;
  height:100%;
  width:20%;
  left:10%auto;
  top:-20%;
  left:-20%;
  background-color:transparent;
  color:#191919;
  justify-content:flex-end;
  align-items:center;
  font-size:27px;
}
     .item1{
        position:absolute;
        display:flex;
        background-color:transparent;
        height:10%;
        width:100%;
        left:10%;
        top:140px;
        justify-content:start;
        align-items:center;
        animation: linksupitem1Reverse 0s ease-in-out;
        animation-fill-mode: forwards;
        }
        .item2{
        position:absolute;
        display:flex;
        background-color:transparent;
        height:10%;
        width:100%;
        left: 10%;
        top:255px;
        justify-content:start;
        align-items:center;
        animation: linksupitem2Reverse 0s ease-in-out;
        animation-fill-mode: forwards;
        }
        .item3{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 10%;
          top:366px;
          justify-content:start;
          align-items:center;
          animation: linksupitem3Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
        .item4{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width:100%;
          left: 10%;
          top:477px;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
.item5{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 0%;
          top:550px;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
        .itemdiv a{
            font-family: SF Pro Text,SF Pro ons,Helvetica Neue,Helvetica,Arial,sans-serif;
            text-decoration:none;
            transition:1s;
            color: #646464;
            visibility: visible;  
            font-weight:710;
            font-size: 70px;
            line-height: 2rem;
            letter-spacing:-.01em;
            margin-left:0.5%;
            width:100%;
        }
.itemdiv a::before{
    display:none;
}
.item1 a{
  color:#919641;
}
.itemdiv a:hover{
    color:#919641;
}
 a.itemsafter{
          color:#feedbd;
}
.m404{
  position:absolute;
  display:flex;
  height:100%;
  width:70%;
  background-color:transparent;
  left:10%;
  top:0;
  overflow:hidden;
}
.m404o{
  position:absolute;
  display:flex;
  height:40%;
  width:100%;
  top:10%;
  background-color:transparent;
  justify-content:start;
  align-items:center;
}
.m404o h1{
  font-size:3.5em;
  color:#e4e4e6;
}
.m404otxt{
  position:absolute;
  display:flex;
  height:40%;
  width:100%;
  top:30%;
  background-color:transparent;
  justify-content:start;
  align-items:center;
}
.m404otxt h1{
  font-weight:500;
  font-size:3.5em;
  color:#e4e4e6;
}