@font-face {
  font-family: "cabinet-grotesk";
  src: url("../fonts/CabinetGrotesk-Variable.ttf") format("truetype");
  /* url("../fonts/neuemontreallight.woff") format("woff"),
    url("../fonts/neuemontreallight.otf") format("opentype"); */

  font-style: normal;
}

body {
  margin: 0;
  background-color: #141316; /* dark base to match hero */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #e6e1e5;
  font-family: "cabinet-grotesk", sans-serif;
}

/* small utility to visually hide scrollbars while preserving scroll */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.serach-shadow {
  box-shadow: 0px 1px 2px 0px #1018280d;
}

.hero-bg {
  background-image: url("../assets/heromob.png");
  background-size: cover;
  background-position: center;
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .hero-bg {
    background-image: url("../assets/hero.svg");
  }
}

.gradone {
  background: linear-gradient(
    90deg,
    #141316 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}
.gradtwo {
  background: linear-gradient(
    0deg,
    #141316 0%,
    rgba(17, 24, 39, 0) 50%,
    rgba(17, 24, 39, 0) 100%
  );
}

.rank-1 {
  background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
}
.rank-2 {
  background: linear-gradient(135deg, #c2c6d8 0%, #424655 100%);
}
.rank-3 {
  background: linear-gradient(135deg, #f08000 0%, #8c4803 100%);
}
.rank {
  background: #e6e1e5;
}