.text-border-black {
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
    1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

* {
    font-family: 'Roboto', sans-serif; /* You can replace 'Roboto' with the font of your choice */
}

.text-adjust {
    font-size: 6vw; 

    @media (min-width: 640px) {
        font-size: 4vw;
      }
    @media (min-width: 1024px) {
        font-size: 2vw;
      }
  }

.modebar-container{
    display: none !important;
}

.scroll::-webkit-scrollbar {
    width: 8px;
}
.scroll:hover {
    cursor: auto !important
}

.card-clip {
    clip-path: url("#card-clip-svg");
}

.star-clip {
    clip-path: url("#star-clip-svg");
}

.shadow-card {
    filter: drop-shadow(2px 15px 15px rgba(30, 30, 0, 0.8));
}

.bronze-img {
    background-color: hwb(30 26% 31%)
}

.bronze-div {
    background-color: hsl(30, 66%, 38%)
}

.bronze-bar {
    background-color: hwb(30 21% 27%)
}

.silver-img {
    background-color: hsl(0, 0%, 75%);
}

.silver-div {
    background-color: hsl(0, 0%, 72%);
}

.silver-bar {
    background-color: hsl(0, 0%, 78%);
}

.gold-img {
    background-color: hwb(50 40% 10%);
}

.gold-div {
    background-color: hsl(50, 80%, 50%);
}

.gold-bar {
    background-color: hsl(56.6,82.4%,76.2%)
}

.daimond-img {
    background-color: hsl(190, 50%, 75%);
}

.daimond-div {
    background-color: hsl(190, 47%, 72%);
}

.daimond-bar {
    background-color: hsl(190, 53%, 78%);
}

.gold-border {
    border-color: #FFD700; /* Gold color */
}
.silver-border {
    border-color: #C0C0C0; /* Silver color */
}
.bronze-border {
    border-color: #CD7F32; /* Bronze color */
}
.gold-button {
    background-color: #FFD700; /* Gold button */
}
.silver-button {
    background-color: #C0C0C0; /* Silver button */
}
.bronze-button {
    background-color: #CD7F32; /* Bronze button */
}
.gold-text, .silver-text, .bronze-text {
    text-transform: uppercase;
    font-weight: bold;
}

.filter-yellow {
    filter: invert(75%) sepia(100%) saturate(5000%) hue-rotate(360deg) brightness(119%) contrast(69%);
  }


  .clip-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.coach-card {
    width: 300px;
    flex-shrink: 0;
}