@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
  --animation-duration-first: 20s; /* First word total animation duration */
  --animation-duration: 10s; /* Total animation duration */
}

@keyframes word {
  0% {
    transform: translateY(100%);
  }
  10% {
    transform: translateY(-10%);
    animation-timing-function: ease-out;
  }
  12.5% {
    transform: translateY(0);
  }
  25%,
  100% {
    transform: translateY(-110%);
  }
}

.animate-word {
  animation: word var(--animation-duration) infinite;
}
.animate-word-delay-1 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-1 * (var(--animation-duration) / 8));
}
.animate-word-delay-2 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-2 * (var(--animation-duration) / 8));
}
.animate-word-delay-3 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-3 * (var(--animation-duration) / 8));
}
.animate-word-delay-4 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-4 * (var(--animation-duration) / 8));
}
.animate-word-delay-5 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-5 * (var(--animation-duration) / 8));
}
.animate-word-delay-6 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-6 * (var(--animation-duration) / 8));
}
.animate-word-delay-7 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-7 * (var(--animation-duration) / 8));
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.bg-primary-color {
  background-color: #0a0185;
}