@font-face {
  font-family: 'Norwester';
  src: url('../fonts/norwester.eot'); /* IE9 Compat Modes */
  src: url('../fonts/norwester.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/norwester.svg#Norwester') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

/* Global body and html settings */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  background-color: #111C26;
  position: relative;
  overflow: hidden;
}

.fonts-loaded {
  visibility: visible;
}

/* Hero Section Styling */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width:100%;
  padding-left: 260px;
  color: #FFBE98;
}

.hero-content {
  display: relative;
  width: 70%;
  height: 60%;
}

.left-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: auto; 
}

.index-logo img {
  width: 50%; 
  height: auto; 
  margin-left: 0; 
}

.hero-text {
  font-family: 'Norwester', sans-serif;
  color: white;
  margin-top: 10px;
}

.hero-text p {
  margin: 0;
  font-size: 60px;
}

.hero-text {
  font-family: 'Norwester', sans-serif;
  color: white;
  margin-top: 10px;
}

.hero-text p {
  margin: 0;
  font-size: 60px;
}

.hero-text {
  font-family: 'Norwester', sans-serif;
  color: white;
  margin-top: 10px;
}

.hero-text p {
  margin: 0;
  font-size: 60px;
}

/* Style the "BUILT BY" text */
.hero-text .highlight {
    padding: 0 10px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    display: inline-block; /* Ensure the background only covers the text */
}

/* Ensure "THE COMMUNITY" is on a new line without background */
.hero-text .break-line {
    background-color: #a63c83; /* Background color */
    margin-top: 5px; /* Optional: Add space between the two lines */
}

.right-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
}

.index-phone {
    z-index: 20; /* Ensures the phone image is on top */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.index-phone img {
    display: block; /* Ensure it's displayed */
    height: auto; 
    max-width: 300px; 
}

/* Adjustments for larger screens */
@media (min-width: 1024px) {


  .left-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: auto; /* Push the logo to the left */
  }

  .right-side {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
  }

  .index-phone img {
    max-width: 400px; /* Increase max-width for larger screens */
    display: block; /* Ensure the image is displayed */
  }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 820px) {
  /* Override body margin for mobile */
  body {
    margin: 0px; /* Adjust this value as needed */
    padding: 0; /* Keep padding as needed */
    box-sizing: border-box; /* Ensure padding and margin are included in total width */
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    text-align: center; /* Center text within hero-content */
  }

  .hero-text {
    padding-left: 0;
    text-align: center;
    margin: 0 auto; /* Center horizontally */
    max-width: 100%; /* Ensure it doesn't exceed the viewport width */
  }

  .hero-text h1 {
    font-size: 2.5rem;
  }

  .hero-text p {
    font-size: 1.3rem;
    margin: 0; /* Optional: adjust margins if needed */
  }

.index-phone {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 20px; /* Extra padding at the bottom */
}

.index-phone img {
  max-width: 150px;
  display: block;
  margin: 0 auto;
  height: auto;
}

  /* Center phone image */
  .index-phone {
    width: 100%;
    display: flex;
    justify-content: center; /* Ensure horizontal centering */
    align-items: center; /* Ensure vertical centering */
    margin-top: 20px; /* Adjust top margin for spacing */
  }

  .index-phone img {
    max-width: 150px;
    display: block;
    margin: 0 auto;
    height: auto; /* Maintain aspect ratio */
  }
}

/* Team Logos and Match Cards */
.team-logo-left {
      align-self: center;
      height: 42px;
      width: 42px;
      object-fit: fill;
      border-radius: 50%;
      overflow: hidden;
}

.vs-text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 18px;
  font-weight: bold;
  margin: 5px;
}

.team-logo-right {
      align-self: center;
      height: 42px;
      width: 42px;
      object-fit: fill;
      border-radius: 50%;
      overflow: hidden;
}

.win {
  color: green;
  font-size: 1.1em;
  line-height: 1.1em; /* Adjust this value to better align the text */
  text-shadow: 2px 2px 5px rgba(0, 128, 0, 0.5); /* Green shadow for "W" */
}

.loss {
  color: red;
  font-size: 1.1em;
  text-shadow: 2px 2px 5px rgba(255, 0, 0, 0.5); /* Red shadow for "L" */
}

.win, .loss {
  margin: 20px;
  padding: 0;
}

.scroller {
  max-width: 100%; /* Adjust the max width as needed */
  overflow: hidden;
  padding: 10px;
}

.scroller__inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem; /* Space between match cards */
  width: max-content;
  animation: scroll var(--_animation-duration, 100s) var(--_animation-direction, forwards) linear infinite;
}

/* Increase specificity by targeting the parent and then the .scroller__inner.paused */
.scroller .scroller__inner.paused {
  animation-play-state: paused;
}

/* General scroller styles */
.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-50% - 0.5rem));
  }
}

/* Match card styles */
.match-card {
  display: grid;
  grid-template-rows: auto auto auto;
  width: 125px;
  background-color: #1C1C2E;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-items: center;
  color: white;
}

.game-ladder-container {
  grid-column: span 3; /* Spans all three columns */
  text-align: center;
  font-size: 0.9em;
  color: #aaa;
}

.team-logos-container {
  grid-column: span 3;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.team-score-container {
  grid-column: span 3; /* Spans all three columns */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5vh;
}

.team-score-left, .team-score-right {
    width: 50%; /* Ensure each score takes up equal space */
    text-align: center; /* Center-align text within its container */
    font-size: 16px; /* Adjust as needed */
    line-height: 1.5; /* Adjust to vertically center the content */
}


.match-date {
  grid-column: span 3; /* Spans all three columns */
  text-align: center;
  font-size: 0.8em;
  color: #aaa;
}

.match-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}