html, body {
  margin: 0;
  height: 100vh;
  overflow-x: hidden;
  background-color: rgb(18, 18, 18);
  scroll-behavior: smooth;

}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}



#hero_page {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}


#hero_page_image {

  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 2vw;

  width: 40vw;
  height: 70vh;
  background-image: url('images/westlake_boys_football.jpeg'); /* Replace with your background image */
  background-size: cover;
  background-position: 50% 0%;
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); /* Creates the parallelogram shape */
  filter: brightness(100%);
}

#hero_page_title{

  position: relative;
  width: 50vw;
  left: -20vw

}

#hero_page_text_container{

  position: absolute;
  top: 37%;
  left: 80%; /* Make sure it's centered horizontally */
  transform: translate(-50%, -50%); /* Move it back by 50% of its width and height */
  width: 380px;
  height: 20vh;

  text-align: left;

  color: white;

}

#hero_page_small_container{

  margin-left: -80px

}

#continue_button{

  position: relative;

  top: 50%;
  margin-left: -50px;
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  transform: translateY(-50%);

  font-family: "RobotoCondensed Light";
  font-size: 18px;
  border: solid 2px white;
  border-radius: 3px;

  transition: 0.3s ease-in-out;

  cursor: pointer;

}

#continue_button:hover{

  transform: scale(1.1) translateY(-45%);

}

#hero_page_text_container2{

  position: absolute;
  top: 47%;
  left: 50%; /* Make sure it's centered horizontally */
  transform: translate(-50%, -50%); /* Move it back by 50% of its width and height */
  width: 380px;
  height: 20vh;

  text-align: center;

  color: white;

  display: none;

}

#continue_button2{
  position: relative;

  margin-top: 40px;
  left: 50%;
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  transform: translateX(-50%);

  font-family: "RobotoCondensed Light";
  font-size: 18px;
  border: solid 2px white;
  border-radius: 3px;

  transition: 0.3s ease-in-out;

  cursor: pointer;

}

#continue_button2:hover{

  transform: scale(1.1) translateX(-45%);

}

#main_page_image_2{

  height: 100%;

  background-image: url("images/westlake_boys_football 2.jpeg");
  background-size: cover;
  background-position: center;

}

#slide_page{

  position: relative;

  width: 100vw;
  height: 70vh;

}

#slide_container{

  position: absolute;

  top: 0;
  left: 0;

  width: max-content;
  height: 100%;

  display: flex;
  flex-direction: row;

  transition: 0.8s left ease-in-out;

}

.slide{

  position: relative;

  left: 0;
  top: 0;

  flex: 0 0 100vw; 
  height: 100%;

  color: white;

}

.slide_text{

  position: absolute;
  right: 0;

  top: 50%;
  transform: translateY(-50%);

  width: 65vw;
  height: max-content;

}

#buttons_container1{

  position: absolute;
  top: 50%;
  left: 5%;

  transform: translateY(-50%);

  aspect-ratio: 1/1;

  width: 20vw;

  overflow-y: auto;

  padding: 20px;

}

.slide_buttons{

  position: relative;

  left: 0;
  margin-top: 50px;


  aspect-ratio: 1/1;
  width: 100%;
  border-radius: 100%;

  background-size: contain;
  background-position: center;

  transition: 0.3s ease-in-out;

  cursor: pointer;

}

.slide_buttons:hover{

  transform: scale(1.05);

}

#mobile_version{

  position: absolute;

  left: 50%;
  top: 80%;

  transform: translateX(-50%);
  
  width: 80vw;
  height: 120px;

  display: none;

}

#buttons_container2{

  position: relative;
  left: 0;
  width: 100%;
  height: 100%;

  padding: 10px;

  overflow-x: auto;

  display: flex;
  flex-direction: row;

}

#buttons_container2::-webkit-scrollbar {
  height: 5px;
}


