@font-face {
  font-family: gilroyHeavy;
  src: url("/fonts/Impact.ttf");
}
@font-face {
  font-family: gilroyRegular;
  src: url("/fonts/GILROY-REGULAR.TTF");
}
@font-face {
  font-family: gilroyMedium;
  src: url("/fonts/GILROY-MEDIUM.TTF");
}
@font-face {
  font-family: gilroySemiBold;
  src: url("/fonts/GILROY-SEMIBOLD.TTF");
}
@font-face {
  font-family: poppinsRegular;
  /* src: url("/fonts/Poppins-Regular_0.ttf"); */
  src: url("/fonts/Impact.ttf");
}
@font-face {
  font-family: poppinsMedium;
  /* src: url("/fonts/Poppins-Medium_0.ttf"); */
  src: url("/fonts/Poppins-Medium.otf");
}
@font-face {
  font-family: poppinsExtraBold;
  /* src: url("/fonts/Poppins-ExtraBold_0.ttf"); */
  src: url("/fonts/Poppins-ExtraBold.otf");
}

body,
a,
p,
h2,
h3,
h4,
li {
  font-family: gilroyMedium;
  color: #fff;
}

.register-btn {
  font-family: sofaChromeRegular;
}

.drawer-links span {
  font-family: gilroyHeavy;
  text-transform: uppercase;
}

.main-container {
  /* Reduced from 0.5 to 0.25 for a much lighter touch */
  background: 
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
    url("/images/MAIN-BG-DARK.webp");

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

input {
  color: black !important;
}
/* Mobile Background (Screen width below 768px) */
@media only screen and (max-width: 767px) {
  .main-container {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
      url("/images/mob_bground.webp") !important;
    background-attachment: scroll;
  }
}

/*SIDE DRAWER*/
#drawer-navigation {
  /* background-image: url(../../images/Background_Courts_Game.webp); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* background-attachment: fixed;    */
}

.page-content-container p {
  font-size: 18px;
}

.pg-title {
  font-family: gilroyHeavy;
  text-transform: uppercase;
}

#leaderboard-modal h3 {
  font-family: sofaChromeRegular;
  text-transform: uppercase;
}

#leaderboard-table th {
  font-family: gilroyHeavy;
  text-transform: uppercase;
}

#leaderboard-table td {
  font-family: gilroyRegular;
}

#leaderboard-table .td-score {
  font-family: gilroyHeavy;
}

#feedback-form label {
  color: #fff;
  font-family: gilroyRegular;
  font-size: 18px;
}
#feedback-form select,
#feedback-form textarea {
  color: #000;
  font-family: poppinsMedium;
}
#feedback-form #feedback-btn {
  font-family: poppinsMedium;
  font-weight: 900;
  background-color: #F2E901;
  color: #174177;
}
.feedback-msg {
  font-family: poppinsMedium;
}

/* Login/Register */
.welcome-title {
  font-family: poppinsRegular;
}
.form-title {
  font-family: gilroyHeavy;
  color: #fdee1f;
  text-transform: uppercase;
}
.user-form .field-container {
  color: #000000;
  font-family: gilroySemiBold;
}
.user-form .field-container label {
  font-size: 16px;
}

.user-form .user-form-btn {
  background-color: #fdc20c;
  color: #000;
  font-family: gilroyHeavy;
}
.user-form .user-form-btn:hover {
  background-color: #fdc20c;
}
/*end*/

/*How to play*/

.items-img {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1em;
}
.items-img img {
  width: 60px !important;
  margin-right: 1rem;
}
.items-img span {
  font-size: 1.1rem;
}
.htp-side-icons {
  background-color: #c028b9;
}

/* Leaderboard */
.score-title {
  font-family: gilroyRegular;
  color: #fdc20c;
}
.score-number {
  font-family: gilroyHeavy;
}
/* end */

.footer-links {
  text-transform: uppercase;
  color: #fff;
  font-family: gilroyHeavy;
  font-size: 2.2rem;
  text-decoration: none;
  transition: all 0.3s;
}

@media only screen and (max-width: 767px) {
  #leaderboard-table th {
    font-family: gilroyHeavy;
  }

  .footer-links {
    font-size: 14px;
  }
}