:root {
  --primary: #0a2a43;
  --secondary: #1f6feb;
  --tertiary: #17a398;
  --quaternary: #222222;
  --quinary: #f3f4f6;
  --light-blue: #8af1f2;
  --gray-darker: #8a8d93;
  --crimson: #8b1a1a;
  --crimson-hover: #a82020;
  --gray-darker: #555;
  --quaternary: #333;
}

/* Animations */
@keyframes change-background {
  from {
    background-color: transparent;
    /* fixed from none */
  }

  to {
    background-color: var(--quinary);
  }
}

@keyframes change-logo-headline {
  from {
    color: var(--quinary);
  }

  to {
    color: var(--quaternary);
  }
}

/* New: animate link color separately */
@keyframes change-links {
  from {
    color: var(--quinary);
  }

  to {
    color: var(--quaternary);
  }
}

@keyframes change-lan-icon {
  from {
    color: var(--quinary);
  }

  to {
    color: var(--quaternary);
  }
}

@keyframes arrow-move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(5px);
  }
}
@keyframes change-hamburger-menu-bar {
  from {
    background-color: var(--quinary);
  }

  to {
    background-color: var(--quaternary);
  }
}
@keyframes change-navLinks {
  from {
    color: var(--quinary);
  }

  to {
    color: var(--quinary);
  }
}