@keyframes blink{
  0%{opacity:1}
  50%{opacity:-1}
  100%{opacity:1}
}

@keyframes wow{
  0%{content: ""}
  10%{content: "!"}
  20%{content: ""}
  23%{content: "."}
  27%{content: ".."}
  30%{content: "..."}
  33%{content: ".."}
  37%{content: "."}
  40%{content: ""}
  50%{content: "?"}
  60%{content: ""}
  65%{content: "!"}
  70%{content: "!!"}
  75%{content: "!"}
  80%{content: ""}
  83%{content: "."}
  85%{content: ".0"}
  90%{content: ".01"}
  95%{content: ".0"}
  97%{content: "."}
}

@keyframes shadowy{
  0%{
    box-shadow: rgba(50, 50, 93, 0.45) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;
  }
  50%{
    box-shadow: rgba(50, 50, 93, 0.2) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px inset;
  }
  100%{
    box-shadow: rgba(50, 50, 93, 0.45) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;
  }
}

@keyframes blinkButton{
  0%{
    border: 3px solid #292640;
  }
  15%{
    border: 3px solid #e6e6e6;
  }
  30%{
    border: 3px solid #292640;
  }
}

.in{
  top: 0;
  animation: in 1s;
  animation-fill-mode: forwards;
}
.out{
  top: 0;
  animation: out 1s;
  animation-fill-mode: forwards;
}

@keyframes in{
  0%{
    opacity: 0;
    top: -20%;
    transform: translate(0%, -50%) rotateY(180deg) scaleX(10%);
  }
  100%{
    opacity: 1;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(0deg) scaleX(inherit);
  }
}

@keyframes out{
  0%{
    opacity: 1;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(0deg) scaleX(inherit);
  }
  100%{
    opacity: 0;
    top: 120%;
    transform: translate(0%, -50%) rotateY(-180deg) scaleX(10%);
  }
}

.flip{
  animation: flip 1s;
  animation-fill-mode: forwards;
}

@keyframes flip{
  0%{
    transform: rotateY(0deg) translate(0,0) scaleX(inherit);
  }
  35%{
    transform: rotateY(180deg) translate(0,20px) scaleX(110%);
  }
  100%{
    transform: rotateY(360deg) translate(0,0) scaleX(inherit);
  }
}