:root {
  --gold-color: #d4af37;
  --grey-color: #b0b0b0;
}

html,
body {
  font-family: "Funnel Display", sans-serif;
}

/* navbar */
nav a.active {
  color: black;
  /* background-color: hsl(51, 70%, 50%); */
  background-color: #d4af37;
  padding: 8px;
  border-radius: 8px;
}

.nav-bar-class {
  z-index: 9999;
}

.nav-link {
  color: white !important;
}

/* hamburger menu */
.small-menu {
  display: none;
}

/* logo slider */
.wrapper {
  width: 90%;
  max-width: 1536px;
  margin-inline: auto;
  position: relative;
  height: 200px;
  margin-top: 5rem;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    hsla(0, 0%, 0%, 0),
    hsl(0, 0%, 0%) 20%,
    hsl(0, 0%, 0%) 80%,
    hsla(0, 0%, 0%, 0)
  );
}

@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

.item {
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  left: max(calc(200px * 8), 100%);
  animation: scrollLeft 30s linear infinite;
}

.logo-img {
  height: 80px;
}

.item1 {
  animation-delay: calc(30s / 9 * (9 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 9 * (9 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 9 * (9 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 9 * (9 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 9 * (9 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 9 * (9 - 6) * -1);
}

.item7 {
  animation-delay: calc(30s / 9 * (9 - 7) * -1);
}

.item8 {
  animation-delay: calc(30s / 9 * (9 - 8) * -1);
}
.item9 {
  animation-delay: calc(30s / 9 * (9 - 9) * -1);
}

/* medal animation */
.animation {
  animation: bounce 4s linear infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }

  33% {
    transform: translateY(-20px);
  }

  66% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(0px);
  }
}