@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes menubarFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0px) scale(1);
  }
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
@keyframes outline-dash-around {
  0% {
    top: 0;
    left: 0;
    width: var(--dash-length, 20px);
    height: var(--outline-thickness, 2px);
    background-color: var(--outline-color, white);
  }
  25% {
    top: 0;
    left: calc(100% - var(--dash-length, 20px));
    width: var(--dash-length, 20px);
    height: var(--outline-thickness, 2px);
    background-color: var(--outline-color, white);
  }
  25.001% {
    top: 0;
    left: calc(100% - var(--outline-thickness, 2px));
    width: var(--outline-thickness, 2px);
    height: var(--dash-length, 20px);
    background-color: var(--outline-color, white);
  }
  50% {
    top: calc(100% - var(--dash-length, 20px));
    left: calc(100% - var(--outline-thickness, 2px));
    width: var(--outline-thickness, 2px);
    height: var(--dash-length, 20px);
    background-color: var(--outline-color, white);
  }
  50.001% {
    top: calc(100% - var(--outline-thickness, 2px));
    left: calc(100% - var(--dash-length, 20px));
    width: var(--dash-length, 20px);
    height: var(--outline-thickness, 2px);
    background-color: var(--outline-color, white);
  }
  75% {
    top: calc(100% - var(--outline-thickness, 2px));
    left: 0;
    width: var(--dash-length, 20px);
    height: var(--outline-thickness, 2px);
    background-color: var(--outline-color, white);
  }
  75.001% {
    top: calc(100% - var(--dash-length, 20px));
    left: 0;
    width: var(--outline-thickness, 2px);
    height: var(--dash-length, 20px);
    background-color: var(--outline-color, white);
  }
  100% {
    top: 0;
    left: 0;
    width: var(--outline-thickness, 2px);
    height: var(--dash-length, 20px);
    background-color: var(--outline-color, white);
  }
}
@keyframes outlineFadeInOn {
  0% {
    outline: rgba(255, 255, 255, 0) 0px solid;
  }
  40% {
    outline: rgba(255, 255, 255, 0.693) 2px solid;
  }
  100% {
    outline: rgba(255, 255, 255, 0.318) 1px solid;
  }
}
@keyframes paperPlane {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(30px, -10px) rotate(50deg) scale(1.1);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(90px, 5px) rotate(80deg) scale(0);
    opacity: 0;
  }
}
@keyframes smoothPaperPlane {
0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
}
5% {
    transform: translate(3px, -1.6px) rotate(4deg) scale(1.01);
}
10% {
    transform: translate(6px, -3.2px) rotate(8deg) scale(1.02);
}
15% {
    transform: translate(9px, -4.8px) rotate(12deg) scale(1.03);
}
20% {
    transform: translate(12px, -6.4px) rotate(16deg) scale(1.04);
}
25% {
    transform: translate(15px, -8px) rotate(20deg) scale(1.05);
}
30% {
    transform: translate(18px, -8.4px) rotate(26deg) scale(1.06);
}
35% {
    transform: translate(21px, -8.8px) rotate(32deg) scale(1.07);
}
40% {
    transform: translate(24px, -9.2px) rotate(38deg) scale(1.08);
}
45% {
    transform: translate(27px, -9.6px) rotate(44deg) scale(1.09);
}
50% {
    transform: translate(30px, -10px) rotate(50deg) scale(1.1);
}
55% {
    transform: translate(36px, -8.8px) rotate(53deg) scale(1.04);
}
60% {
    transform: translate(42px, -7.5px) rotate(56deg) scale(0.98);
}
65% {
    transform: translate(50px, -5px) rotate(60deg) scale(0.9);
    opacity: 0.8;
}
70% {
    transform: translate(56px, -3px) rotate(63deg) scale(0.78);
    opacity: 0.7;
}
75% {
    transform: translate(63px, -1.5px) rotate(66deg) scale(0.65);
    opacity: 0.6;
}
80% {
    transform: translate(70px, 0px) rotate(70deg) scale(0.5);
    opacity: 0.5;
}
85% {
    transform: translate(76px, 1.5px) rotate(73deg) scale(0.35);
    opacity: 0.35;
}
90% {
    transform: translate(82px, 3px) rotate(76deg) scale(0.2);
    opacity: 0.2;
}
95% {
    transform: translate(86px, 4px) rotate(78deg) scale(0.1);
    opacity: 0.1;
}
100% {
    transform: translate(90px, 5px) rotate(80deg) scale(0);
    opacity: 0;
}
}
@keyframes floatingBubble1 {
0% {
    margin-top: -10px;
    margin-left: 0;
}
25% {
    margin-top: -8px;
    margin-left: 5px;
}
50% {
    margin-top: -20px;
    margin-left: -20px;
}
75% {
    margin-top: 0;
    margin-left: -10px;
    z-index: 10;
}
100% {
    margin-top: -10px;
    margin-left: 0;
}
}
@keyframes floatingBubble2 {
0% {
    margin-top: 0;
    margin-left: 0;
}
25% {
    margin-top: -4px;
    margin-left: 5px;
}
50% {
    margin-top: 0;
    margin-left: 10px;
}
75% {
    margin-top: 15px;
    margin-left: 5px;
}
100% {
    margin-top: 0;
    margin-left: 0;
}
}
@keyframes floatingBubble3 {
0% {
    margin-top: -50px;
    margin-right: 20px;
}
25% {
    margin-top: -30px;
    margin-right: 30px;
}
50% {
    margin-top: -50px;
    margin-right: 10px;
}
75% {
    margin-top: -60px;
    margin-right: -15px;
    z-index: 1;
}
100% {
    margin-top: -50px;
    margin-right: 20px;
}
}