@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@700&display=swap');

body { /* Important: Make the body take up the full viewport height */
  min-height: 100vh;
  margin: 0; /* Remove default body margins */
}
.card-container {
  margin-top: 25vh;
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent cards from wrapping */
  padding: 10px;
  scrollbar-height: none;
}
.card-container::-webkit-scrollbar {
  display: none;
}
.card {
  border-radius: 5.6vh;
  display: inline-block; /* Make cards sit side-by-side */
  width: 40vh; /* Set a fixed width for each card (adjust as needed) */
  height: 40vh; /* Set a fixed height for each card (adjust as needed) */
  margin-right: 2.4vh; /* Spacing between cards */
  border: 0.1vh solid rgb(166,166,166);
  padding: 0.4vh;
  vertical-align: top; /* Align cards to the top */
  position: relative;
}
.audio_player_pos {
  position: absolute;
  top: 82%;
  left: 12.5%;
}
.audio_player {
  width: 30vh;
}
.race-details {
  font-family: "Familjen Grotesk", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: 3vh;
  color: white;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the element */
}
.race-podcast {
  font-family: "Familjen Grotesk", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: 3vh;
  color: white;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the element */
}
.race-name {
  font-family: "Familjen Grotesk", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: 7vh;
  color: white;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the element */
}
.ai-disclaimer {
  font-size: 1vh;
  color: white;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the element */
}