.slide_buttons2{

  aspect-ratio: 1/1;
  height: 100%;

  background-color: pink;

  border-radius: 100%;

  margin-left: 20px;

  background-size: contain;
  background-position: center;

  transition: 0.3s ease-in-out;

  cursor: pointer;

}

.slide_buttons2:hover{

  transform: scale(1.1);

}


.header1{

  font-family: "Conneqt Black";
  font-size: 5vh;
  color: white;

}

.header2{

  font-family: "Conneqt Black";
  font-size: 40px;
  color: white;

}

.text1{

  font-family: "RobotoCondensed Medium";
  color: white;
  font-size: 18px;

}

.text2{

  font-family: "RobotoCondensed MediumItalic";
  color: white;
  font-size: 3.5vh;

}



@media (max-width: 1100px) {

  #hero_page_image{

    left: 0;
    width: 100%;
    height: 100vh;
    clip-path: none;
    filter: brightness(60%);

  }

  #hero_page_text_container{

    display: none;

  }
  
  #hero_page_text_container2{

    display: block;

  }

  .text2{
    font-size: 15px !important;
  
  }

  .header2{

    font-size: 20px;

  }

  .navbar .header {
    font-size: 15px !important;
  }

  .header1{

    font-size: 30px !important;

  }
  

}

@media (max-width: 700px) {
  
  ::-webkit-scrollbar {
    width: 2px;
  }

  .slide_text{

    transform: translate(-50%, -50%);
    left: 50%;
    width: 98%;

  }

  .slide_text .header2{

    text-align: center;

  }

  .slide_text .text2{

    font-size: 13px !important;
    text-align: center;
    width: 100% !important;

  }

  #tip_header1{

    display: none;

  }

  #buttons_container1{

    display: none;

  }

  #mobile_version{

    display: block;

  }

}

@media (max-width: 410px) {

  #hero_page_text_container2 .text1{

    position: relative;

    left: 50%;

    transform: translateX(-50%);

    width: 80%;

  }

}


/*--- nav bar ---*/


@media(max-width:850px) {

  @keyframes slideDown {
    from {
      max-height: 0;
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      max-height: 500px; /* Adjust as needed */
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .navbar-collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
  }
  
  
  .navbar-collapse.show {
    max-height: 500px;
  }
  
  .navbar-toggler:focus,
  .navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
  }
  

}

@keyframes nav_bar_background {
  
  0% {opacity: 0;}

  100% { opacity: 1; }

}


.navbar{

  width: 100%;
  position: fixed;
  z-index: 12;

  background-color: rgb(29, 29, 29);

}

.navbar-nav .nav-link{
  margin-left:30px;
  margin-right:30px;
  color: var(--white);
  text-align: center;
}

.active{

  color: var(--yellow) !important

}

.navbar-toggler-icon{

  filter: invert(100%);
  transition: 0.2s ease-in-out;

}

.navbar .header{

  font-size: 2vh;
  font-family: "Conneqt Black";
  color: white ;
  margin-left: 10px;

}


.nav-item{

  color: white;
  font-family: "RobotoCondensed MediumItalic";
  transition: 0.25s ease-in-out;
  cursor: pointer
  
}

.nav-item:hover{

  color: rgb(128, 128, 128);
  
}



/*----- imported fonts -----*/
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/Bebas_Neue/BebasNeue-Regular.ttf");
}

@font-face {
  font-family: "RobotoCondensed Medium";
  src: url("fonts/Roboto_Condensed/static/RobotoCondensed-Medium.ttf");
}
@font-face {
  font-family: "RobotoCondensed Light";
  src: url("fonts/Roboto_Condensed/static/RobotoCondensed-Light.ttf");
}

@font-face {
  font-family: "RobotoCondensed MediumItalic";
  src: url("fonts/Roboto_Condensed/static/RobotoCondensed-MediumItalic.ttf");
}

@font-face {
  font-family: "Conneqt Black";
  src: url("fonts/Conneqt_Black/Roman Melikhov - Conneqt Black.otf");
}