@keyframes down_arrow {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(0, 20px);
    opacity: 0;
  }

}

@keyframes circle_shape {
  0% {
    border-radius: 0;
    transform: rotate(0deg) translate(0, 0);
  }

  50% {
    border-radius: 20px;
    transform: rotate(45deg) translate(-10px, -10px);
  }

  100% {
    border-radius: 100px;
    transform: rotate(90deg) translate(30px, -50px);
  }

}

@keyframes up_down_move {
  0% {
    transform: translate(0, 30px);
  }

  45% {
    transform: translate(0, 10px);
  }

  100% {
    transform: translate(0, 0);
  }

}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  45% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(-45deg);
  }

}

@keyframes border_animate {
  0% {
    border: 3px solid var(--color_white);
    border-top-color: var(--color_main);
    border-right-color: var(--color_secondary);
    transform: rotate(45deg);
  }

  100% {
    border: 3px solid var(--color_white);
    border-top-color: var(--color_secondary);
    border-right-color: var(--color_main);
    transform: rotate(2000deg);
  }

}

@keyframes border_animate_two {
  0% {
    border: 3px solid var(--color_white);
    border-top-color: var(--color_main);
    border-right-color: var(--color_secondary);
    transform: rotate(2000deg);
  }

  100% {
    border: 3px solid var(--color_main);
    border-top-color: var(--color_white);
    border-right-color: var(--color_main);
    transform: rotate(85deg);
  }

}

@keyframes title_animate {
  0% {
    transform: translate(0px, 0);
  }

  100% {
    transform: translate(10px, 0);
  }

}

@keyframes title_animate_r {
  0% {
    transform: translate(0px, 0) rotate(180deg);
  }

  100% {
    transform: translate(-10px, 0) rotate(180deg);
  }

}

@keyframes full_rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }

}

@keyframes full_rotate_reverse {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0);
  }

}

@keyframes up_down{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(0,5px); }
  100%{ transform: translate(0,10px); }
}