/* Container for all page contents */
#page-container {
  width: 100%;
  text-align: center; /* Center the content horizontally */
}

/* Styling for text at top of the page */
#leagues-header {
  font-family: 'Golos Text';
  display: inline-block; /* Ensure the width is based on content */
  border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
  
}

/* Position cards in the center of the screen */
#card-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stylize League Cards */
#league-card {
  width: 500px; /* Set width of the banner to 100% of viewport width */
  height: 150px;
  margin: 20px;

  text-align: center; /* Center the content horizontally */

  background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
  padding: 10px; /* Adjust padding as needed */
  position: relative; /* Needed for absolute positioning */
  overflow: hidden; /* Hide the overflowing skewed content */
  transform: skewX(-20deg); /* Skew the banner to create a triangular side */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
  cursor: pointer; /* Change cursor to pointer on hover */
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);

  /* Counter skew contents to keep inner content straight*/
  #card-contents {
    transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
  }
}

#league-card:hover {
  transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box-shadow on hover for depth effect */
}





#league-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1%; /* Width of the red strip */
  background-color: red; /* Red color */
}