*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Inter 24pt", sans-serif;
}

@font-face {
  font-family: "Inter 24pt";
  src: url("./assets/fonts/Inter24pt-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter 24pt";
  src: url("./assets/fonts/Inter24pt-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter 24pt";
  src: url("assets/fonts/Inter24pt-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter 24pt";
  src: url("assets/fonts/Inter24pt-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

.main-bg {
  background-image: url("assets/main-image.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

@keyframes scrollText {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  animation: scrollText 35s linear infinite;
}

.coffee-stats {
  background-image: url("./assets/coffee-stats.png");
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  width: 100%;
  padding: 40px 20px;
}

.active {
  font-weight: bold;
}