:root {
    --color-text: #282828;
    --size: clamp(10rem, 1rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 14);
    --duration: 20s;
    --duration-quick: 90s;
    --duration-icon: 60s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
    --icon-size: clamp(6.25rem, 4.4498rem + 9.0009vw, 12.5rem);
  }

.ani_right{
    animation: 05s ani_right infinite alternate;
}
.ani_left{
    animation: 05s ani_left infinite alternate;
}
.ani_leftXL {
    animation: 05s ani_leftXL infinite alternate;
}
.ani_top{
    animation: 05s ani_top infinite alternate;
}
.ani_bottom{
    animation: 05s ani_bottom infinite alternate;
}
.ani_tri{
    animation: 8s ani_tri infinite alternate;
}
.ani_rotation1{
    animation: 100s ani_rotation1 linear infinite;
}
@keyframes ani_right {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(20px);
    }
}
@keyframes ani_left {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateX(-20px);
    }
}
@keyframes ani_leftXL    {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateX(150px);
    }
}
@keyframes ani_top {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}
@keyframes ani_bottom {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(20px);
    }
}
@keyframes ani_tri {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translate(-5px, 5px);
    }
    100% {
        transform: translate(5px, -5px);
    }
}
@keyframes ani_rotation1 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }
.icon_animation {
    animation: icon_animation 10s linear infinite alternate forwards;
}
@keyframes icon_animation {
    0%, 100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }
    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }
    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }
    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }
    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}
@keyframes zoomIcon {
    0% {
        -webkit-transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
        transform: scale(1)
    }
}

.zoomIcon {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}
.icon_bubble{
    animation-name: icon_bubble;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}
@keyframes icon_bubble {
    16.65% {
      transform: translateY(8px);
    }
    33.3% {
      transform: translateY(-6px);
    }
    49.95% {
      transform: translateY(4px);
    }
    66.6% {
      transform: translateY(-2px);
    }
    83.25% {
      transform: translateY(1px);
    }
    100% {
      transform: translateY(0);
    }
  }