* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #050806;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.homepage-hero {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.homepage-hero > img {
  display: block;
  width: 100%;
  height: auto;
}

.hotspots a {
  position: absolute;
  display: block;
  z-index: 5;
}

.hotspots a:hover {
  outline: 2px solid rgba(42, 235, 95, 0.45);
  border-radius: 4px;
}

/* TOP MENU CLICK AREAS */

.about {
  left: 62%;
  top: 3.2%;
  width: 5%;
  height: 5%;
}

.league {
  left: 68%;
  top: 3.2%;
  width: 6%;
  height: 5%;
}

.schedule {
  left: 75%;
  top: 3.2%;
  width: 7.3%;
  height: 5%;
}

.gallery {
  left: 83.2%;
  top: 3.2%;
  width: 6.2%;
  height: 5%;
}

.join {
  left: 91%;
  top: 3.2%;
  width: 4.8%;
  height: 5%;
}

/* MAIN BUTTONS */

.league-btn {
  left: 2.55%;
  top: 65%;
  width: 15.1%;
  height: 6.2%;
}

.youtube-btn {
  left: 18.1%;
  top: 65%;
  width: 14.2%;
  height: 6.2%;
}

/* SOCIAL ICONS */

.youtube-icon {
  left: 2.4%;
  top: 78.4%;
  width: 3.2%;
  height: 5.5%;
}

.tiktok-icon {
  left: 6.8%;
  top: 78.4%;
  width: 3.2%;
  height: 5.5%;
}

.discord-icon {
  left: 11.3%;
  top: 78.4%;
  width: 3.2%;
  height: 5.5%;
}

/* SECTIONS BELOW HOMEPAGE */

.content-section {
  padding: 90px 5%;
  background: #080c09;
  border-top: 1px solid #17331f;
}

.content-section.alt {
  background: #0d130f;
}

.wrap {
  max-width: 1180px;
  margin: auto;
}

.eyebrow {
  color: #28e564;
  font-weight: 800;
  letter-spacing: 2px;
}

.content-section h2 {
  font-size: clamp(44px, 6vw, 80px);
  margin: 8px 0 20px;
  line-height: 0.95;
}

.content-section h2 span {
  color: #28e564;
}

.content-section p {
  font-size: 18px;
  line-height: 1.65;
  color: #c8d1cb;
  max-width: 850px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 35px;
}

.cards div {
  padding: 28px;
  background: #121a14;
  border: 1px solid #223529;
}

.cards strong {
  font-size: 34px;
  color: #28e564;
}

.real-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 16px 24px;
  background: #28e564;
  color: #061009;
  font-weight: 800;
  text-decoration: none;
  border-radius: 5px;
}

/* MOBILE */

@media (max-width: 800px) {

  .homepage-hero > img {
    width: 165%;
    max-width: none;
    transform: translateX(-30%);
  }

  .hotspots {
    display: none;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .content-section {
    padding: 65px 6%;
  }
}
/* VISIBLE BUTTONS */

.league-btn,
.youtube-btn,
.tiktok-icon,
.discord-icon {
  position: absolute;
  top: auto;
  bottom: 3%;
  width: auto;
  height: auto;
  padding: 14px 22px;
  background: #28e564;
  color: #061009;
  border: 2px solid #28e564;
  border-radius: 6px;
  font-weight: 900;
  font-size: 16px;
  text-decoration: none;
  z-index: 20;
}
.league-btn {
  left: 3%;
}

.youtube-btn {
  left: 20%;
}

.tiktok-icon {
  left: 34%;
}

.discord-icon {
  left: 46%;
}
.league-btn::after {
  content: "LEAGUE RACING";
}

.youtube-btn::after {
  content: "YOUTUBE";
}

.tiktok-icon::after {
  content: "TIKTOK";
}

.discord-icon::after {
  content: "DISCORD";
}
.league-btn:hover,
.youtube-btn:hover,
.tiktok-icon:hover,
.discord-icon:hover {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-3px);
}
@media (max-width: 800px) {
  .hotspots {
    display: block;
  }

  .about,
  .league,
  .schedule,
  .gallery,
  .join {
    display: none;
  }

  .league-btn,
  .youtube-btn,
  .tiktok-icon,
  .discord-icon {
    font-size: 10px;
    padding: 8px 10px;
    bottom: 2%;
  }
    .league-btn { left: 2%; }
  .youtube-btn { left: 29%; }
  .tiktok-icon { left: 51%; }
  .discord-icon { left: 70%; }
}