/* #Logo{
    animation: DrawIn 10s forwards;
} */
/* #PageBack{
    background: url("https://eskipaper.com/images/hd-abstract-wallpapers-8.jpg");
}
#svgBackBlur{
    animation: SlidesFromSideBack 2s forwards;
}
#svgFronText{
    animation: SlidesFromSideFront 2s forwards;
} */
@keyframes DrawIn {
    0% {stroke-dasharray: 100;
        stroke-dashoffset: 100;}
    25% {stroke-dashoffset: 0;}
    50% {stroke-dasharray: 100;
        stroke-dashoffset: 100;
        opacity: 1;}
    75% {stroke-dashoffset: 0;
        opacity: 0.7;}
    90% {stroke-dasharray: 100;
        stroke-dashoffset: 100;}
    100% {opacity: 1;}
}
@keyframes SquishedTogther {
    0% { transform: translate(-40vw,30vh) rotateZ(-5deg);}
    25% { transform: translate(-40vw,30vh) rotateZ(-5deg) scale(0.7,1.3);}
    30%{ transform: translate(-35vw,30vh) rotateZ(-5deg) scale(1,1);}
    47% { transform: translate(40vw,20vh) rotateZ(5deg)scale(0.8,1.2);}
    50% { transform: translate(40vw,20vh) rotateZ(5deg) scale(0.8,1.2);}
    70% { transform: translate(-40vw,10vh) rotateZ(-5deg) scale(1,1);}
    80% { transform: translate(0,0) scale(1,1);}
    81% { transform: translate(0,0) rotateZ(360deg) scale(1,1);}
}

@keyframes SlidesFromSideBack {
    0% {transform: translate(-100%,0%);}
    50% {transform: translate(30%,0%);}
    80% {transform: translate(-10%,0%);}
    100% {transform: translate(0%,0%);}
}
@keyframes SlidesFromSideFront {
    0% {transform: translate(100%,0%);}
    50% {transform: translate(-30%,0%);}
    80% {transform: translate(10%,0%);}
    100% {transform: translate(0%,0%);}
}

@keyframes LightFlicker {
    0% { opacity: 0;}
    25%{ opacity: 1;}
    35%{ opacity: 0;}
    43%{ opacity: 1;}
    80%{ opacity: 0;}
    100%{ opacity: 1;}
}

@keyframes Shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(0,0) rotate(0); }
}
@keyframes DropFromTop {
    0%{transform: translate(0px, -200%) rotate(0deg);}
    100%{transform: translate(0px, 0px) rotate(0deg);}
}
@keyframes BounceFromRight {
    0%{transform: translate(100%, -50%)}
    25%{transform: translate(75%, 0%) scale(1.2,0.8)}
    50%{transform: translate(50%, -40%) scale(0.9,1.1)}
    75%{transform: translate(25%, 0%) scale(1.1,0.9)}
    80%{transform: translate(10%, 0%) scale(0.8,1.2)}
    90%{transform: translate(5%, 0%) scale(1.2,0.8)}
    100%{transform: translate(0%, 0%) scale(1,1)}
}
@keyframes Splat {
    0%{transform: scale(20,20)}
    20%{transform: scale(0.6,0.6)}
    40%{transform: scale(1.3,1.3)}
    60%{transform: scale(0.8,0.8)}
    100%{transform: scale(1,1)}
}
@keyframes SpinIn {
    0%{ transform: rotateZ(360deg) translate(75%,75%);}
    100%{ transform: rotateZ(1440deg);}
}
@keyframes Teleport {
    0%{ opacity: 0;      transform: translate(75%,75%)scale(0.3,0.3); }
    10%{ opacity: 100%;  transform: translate(75%,75%); }
    30%{ opacity: 0;     transform: translate(75%,75%) scale(0.3,0.3); }
    31%{ opacity: 0;     transform: translate(-50%,-50%)scale(0.3,0.3); }
    40%{ opacity: 100%;  transform: translate(-50%,-50%); }
    50%{ opacity: 0;     transform: translate(-50%,-50%) scale(0.3,0.3); }
    51%{ opacity: 0;     transform: translate(-30%,30%)scale(0.3,0.3); }
    70%{ opacity: 100%;  transform: translate(-30%,30%); }
    80%{ opacity: 0;     transform: translate(-30%,30%) scale(0.3,0.3); }
    81%{ opacity: 0;     transform: translate(45%,-50%) scale(0.3,0.3); }
    90%{ opacity: 100%;  transform: translate(45%,-50%); }
    95%{ opacity: 0;     transform: translate(45%,-50%) scale(0.3,0.3); }
    96%{ opacity: 0;     transform: translate(0,0) scale(0.3,0.3); }
    100%{ opacity: 100;  transform: translate(0,0); }
}