html, body {
  overscroll-behavior-x: none;
}

@keyframes imageScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes backgroundGradient {
  0% { background-position: 0% 100%; }
  80% { background-position: 0% 0%; }
  100% { background-position: 0% 0%; }
}

.banner {
  animation: imageScale linear;
  animation-timeline: scroll(root);
  background-image: url(assets/images/banner.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bg-navbar {
  animation: backgroundGradient linear;
  animation-timeline: scroll(root);
  background: linear-gradient(rgba(33, 37, 41, 1) 0%, rgba(33, 37, 41, 1) 50%, rgba(33, 37, 41, 0) 100%);
  background-size: 200% 200%;
  overflow: hidden;
}