@font-face {
  font-family: "fire";
  src: url(angelfire.ttf);
}

@font-face {
  font-family: "tungsten";
  src: url(tungsten.ttf);
}

@font-face {
  font-family: "roboto";
  src: url(Roboto.ttf);
}

@font-face {
  font-family: "rage";
  src: url(roadrage.otf);
}

@font-face {
  font-family: "q";
  src: url(Qaddal.otf);
}

@font-face {
  font-family: "fast";
  src: url(equalize.ttf);
}

@font-face {
  font-family: "dragon";
  src: url(shanghai.ttf);
}

@font-face {
  font-family: "nunito";
  src: url(nunito.ttf);
}

@font-face {
  font-family: "race";
  src: url(RaceSport.ttf);
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: none;
  box-sizing: none;

  user-select: none;
}

/*this line gets rid of those automatic blue box selectors that chrome has.
     if you don't know what i mean, remove this and play with the form,
     you will see those box selectors wherever you click
     */
*:focus {
  outline: none;
}

html {
  font-family: "nunito", Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%; /*width & height at 100% is for if i need to do a fixed posiiton for container on mobile (like .everything). This enables it to be full screen without any waste scroll space*/

  color: #fff;
  scroll-behavior: smooth;
  font-size: 20px;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  /* ff 3.6+ */

  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

@media only screen and (max-width: 360px) {
  .everything {
    height: 100%;
    width: 100%;
    position: fixed;
    display: block;
    background-image: url(vecteezy_red-and-dark-blue-shaded-gradient-background_2504349.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /*this in combo with HTML tag with W/H 100%, will keep entire body in view with no scroll*/
  }
  .header {
    height: 15%;
    width: 100%;
    display: flex;
    /* 
    background-image: url(banner2.png);
    background-size: cover;
    background-position: center; */
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .header-img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-img img {
    width: 320px;
    height: 100%;
    object-fit: contain;
  }

  .wrapper {
    height: 75%;
    gap: 0;
    padding: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: auto;
    background: inherit;
  }
  .wrapper main {
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: none;
  }

  [dir="1"] > #recap,
  [dir="2"] > #preview,
  [dir="3"] > #standings,
  [dir="4"] > #leaders {
    display: flex;
    /*no idea how this works but this is just stating which one is = to. For JS */
  }

  .mobilecontainer {
    height: 10%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: "race";
  }

  .nav-button {
    width: 25%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    background: none;
    outline-style: none;
    border-style: none;
    color: white;
    font-family: race;
    cursor: pointer;
  }

  .nav-button img {
    height: 50%;
    display: flex;
    width: 50%;
    object-fit: contain;
  }

  .nav-button p {
    height: 10%;
    display: flex;
    max-width: 100%;
    font-size: 10px;
  }

  .nav-button.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #view1.active img {
    content: url("hockeysticksgreen.png");
  }

  #view2.active img {
    content: url("schedulegreen.png");
  }

  #view3.active img {
    content: url("leaderboardgreen.png");
  }

  #view4.active img {
    content: url("onecirclegreen.png");
  }

  /* width */
  ::-webkit-scrollbar {
    width: 6px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #1f2937;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background-color: white;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *RECAP
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-recap {
    height: 75%;
    display: flex;
    flex-direction: column;
  }

  .recap-header {
    height: 15%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *CONTAINER
  *------------------------------------------------------*
  */

  .container {
    height: 85%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container {
    height: 90%;
    position: relative;
  }

  .slide {
    height: 100%;
    width: 100%;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    position: relative;
    background-size: cover;
    background-position: center;
  }

  /* 
  *-----------------------------------------------------*
  *RECAP-TOP
  *------------------------------------------------------*
  */
  .recap-top {
    align-items: center;
    display: flex;
    width: 90%;
    height: 30%;
    margin: 0 auto;
  }

  .teamlogos {
    width: 28%;
    height: 100%;
    display: flex;
    position: relative;
  }

  .teamlogos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .teamlogosP {
    height: 50%;
    width: 44%;
    font-family: race;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
  }

  .teamlogos-score {
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    font-family: race;
    width: 100%;
    text-align: center;
  }

  .final {
    font-size: 20px;
    height: 50%;
    font-family: race;
    text-align: center;
    width: 100%;
  }

  /* 
  *-----------------------------------------------------*
  *RECAP-MAIN
  *------------------------------------------------------*
  */

  .recap-main {
    height: 70%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .goal-row {
    height: 80px;
    width: 100%;
    margin: 5px auto;
    position: relative;
    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .logo-score {
    width: 35%;
    height: 100%;
    display: flex;
  }

  .goal-logo {
    width: 50%;
    height: 100%;
    position: relative;

    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .goal-logo img {
    width: 250%;
    height: 250%;
    object-fit: contain;
    margin-left: -50px;
  }

  .count {
    font-family: race;
    font-size: 20px;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
  }

  .count p {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }

  .count-winner {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .goal-name {
    width: 40%; /* Maintain fixed width */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent text wrapping */
    display: flex;
    justify-content: center;
    margin: auto 10px;
    flex-direction: column;
    font-family: race;
  }

  .goal-name-goal {
    height: 50%;
    display: inline-flex;
    align-items: center;
    font-family: race;
    width: max-content; /* Grow to fit text content */
    font-size: 20px;
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .goal-mugshot {
    width: 25%;
    height: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }

  .goal-mugshot img {
    width: 150%;
    height: 150%;
    object-fit: contain;
  }

  .goal-name-assist {
    font-size: 12px;

    height: 50%;
    display: flex;
    max-width: 100%;
    font-family: race;
  }

  .goaliez {
    margin-top: 50px;
  }

  .goal-row-goalies {
    height: 80px;
    width: 100%;
    margin: 5px auto;
    position: relative;
    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .goalie-mugshot {
    width: 25%;
    height: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }

  .goalie-mugshot img {
    width: 150%;
    height: 150%;
    object-fit: contain;
  }

  #prev,
  #next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    background: transparent;
  }

  #prev {
    left: 10px;
  }

  #next {
    right: 10px;
  }

  /* 
  *-----------------------------------------------------*
  *NAVBAR
  *------------------------------------------------------*
  */

  #navbar {
    width: 100%;
    height: 10%;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
    position: relative;
    display: flex;
  }

  .navbutton {
    display: flex;
    width: 100%;
    background: none;

    overflow-x: auto;
  }

  .navbutton button {
    font-size: 17.5px;

    cursor: pointer;
    color: white;
    font-family: race;
  }
  .buttonz {
    min-width: 27.5%;
    border: none;
    margin-right: 25px;
    margin-left: 25px;
    outline: none;
    background: none;
  }

  .buttonz.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *PREVIEW
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-preview {
    height: 75%;
  }

  .preview-header {
    margin: 0 auto;
    height: 15%;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *CONTAINER
  *------------------------------------------------------*
  */

  .container2 {
    height: 85%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container2 {
    height: 90%;
    position: relative;
  }
  .slide2 {
    height: 100%;
    position: relative;

    width: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    position: relative;
    flex-wrap: wrap;
    background-size: cover;
    background-position: center;
  }

  /* 
  *-----------------------------------------------------*
  *SLIDE2
  *------------------------------------------------------*
  */

  .date-preview {
    width: 90%;
    height: 9%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    margin: 0 auto;
  }

  .schedule-reg {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );

    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    width: 175px;
    height: 50%;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 22px;
    position: absolute;
    bottom: 0;
  }

  .schedule-button {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );

    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    width: 175px;
    height: 50%;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 22px;
  }

  .schedule-button:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }

  .schedule-reg {
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 25px;
  }

  .preview-teams-banner {
    height: 26%; /**** THIS SHOULD BE 50%. WHEN IT IS AT 30%, THERE IS STILL REMAINING 20% IN IT'S CONTAINER THAT IS UNUSED */
    display: flex;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
  }

  .preview-team {
    width: 50%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .preview-team img {
    width: 150%;
    height: 150%;
    object-fit: contain;
  }

  .money {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  }
  /* 
  .preview-team2 {
    width: 20%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .preview-team2 img {
    width: 80%;
    height: 80%;
    object-fit: contain;
  }

  .vs {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  } */

  .preview-names {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .home-record {
    width: 40%;
    display: flex;
    justify-content: center;
  }

  .home-record p {
    font-size: 25px;
    font-family: race;
  }

  .away-record p {
    font-size: 25px;
    font-family: race;
  }

  .away-record {
    width: 40%;
    display: flex;
    justify-content: center;
  }

  .date-record {
    width: 20%;
    display: flex;
  }

  .rank {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .records {
    height: 46%;
    width: 100%;
    overflow: auto;
    flex-direction: column;
  }

  .teamrecords {
    display: flex;
    width: 100%;
    height: 50px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.1);

    margin-bottom: 10px;
  }

  .records-title {
    width: 100%;
    height: 40%;
    font-family: race;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .home-record2 {
    display: flex;
    height: 60%;
    width: 40%;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-family: race;
  }

  .away-record2 {
    display: flex;
    height: 60%;
    width: 40%;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-family: race;
  }

  .date-record {
    height: 60%;
  }

  #prev2,
  #next2 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    background: transparent;
  }

  #prev2 {
    left: 10px;
  }

  #next2 {
    right: 10px;
  }

  /*
  *-----------------------------------------------------*
  *NAVBAR2
  *------------------------------------------------------*
  */

  #navbar2 {
    width: 100%;
    height: 10%;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
    position: relative;
    display: flex;
  }

  .navbutton2 {
    display: flex;
    width: 100%;
    background: none;

    overflow-x: auto;
  }

  .navbutton2 button {
    font-size: 17.5px;

    cursor: pointer;
    color: white;
    font-family: race;
  }
  .buttonz2 {
    min-width: 27.5%;
    border: none;
    margin-right: 25px;
    margin-left: 25px;
    outline: none;
    background: none;
  }

  .buttonz2.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *STANDINGS
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-standings {
    height: 75%;
    display: flex;
    flex-direction: column;
  }

  .standings-header {
    height: 15%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #standings {
    background: inherit;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */

    flex-direction: column;
  }

  .standingswrapper {
    height: 85%;

    width: 100%;
    position: relative;
    font-family: race;
    overflow-x: auto;
    background: inherit;
  }

  /*
  *-----------------------------------------------------*
  *TOPROW
  *------------------------------------------------------*
  */

  .toprow {
    height: 50px;
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );

    display: flex;
    flex-direction: row;
    width: 150%;
    /* background: inherit; */
    position: sticky;
    top: 0;
    z-index: 100000;
  }

  .standings-lock1 {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 1000;
    position: sticky !important;
    background: inherit;
  }

  .standings-lock1 p {
    text-align: center;
  }

  .p-number {
    position: sticky;
    left: 0;

    width: 30%;
  }

  .p-team {
    width: 70% !important;
    font-size: 15px;
  }

  .standings-columns {
    display: flex;
    position: relative;
    width: 100%;
    height: 50px;
  }

  .standings-columns p {
    width: 20%;

    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*
  *-----------------------------------------------------*
  *BOTTOMROW
  *------------------------------------------------------*
  */

  .bottomrow {
    display: flex;
    flex-direction: row;
    background: inherit;
    width: 150%;
    margin: 5px auto;
  }

  .standings-lock2 {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    top: 0;
    left: 0;
    z-index: 1000;
    background-image: url(dumb2.png);
    background-size: cover;

    position: sticky;
  }

  .standings-lock2 img {
    width: 120%;
    height: 120%;
    margin-right: -75px;
    object-fit: cover;
  }

  .standings-lock2 p {
    width: 20%;

    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 19px;
    align-items: center;
  }

  .count-standings {
    background: rgba(255, 255, 255, 0.1);
    width: 15%;
  }

  .p-logo {
    overflow: hidden;
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    width: 80% !important;
  }

  .standingz {
    display: flex;
    position: relative;
    width: 100%;
    z-index: 10;
  }

  .standingz p {
    width: 20%;
    background: rgba(255, 255, 255, 0.1);

    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 19px;
    align-items: center;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *LEADERS
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */
  .kipper4-main {
    height: 75%;
    position: relative;
  }

  .leaders-header {
    height: 15%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /*
  *-----------------------------------------------------*
  *CONTAINER3
  *------------------------------------------------------*
  */
  .container3 {
    height: 85%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container3 {
    height: 90%;
  }

  #prev-slide4,
  #next-slide4 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    z-index: 999;
  }

  #prev-slide4 {
    left: 15px;
    border-radius: 3px 3px 3px 3px;
  }

  #next-slide4 {
    right: 15px;
    border-radius: 3px 3px 3px 3px;
  }

  #prev-slide4:hover,
  #next-slide4:hover {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.8);
  }

  /*
  *-----------------------------------------------------*
  *MYSLIDES4
  *------------------------------------------------------*
  */

  .mySlides4 {
    display: flex;
    font-family: race;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: relative;
    justify-content: center;
  }

  .leaders {
    width: 85%;
    height: 90%;
    position: relative;
    padding-bottom: 10%;
  }

  .leaders h2 {
    height: 10%;
    font-size: 20px;
  }
  /* ********* */
  .topg {
    height: 65%;
    margin-bottom: 5%;
  }

  .imagecontainerheader {
    height: 25%;
    display: flex;
    align-items: center;

    justify-content: space-evenly;
  }

  .imagecontainerheader div {
    text-align: center;
  }

  .g-head {
    width: 30%;
    font-size: 40px;
    display: flex;
  }

  .circle {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    border-radius: 50%; /* Make the div circular */
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Glow effect */
    font-size: 18px;
    justify-content: center;
    align-items: center;
    display: flex;
    border: 4px solid white; /* Border color */
  }

  .circle::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;

    border-radius: inherit;
  }

  .circle-goalie {
    font-size: 18px;
  }

  .dope {
    position: absolute;
    opacity: 30%;
    width: 100%;
    height: 100%;
  }

  .g-number {
    width: 70%;
    font-size: 70px;
    background: linear-gradient(
      90deg,
      #1f005c,
      #5b0060,
      #870160,
      #ac255e,
      #ca485c,
      #e16b5c,
      #f39060,
      #ffb56b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .imagecontainer {
    height: 55%;

    display: flex;

    width: 100%;
    position: relative;
  }

  .winner1 {
    width: 30%;
    height: 100%;
    position: relative;
  }

  .winner1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .winner2 {
    width: 70%;
    height: 100%;

    position: relative;
  }

  .winner2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .firstname {
    height: 7.5%;
    display: inline-block;
    width: 100%;
    font-size: 15px;
    align-items: center;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .lastname {
    font-size: 23px;
    height: 12.5%;
    display: inline-block;
    width: auto;

    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ************************
  /* ************************
  /* ************************
  /* ****** THIS IS BEING EXTRA BELOW - all that is required for the .playerdiv is the first one. All the other styling beneath that is
  /* ******* just incase name is super super long and doesn't fit, so user can scroll */

  .playerdiv {
    height: 5%;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
  }

  .playerdiv p {
    margin: 0;
    overflow: hidden; /* Prevents text from spilling outside */
    white-space: nowrap; /* Prevents text wrapping */
  }

  /* First <p> for the name */
  .playerdiv p:first-child {
    width: 70%;
    overflow-x: auto; /* Allows horizontal scrolling for long names */
    white-space: nowrap; /* Keeps the name in a single line */
  }

  /* Second <p> for the score */
  .playerdiv p:nth-child(2) {
    width: 30%;
    text-align: right; /* Aligns text to the right */
  }

  /* Styling for WebKit-based browsers (Chrome, Safari, iOS) */
  .playerdiv p::-webkit-scrollbar {
    height: 3px; /* Set scrollbar thickness */
  }

  .playerdiv p::-webkit-scrollbar-thumb {
    background-color: #f1f1f1; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the scrollbar thumb */
  }

  .playerdiv p::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
  }
  /*
  *-----------------------------------------------------*
  *DOTCONTAINER
  *------------------------------------------------------*
  */

  .dotcontainer {
    height: 10%;
    display: flex;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
  }

  .dot4 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
    outline-style: none;
    border-style: none;
    color: white;
    font-family: race;
  }

  .dot4.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media only screen and (min-width: 361px) and (max-width: 1200px) {
  .everything {
    height: 100%;
    width: 100%;
    position: fixed;
    display: block;
    background-image: url(vecteezy_red-and-dark-blue-shaded-gradient-background_2504349.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /*this in combo with HTML tag with W/H 100%, will keep entire body in view with no scroll*/
  }
  .header {
    height: 15%;
    width: 100%;
    display: flex;
    /* 
    background-image: url(banner2.png);
    background-size: cover;
    background-position: center; */
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .header-img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-img img {
    width: 320px;
    height: 100%;
    object-fit: contain;
  }

  .wrapper {
    height: 75%;
    gap: 0;
    padding: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: auto;
    background: inherit;
  }
  .wrapper main {
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: none;
  }

  [dir="1"] > #recap,
  [dir="2"] > #preview,
  [dir="3"] > #standings,
  [dir="4"] > #leaders {
    display: flex;
    /*no idea how this works but this is just stating which one is = to. For JS */
  }

  .mobilecontainer {
    height: 10%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: "race";
  }

  .nav-button {
    width: 25%;
    font-size: 12px;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    background: none;
    outline-style: none;
    border-style: none;
    color: white;
    font-family: race;
    cursor: pointer;
  }

  .nav-button img {
    height: 50%;
    display: flex;
    width: 50%;
    object-fit: contain;
  }

  .nav-button p {
    height: 10%;
    display: flex;
    max-width: 100%;
  }

  .nav-button.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #view1.active img {
    content: url("hockeysticksgreen.png");
  }

  #view2.active img {
    content: url("schedulegreen.png");
  }

  #view3.active img {
    content: url("leaderboardgreen.png");
  }

  #view4.active img {
    content: url("onecirclegreen.png");
  }

  /* width */
  ::-webkit-scrollbar {
    width: 6px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #1f2937;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background-color: white;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *RECAP
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-recap {
    height: 75%;
    display: flex;
    flex-direction: column;
  }

  .recap-header {
    height: 15%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *CONTAINER
  *------------------------------------------------------*
  */

  .container {
    height: 85%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container {
    height: 90%;
    position: relative;
  }

  .slide {
    height: 100%;
    width: 100%;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    position: relative;
    background-size: cover;
    background-position: center;
  }

  /* 
  *-----------------------------------------------------*
  *RECAP-TOP
  *------------------------------------------------------*
  */
  .recap-top {
    align-items: center;
    display: flex;
    width: 90%;
    height: 30%;
    margin: 0 auto;
  }

  .teamlogos {
    width: 28%;
    height: 100%;
    display: flex;
    position: relative;
  }

  .teamlogos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .teamlogosP {
    height: 50%;
    width: 44%;
    font-family: race;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
  }

  .teamlogos-score {
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    font-family: race;
    width: 100%;
    text-align: center;
  }

  .final {
    font-size: 20px;
    height: 50%;
    font-family: race;
    text-align: center;
    width: 100%;
  }

  /* 
  *-----------------------------------------------------*
  *RECAP-MAIN
  *------------------------------------------------------*
  */

  .recap-main {
    height: 70%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .goal-row {
    height: 80px;
    width: 100%;
    margin: 5px auto;
    position: relative;
    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .logo-score {
    width: 30%;
    height: 100%;
    display: flex;
  }

  .goal-logo {
    width: 50%;
    height: 100%;
    position: relative;

    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .goal-logo img {
    width: 200%;
    height: 200%;
    object-fit: contain;
    margin-left: -50px;
  }

  .count {
    font-family: race;
    font-size: 20px;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
  }

  .count p {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }

  .count-winner {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .goal-mugshot {
    width: 25%;
    height: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }

  .goal-mugshot img {
    width: 115%;
    height: 115%;
    object-fit: contain;
  }
  .goal-name {
    width: 40%; /* Maintain fixed width */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent text wrapping */
    display: flex;
    justify-content: center;
    margin: auto 10px;
    font-size: 30px;
    flex-direction: column;
    font-family: race;
  }

  .goal-name-goal {
    height: 50%;
    display: inline-flex;
    align-items: center;
    font-family: race;
    width: max-content; /* Grow to fit text content */
    font-size: 20px;
    background: linear-gradient(45deg, #e69e2c, #e010b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .goal-name-assist {
    height: 50%;
    display: flex;
    max-width: 100%;
    font-size: 15px;
    font-family: race;
  }

  .goaliez {
    margin-top: 50px;
  }

  .goal-row-goalies {
    height: 80px;
    width: 100%;
    margin: 5px auto;
    position: relative;
    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .goalie-mugshot {
    width: 25%;
    height: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }

  .goalie-mugshot img {
    width: 115%;
    height: 115%;
    object-fit: contain;
  }

  #prev,
  #next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    background: transparent;
  }

  #prev {
    left: 10px;
  }

  #next {
    right: 10px;
  }

  /* 
  *-----------------------------------------------------*
  *NAVBAR
  *------------------------------------------------------*
  */

  #navbar {
    width: 100%;
    height: 10%;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
    position: relative;
    display: flex;
  }

  .navbutton {
    display: flex;
    width: 100%;
    background: none;

    overflow-x: auto;
  }

  .navbutton button {
    font-size: 17.5px;

    cursor: pointer;
    color: white;
    font-family: race;
  }
  .buttonz {
    min-width: 27.5%;
    border: none;
    margin-right: 25px;
    margin-left: 25px;
    outline: none;
    background: none;
  }

  .buttonz.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *PREVIEW
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-preview {
    height: 75%;
  }

  .preview-header {
    margin: 0 auto;
    height: 15%;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *CONTAINER
  *------------------------------------------------------*
  */

  .container2 {
    height: 85%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container2 {
    height: 90%;
    position: relative;
  }
  .slide2 {
    height: 100%;
    position: relative;

    width: 100%;
    display: flex;

    overflow: hidden;
    flex-direction: row;
    position: relative;
    flex-wrap: wrap;
    background-size: cover;
    background-position: center;
  }

  /* 
  *-----------------------------------------------------*
  *SLIDE2
  *------------------------------------------------------*
  */

  .date-preview {
    width: 90%;
    height: 9%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    margin: 0 auto;
  }

  .schedule-reg {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );

    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    width: 175px;
    height: 50%;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 22px;
    position: absolute;
    bottom: 0;
  }

  .schedule-button {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );

    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    width: 175px;
    height: 50%;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 22px;
  }

  .schedule-button:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }

  .schedule-reg {
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 25px;
  }

  .preview-teams-banner {
    height: 26%; /**** THIS SHOULD BE 50%. WHEN IT IS AT 30%, THERE IS STILL REMAINING 20% IN IT'S CONTAINER THAT IS UNUSED */
    display: flex;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
  }

  .preview-team {
    width: 50%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .preview-team img {
    width: 150%;
    height: 150%;
    object-fit: contain;
  }

  .money {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  }
  /* 
  .preview-team2 {
    width: 20%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .preview-team2 img {
    width: 80%;
    height: 80%;
    object-fit: contain;
  }

  .vs {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  } */

  .preview-names {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .home-record {
    width: 40%;
    display: flex;
    justify-content: center;
  }

  .home-record p {
    font-size: 25px;
    font-family: race;
  }

  .away-record p {
    font-size: 25px;
    font-family: race;
  }

  .away-record {
    width: 40%;
    display: flex;
    justify-content: center;
  }

  .date-record {
    width: 20%;
    display: flex;
  }

  .rank {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .records {
    height: 46%;
    width: 100%;
    overflow: auto;
    flex-direction: column;
  }

  .teamrecords {
    display: flex;
    width: 100%;
    height: 50px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.1);

    margin-bottom: 10px;
  }

  .records-title {
    width: 100%;
    height: 40%;
    font-family: race;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .home-record2 {
    display: flex;
    height: 60%;
    width: 40%;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-family: race;
  }

  .away-record2 {
    display: flex;
    height: 60%;
    width: 40%;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-family: race;
  }

  .date-record {
    height: 60%;
  }

  #prev2,
  #next2 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    background: transparent;
  }

  #prev2 {
    left: 10px;
  }

  #next2 {
    right: 10px;
  }

  /*
  *-----------------------------------------------------*
  *NAVBAR2
  *------------------------------------------------------*
  */

  #navbar2 {
    width: 100%;
    height: 10%;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
    position: relative;
    display: flex;
  }

  .navbutton2 {
    display: flex;
    width: 100%;
    background: none;

    overflow-x: auto;
  }

  .navbutton2 button {
    font-size: 17.5px;

    cursor: pointer;
    color: white;
    font-family: race;
  }
  .buttonz2 {
    min-width: 27.5%;
    border: none;
    margin-right: 25px;
    margin-left: 25px;
    outline: none;
    background: none;
  }

  .buttonz2.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *STANDINGS
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-standings {
    height: 75%;
    display: flex;
    flex-direction: column;
  }

  .standings-header {
    height: 15%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #standings {
    background: inherit;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */

    flex-direction: column;
  }

  .standingswrapper {
    height: 85%;

    width: 100%;
    position: relative;
    font-family: race;
    overflow-x: auto;
    background: inherit;
  }

  /*
  *-----------------------------------------------------*
  *TOPROW
  *------------------------------------------------------*
  */

  .toprow {
    height: 50px;
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    display: flex;
    flex-direction: row;
    width: 150%;
    /* background: inherit; */
    position: sticky;
    top: 0;
    z-index: 100000;
  }

  .standings-lock1 {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 1000;
    position: sticky !important;
    background: inherit;
  }

  .standings-lock1 p {
    text-align: center;
  }

  .p-number {
    position: sticky;
    left: 0;

    width: 30%;
  }

  .p-team {
    width: 70% !important;
  }

  .standings-columns {
    display: flex;
    position: relative;
    width: 100%;
    height: 50px;
  }

  .standings-columns p {
    width: 20%;

    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*
  *-----------------------------------------------------*
  *BOTTOMROW
  *------------------------------------------------------*
  */

  .bottomrow {
    display: flex;
    flex-direction: row;
    background: inherit;
    width: 150%;
    margin: 5px auto;
  }

  .standings-lock2 {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    top: 0;
    left: 0;
    z-index: 1000;
    background-image: url(dumb2.png);
    background-size: cover;

    position: sticky;
  }

  .standings-lock2 img {
    width: 120%;
    height: 120%;
    margin-right: -75px;
    object-fit: cover;
  }

  .standings-lock2 p {
    width: 20%;

    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 19px;
    align-items: center;
  }

  .count-standings {
    background: rgba(255, 255, 255, 0.1);
    width: 15%;
  }

  .p-logo {
    overflow: hidden;
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    width: 80% !important;
  }

  .standingz {
    display: flex;
    position: relative;
    width: 100%;
    z-index: 10;
  }

  .standingz p {
    width: 20%;
    background: rgba(255, 255, 255, 0.1);

    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 19px;
    align-items: center;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *LEADERS
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */
  .kipper4-main {
    height: 75%;
    position: relative;
  }

  .leaders-header {
    height: 15%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /*
  *-----------------------------------------------------*
  *CONTAINER3
  *------------------------------------------------------*
  */
  .container3 {
    height: 85%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container3 {
    height: 90%;
  }

  #prev-slide4,
  #next-slide4 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    z-index: 999;
  }

  #prev-slide4 {
    left: 15px;
    border-radius: 3px 3px 3px 3px;
  }

  #next-slide4 {
    right: 15px;
    border-radius: 3px 3px 3px 3px;
  }

  #prev-slide4:hover,
  #next-slide4:hover {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.8);
  }

  /*
  *-----------------------------------------------------*
  *MYSLIDES4
  *------------------------------------------------------*
  */

  .mySlides4 {
    display: flex;
    font-family: race;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: relative;
    justify-content: center;
  }

  .leaders {
    width: 85%;
    height: 90%;
    position: relative;
    padding-bottom: 10%;
  }

  .leaders h2 {
    height: 10%;
    font-size: 20px;
  }

  .topg {
    height: 65%;
    margin-bottom: 5%;
  }

  .imagecontainerheader {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .imagecontainerheader div {
    text-align: center;
  }

  .g-head {
    width: 30%;
    font-size: 40px;
    display: flex;
  }

  .circle {
    width: 50px;
    height: 50px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    border-radius: 50%; /* Make the div circular */
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Glow effect */

    justify-content: center;
    align-items: center;
    display: flex;
    border: 4px solid white; /* Border color */
  }

  .circle::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;

    border-radius: inherit;
  }

  .dope {
    position: absolute;
    opacity: 30%;
    width: 100%;
    height: 100%;
  }

  .g-number {
    width: 70%;
    font-size: 70px;
    background: linear-gradient(
      90deg,
      #1f005c,
      #5b0060,
      #870160,
      #ac255e,
      #ca485c,
      #e16b5c,
      #f39060,
      #ffb56b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .imagecontainer {
    height: 55%;

    display: flex;

    width: 100%;
    position: relative;
  }

  .winner1 {
    width: 30%;
    height: 100%;
    position: relative;
  }

  .winner1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .winner2 {
    width: 70%;
    height: 100%;

    position: relative;
  }

  .winner2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .firstname {
    height: 7.5%;
    display: inline-block;
    width: 100%;
    font-size: 15px;
    align-items: center;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .lastname {
    font-size: 20px;
    height: 12.5%;
    display: inline-block;
    width: auto;

    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ************************
  /* ************************
  /* ************************
  /* ****** THIS IS BEING EXTRA BELOW - all that is required for the .playerdiv is the first one. All the other styling beneath that is
  /* ******* just incase name is super super long and doesn't fit, so user can scroll */

  .playerdiv {
    height: 5%;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
  }

  .playerdiv p {
    margin: 0;
    overflow: hidden; /* Prevents text from spilling outside */
    white-space: nowrap; /* Prevents text wrapping */
  }

  /* First <p> for the name */
  .playerdiv p:first-child {
    width: 70%;
    overflow-x: auto; /* Allows horizontal scrolling for long names */
    white-space: nowrap; /* Keeps the name in a single line */
  }

  /* Second <p> for the score */
  .playerdiv p:nth-child(2) {
    width: 30%;
    text-align: right; /* Aligns text to the right */
  }

  /* Styling for WebKit-based browsers (Chrome, Safari, iOS) */
  .playerdiv p::-webkit-scrollbar {
    height: 3px; /* Set scrollbar thickness */
  }

  .playerdiv p::-webkit-scrollbar-thumb {
    background-color: #f1f1f1; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the scrollbar thumb */
  }

  .playerdiv p::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
  }

  /*
  *-----------------------------------------------------*
  *DOTCONTAINER
  *------------------------------------------------------*
  */

  .dotcontainer {
    height: 10%;
    display: flex;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
  }

  .dot4 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
    outline-style: none;
    border-style: none;
    color: white;
    font-family: race;
  }

  .dot4.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media only screen and (min-width: 1201px) {
  .everything {
    background-image: url(vecteezy_red-and-dark-blue-shaded-gradient-background_2504349.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  .header {
    height: 150px;
    max-width: 1000px;
    display: flex;
    /* 
    background-image: url(banner2.png);
    background-size: cover;
    background-position: center; */
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 35px 0;
  }

  .header-img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* .header {
    height: 150px;
    max-width: 1000px;
    display: flex;
    background-image: url(banner2.png);
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    border: 2px solid red;
  } */

  .dashboard {
    display: flex;
    max-width: 1500px;
    padding-top: 20px;
    height: 45px;
    margin: 0 auto;
    border: 2px solid blue;
    font-family: race;
  }

  .dashboard-menu {
    display: flex;
    width: 100%;
    list-style-type: none;
    justify-content: space-evenly;
  }

  .dashboard-menu li {
    width: 20%;
    border: 2px solid green;
  }

  .wrapper {
    height: 1300px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 0px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, 1fr);
    background: inherit;
  }

  .wrapper img {
    width: 100%;
    height: 100%;
  }

  .wrapper > main {
    background-size: 100% 100%;
  }

  .wrapper > main:nth-child(1) {
    grid-column: span 4;
    grid-row: span 5;
  }

  .wrapper > main:nth-child(2) {
    grid-column: span 2;
    grid-row: span 3;
  }

  .wrapper > main:nth-child(3) {
    grid-column: span 2;
    grid-row: span 7;
  }

  .wrapper > main:nth-child(4) {
    grid-column: span 4;
    grid-row: span 5;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 6px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #1f2937;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background-color: white;
    cursor: pointer;
  }

  .standingswrapper::-webkit-scrollbar-track {
    margin-top: 105px;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *RECAP
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-recap {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .recap-header {
    height: 10%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #recap {
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
  }

  /* 
  *-----------------------------------------------------*
  *CONTAINER
  *------------------------------------------------------*
  */

  .container {
    height: 90%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container {
    height: 90%;
    position: relative;
  }

  .slide {
    height: 90%;
    width: 100%;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    position: relative;
    background-size: cover;
    background-position: center;
  }

  /* 
  *-----------------------------------------------------*
  *RECAP-TOP
  *------------------------------------------------------*
  */

  .recap-top {
    align-items: center;
    display: flex;
    width: 90%;
    height: 30%;
    margin: 0 auto;
  }

  .teamlogos {
    width: 33%;
    height: 100%;
    display: flex;
    position: relative;
  }

  .teamlogos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .teamlogosP {
    height: 34%;
    width: 100%;
    font-family: race;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    font-size: 100px;
  }

  .teamlogos-score {
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    font-family: race;
    width: 100%;
    text-align: center;
  }

  .final {
    font-size: 30px;
    height: 30%;
    font-family: race;
    text-align: center;
    width: 100%;
  }

  /* 
  *-----------------------------------------------------*
  *RECAP-MAIN
  *------------------------------------------------------*
  */

  .recap-main {
    height: 70%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .goal-row {
    height: 80px;
    width: 100%;
    margin: 5px auto;

    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .logo-score {
    width: 20%;
    height: 100%;
    display: flex;
  }

  .goal-logo {
    width: 50%;
    height: 100%;
    position: relative;

    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .goal-logo img {
    width: 150%;
    height: 150%;
    object-fit: contain;
    margin-left: -50px;
  }

  .count {
    font-family: race;
    font-size: 30px;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
  }

  .count p {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }

  .count-winner {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .goal-name {
    max-width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin: auto 10px;
    font-size: 30px;
    flex-direction: column;
    font-family: race;
  }

  .goal-name-goal {
    height: 50%;
    display: flex;
    align-items: center;
    font-family: race;
    max-width: 100%;
    font-size: 30px;
    background: linear-gradient(45deg, #e69e2c, #e010b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .goal-name-assist {
    height: 50%;
    display: flex;
    max-width: 100%;
    font-size: 20px;
    font-family: race;
  }

  .goaliez {
    margin-top: 50px;
  }

  .goal-row-goalies {
    height: 80px;
    width: 100%;
    margin: 5px auto;

    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
  }

  #prev,
  #next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    background: transparent;
  }

  #prev {
    left: 10px;
  }

  #next {
    right: 10px;
  }

  /* 
  *-----------------------------------------------------*
  *NAVBAR
  *------------------------------------------------------*
  */

  #navbar {
    width: 100%;
    height: 10%;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
    position: relative;
    display: flex;
  }

  .navbutton {
    display: flex;
    width: 100%;
    height: 100%;
    background: none;
    cursor: pointer;
    font-family: race;
    font-size: 25px;
    overflow-x: auto;
  }

  .navbutton button {
    font-size: 20px;
    border: none;
    outline: none;
    background: none;
    color: white;
    cursor: pointer;
    font-family: race;
  }
  .buttonz {
    min-width: 100px;
    margin: 0 25px;
    border: none;
    outline: none;
    background: none;
  }

  .buttonz.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *PREVIEW
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-preview {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .preview-header {
    height: 15%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #preview {
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
  }
  /* 
  *-----------------------------------------------------*
  *CONTAINER
  *------------------------------------------------------*
  */

  .container2 {
    height: 85%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container2 {
    height: 90%;
    position: relative;
  }

  .slide2 {
    width: 100%;
    display: flex;
    height: 90%;
    overflow: hidden;
    flex-direction: row;
    position: relative;
    flex-wrap: wrap;
    background-size: cover;
    background-position: center;
  }

  /* 
  *-----------------------------------------------------*
  *SLIDE2
  *------------------------------------------------------*
  */

  .date-preview {
    width: 90%;
    height: 17.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    position: relative;
  }

  .schedule-reg {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );

    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    width: 175px;
    height: 50%;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 22px;
    position: absolute;
    bottom: 0;
  }

  .schedule-button {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );

    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    width: 175px;
    height: 50%;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 22px;
  }

  .schedule-button:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }

  .schedule-reg {
    font-family: race;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    font-size: 25px;
  }

  .preview-teams-banner {
    height: 30%; /**** THIS SHOULD BE 50%. WHEN IT IS AT 30%, THERE IS STILL REMAINING 20% IN IT'S CONTAINER THAT IS UNUSED */
    display: flex;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
  }

  .preview-team {
    width: 50%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .preview-team img {
    width: 180%;
    height: 180%;
    object-fit: contain;
  }

  .money {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  }
  /* 
  .preview-team2 {
    width: 20%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .preview-team2 img {
    width: 80%;
    height: 80%;
    object-fit: contain;
  }

  .vs {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  } */

  .preview-names {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .home-record {
    width: 40%;
    display: flex;
    justify-content: center;
  }

  .home-record p {
    font-size: 25px;
    font-family: race;
  }

  .away-record p {
    font-size: 25px;
    font-family: race;
  }

  .away-record {
    width: 40%;
    display: flex;
    justify-content: center;
  }

  .date-record {
    width: 20%;
    display: flex;
  }

  .rank {
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .records {
    font-family: race;
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    height: 25%;
    display: flex;
    flex-direction: column;
  }

  .teamrecords {
    display: flex;
    width: 100%;
    height: 50px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.1);

    margin-bottom: 10px;
  }

  .records-title {
    width: 100%;
    height: 40%;
    font-family: race;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .home-record2 {
    display: flex;
    height: 60%;
    width: 40%;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: race;
  }

  .away-record2 {
    display: flex;
    height: 60%;
    width: 40%;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: race;
  }

  .date-record {
    height: 60%;
  }

  #prev2,
  #next2 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    background: transparent;
  }

  #prev2 {
    left: 10px;
  }

  #next2 {
    right: 10px;
  }

  #navbar2 {
    display: flex;
    width: 100%;
    height: 10%;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */

    overflow-x: auto;
    position: relative;
  }

  .navbutton2 {
    display: flex;
    width: 100%;
    height: 100%;
    background: none;
    cursor: pointer;
    font-family: race;
    font-size: 25px;
    overflow-x: auto;
  }

  .navbutton2::-webkit-scrollbar {
    display: none;
  }

  .navbutton2 button {
    font-size: 20px;
    border: none;
    cursor: pointer;
    outline: none;
    background: none;
    margin: 0 20px;
    color: white;
    font-family: race;
  }
  .buttonz2 {
    min-width: 100px;
  }

  .buttonz2.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *STANDINGS
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .slide-standings {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  #standings {
    background: inherit;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */

    flex-direction: column;
  }
  .standings-header {
    height: 10%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .standingswrapper {
    height: 100%;
    width: 100%;
    position: relative;
    font-family: race;
    overflow-x: auto;
    background: inherit;
  }
  /*
  *-----------------------------------------------------*
  *TOPROW
  *------------------------------------------------------*
  */
  .toprow {
    display: flex;
    flex-direction: row;
    width: 150%;
    /* background: inherit; */
    background-image: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    position: sticky;
    top: 0;
    z-index: 100000;
  }

  .standings-lock1 {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 1000;
    position: sticky !important;
    background: inherit;
  }

  .standings-lock1 p {
    text-align: center;
  }

  .p-number {
    position: sticky;
    left: 0;

    width: 30%;
  }

  .p-team {
    width: 70% !important;
  }

  .standings-columns {
    display: flex;
    position: relative;
    width: 100%;
    height: 100px;
  }

  .standings-columns p {
    width: 20%;

    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*
  *-----------------------------------------------------*
  *BOTTOMROW
  *------------------------------------------------------*
  */

  .bottomrow {
    display: flex;
    flex-direction: row;
    background: inherit;
    width: 150%;
    margin: 5px auto;
  }

  .standings-lock2 {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    top: 0;
    left: 0;
    z-index: 1000;
    background-image: url(dumb2.png);
    background-size: cover;

    position: sticky;
  }

  .standings-lock2 img {
    width: 120%;
    height: 120%;
    margin-right: -75px;
    object-fit: cover;
  }

  .standings-lock2 p {
    width: 20%;

    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 19px;
    align-items: center;
  }

  .count-standings {
    background: rgba(255, 255, 255, 0.1);
    width: 15%;
  }

  .p-logo {
    overflow: hidden;
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    width: 80% !important;
  }

  .standingz {
    display: flex;
    position: relative;
    width: 100%;
    z-index: 10;
  }

  .standingz p {
    width: 20%;
    background: rgba(255, 255, 255, 0.1);

    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 19px;
    align-items: center;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                            *LEADERS
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */

  .kipper4-main {
    height: 100%;
    position: relative;
  }

  .leaders-header {
    height: 10%;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: race;
    background-position: center;
    background-size: cover;
    background: linear-gradient(
      to right,
      #ff512f 0%,
      #dd2476 51%,
      #ff512f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #leaders {
    background: inherit;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
  }

  /*
  *-----------------------------------------------------*
  *CONTAINER3
  *------------------------------------------------------*
  */

  .container3 {
    height: 85%;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  #slideshow-container3 {
    position: relative;
    height: 100%;
  }

  #prev-slide4,
  #next-slide4 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    display: flex;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    z-index: 999;
  }

  #prev-slide4 {
    left: 15px;
    border-radius: 3px 3px 3px 3px;
  }

  #next-slide4 {
    right: 15px;
    border-radius: 3px 3px 3px 3px;
  }

  #prev-slide4:hover,
  #next-slide4:hover {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.8);
  }

  /*
  *-----------------------------------------------------*
  *MYSLIDES4
  *------------------------------------------------------*
  */

  .mySlides4 {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 90%;
    position: relative;
    font-family: race;
  }

  .leaders {
    height: 100%;
    width: 30%;
    padding: 0 2.5%;

    position: relative;
  }

  .leaders h2 {
    height: 10%;
    font-size: 30px;
  }

  .topg {
    display: flex;
    flex-wrap: wrap;

    position: relative;
    text-align: left;
  }

  .imagecontainerheader {
    display: flex;
    justify-content: space-evenly;

    width: 100%;
  }

  .imagecontainerheader div {
    text-align: center;
  }

  .g-head {
    width: 30%;
    font-size: 40px;
    display: flex;
  }
  .circle {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    border-radius: 50%; /* Make the div circular */
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Glow effect */
    font-size: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
    border: 4px solid white; /* Border color */
  }

  .circle::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;

    border-radius: inherit;
  }

  .g-number {
    width: 70%;
    font-size: 50px;
    background: linear-gradient(
      90deg,
      #1f005c,
      #5b0060,
      #870160,
      #ac255e,
      #ca485c,
      #e16b5c,
      #f39060,
      #ffb56b
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .imagecontainer {
    display: flex;

    width: 100%;
    position: relative;
    height: 150px;
  }

  .dope {
    position: absolute;
    opacity: 30%;
  }

  .winner1 {
    width: 30%;
    height: 100%;
    position: relative;
  }

  .winner1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .winner2 {
    width: 70%;
    height: 100%;

    position: relative;
  }

  .winner2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .firstname {
    font-size: 20px;
    min-width: 80%;
    max-width: 100%;
    height: 100%;
    align-items: center;
    background: linear-gradient(45deg, #e69e2c, #e010b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .lastname {
    font-size: 30px;
    max-width: 100%;
    align-items: center;
    background: linear-gradient(45deg, #e69e2c, #e010b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .playerdiv {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }

  /*
  *-----------------------------------------------------*
  *DOTCONTAINER
  *------------------------------------------------------*
  */

  .dotcontainer {
    height: 10%;
    display: flex;
    box-shadow: 0px 0px 16px 0 rgba(255, 0, 0, 0.5),
      /* Red shadow */ 0px 0px 32px 0 rgba(28, 43, 255, 0.444),
      /* Blue shadow */ 0px 0px 48px 0 rgba(255, 0, 0, 0.5); /* Red shadow */
  }

  .dot4 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;

    outline-style: none;
    border-style: none;
    color: white;
    font-family: race;
  }

  .dot4.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .dot4 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
    outline-style: none;
    border-style: none;
    color: white;
    font-family: race;
  }

  .dot4.active {
    background: radial-gradient(
      circle farthest-corner at center center,
      #38cf6a 0%,
      #40cacf 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
                    *MOBILE CONTAINER
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *-----------------------------------------------------*
  *------------------------------------------------------*
  */
  .mobilecontainer {
    display: none;
  }
}