.show-up-animation{
   z-index: 1000;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #282828;
   animation: showup 1s forwards;
}
.hidden {
   opacity: 0;
   filter: blur(5px);
   transform: translateY(50%);
   transition: all 1s;
}
.show {
   opacity: 1;
   filter: blur(0);
   transform: translateY(0);
}
@keyframes showup{
   0% {
      transform: translateY(0px);
   } 
   100% {
      transform: translateY(-100%);
   }
}
@keyframes border-rotate {
   0%{
      transform: rotate(0deg);
   }
   0%{
      transform: rotate(360deg);
   }
}
@keyframes loading {
   from{
      width: 0;
   }
   to{
      width: 100%;
   }
}
@keyframes showmenu{
   from {
      transform: translateX(-140%);
      border-radius: 60%;
   } 
   to {
      transform: translateX(0px);
      border-radius: 0;
   }
}
@keyframes hidemenu{
   from {
      transform: translateX(0px);
      border-radius: 0;
   } 
   to {
      transform: translateX(-140%);
      border-radius: 60%;
   }
}
@keyframes project_trans {
   from{
      background-color: #282828;
   }
   to{
      transform: scale(10);
      background-color: #282828;
   }
}
@keyframes normal-menu {
   from{
      opacity: 0;
      filter: blur(5px);
      transform: translateY(50%);
   }
   to{
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
   }
}
@keyframes typing {
   0%{
      width: 0;
   }
   99%{
      width: 100%;
   }
   100%{
      width: 100%;
      border-right: #000;
   }
}
@keyframes fade {
   from{
      opacity: 0;
      filter: blur(5px);
      transform: translateY(50%);
      transition: all 1s;
   }
   to{
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
   }
}
@keyframes pop {
   from{
      opacity: 0;
      filter: blur(5px);
      transform: scale(0) rotate(40deg);
   }
   to{
      opacity: 1;
      filter: blur(0);
      transform: scale(1.5) rotate(40deg);
   }
}
@keyframes wavinghand {
   0%{
      transform: scale(1.5) rotate(40deg);
   }
   10%{
      transform: scale(1.5) rotate(60deg);
   }
   20%{
      transform: scale(1.5) rotate(30deg);
   }
   30%{
      transform: scale(1.5) rotate(60deg);
   }
   40%{
      transform: scale(1.5) rotate(30deg);
   }
   50%{
      transform: scale(1.5) rotate(60deg);
   }
   60%{
      transform: scale(1.5) rotate(40deg);
   }
   100%{
      transform: scale(1.5) rotate(40deg);
   }
}