@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

body{
    font-family: 'Plus Jakarta Sans', sans-serif;
}

table{
  width: 60%;
}

ul{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
  /* Reset some default styles for better consistency across browsers */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}


/* VARIABLES */
:root {
  --main-padding: 0rem 8rem 5rem 8rem;
  --header-padding: 5rem;
  --title-img-2-fontsize: 9rem;
  --title-img-2-margin: -30px 0 0 0;
  --border-radius-title-img: 40px;
  --navbar-button-margin: 0rem 0rem 0rem 2rem;
  --navbar-flex-direction: row;
}
@media screen and (max-width: 1350px) { /* tab */
  :root {
      --main-padding: 0rem 2rem 5rem 2rem;
      --header-padding: 2rem;
      --title-img-2-fontsize: 7rem;
      --border-radius-title-img: 40px;
      --title-img-2-margin: -15px 0 0 0;
      --navbar-button-margin: 0;
      --navbar-flex-direction: column;
  }

  #nav-links{
    display: none;
  }
  #navbar{
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .navbar-logo-title{
    padding-left: 0 !important;
  }
}
@media screen and (max-width: 660px) { /* phone */
  :root {
      --main-padding: 0rem 0.5rem 5rem 0.5rem;
      --header-padding: 2rem;
      --border-radius-title-img: 0px;
      --title-img-2-fontsize: 5rem;
      --title-img-2-margin: 0;
      --navbar-flex-direction: column;
      --navbar-button-margin: 0;
  }

  #nav-links{
    display: none;
  }
  #navbar{
    justify-content: center;
  }
  .navbar-logo-title{
    padding-left: 0 !important;
  }
}

.wrapper{
  margin: var(--main-padding);
}

/*------ HEADER ------*/ 

.navbar {
  color: white;
  display: flex;
  position: fixed;
  width: 100%;
  padding-top: 0.3rem;
  justify-content: space-between;
  align-items: center;
}

  .navbar-logo-title{
    display: flex;
    align-items: center;
    padding-left: 3rem;
  }

  .navbar img{
    width: 6rem;
  }

  .navbar .links{
    display: flex;
    padding-right: 3rem;
  }

    .navbar .links div{
      text-decoration: none;
      color: var(--navbar-btn-color);
      font-size: 1.5rem;
      font-weight: 600;
      padding: 1.5rem;
      user-select: none;
      opacity: 80% !important;
    }
    
    .navbar .links div:hover{
      opacity: 100% !important;
      cursor: pointer;
    }

  .navbar-title h1{
    font-size: 3rem;
    font-weight: 900;
  }

  .navbar-title p{
    font-size: 1rem;
    margin-left: 2px;
  }

/*------ TOP PAGE ------*/
.top-page{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  margin-bottom: 2rem;
  background-image: url("../images/soccer-field.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  user-select: none;
  transition: 0.5s;
}

.top-page div{
  opacity: 90%;
}

.main-title{
  text-align: center;
  font-weight: 800;
  margin-top: 25vh;
}

  .main-title h2{
    font-size: var(--title-img-2-fontsize);
    margin-top: -1.5rem;
  }

  .main-title p{
    padding-top: 2rem;
    font-size: 2rem;
  }

  /*------ DISCORVER ------*/ 
.discover{
  display: flex;
  justify-content: center;
}
  .discover p{
    text-align: center;
    padding: 0 0 3rem 0;
  }

  .discover p:hover{
    opacity: initial !important;
    cursor: pointer;
  }

/*------ MATCHS CONTAINER ------*/ 
#matches{
  margin-top: 4rem;
}

#matchs-container, #players-container{
  display: flex;
  padding: 1rem 0rem;
  overflow: scroll;
}

.match-container{
  user-select: none;
  padding: 0rem 2rem;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
}

.match-img-container{
  user-select: none;
  display: flex;
}

.match-info-container{
  user-select: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.match-score-img{
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.match-club-img{
  width: 5rem;
  border-radius: 1rem;
  padding: 0rem 0.1rem;
  
}

.match-score{
  user-select: none;
  text-align: end;
}

.player-container{
  display: flex;
  flex-direction: column;
  user-select: none;
  border-right: solid 1px;
  border-color:  rgba(60, 60, 60, 0.451);
  padding: 0rem 2rem;
}

.player-img-info{
  display: flex;
}

.player-img{
  margin-right: 2rem;
}

.player-img img{
  width: 10rem;
}

.player-info{
  display: flex;
  flex-direction: column;
}

.player-number{
  display: flex;
  font-size: 2.5rem;
  font-weight: 500;
  flex-direction: row;
  color: rgb(0, 0, 0);
}

.player-num-support{
  color: rgba(60, 60, 60, 0.451);
  font-size: 1.5rem;
  margin-top: 0.4rem;
}

.player-name{
  display: flex;
  justify-content: space-between;
  font-size: 2rem;
  font-weight: 800;
  
}

.player-stats{
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-stat{
 text-align: center;
 justify-content: center;
}

.player-stat-circle{
  width: 5rem;
  height: 5rem;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: solid 1px black;
  display: flex;
  margin: 0rem 1rem;
}

table, th, td{
  border: solid 1px;
  border-collapse: collapse;
  border-color: white;
}

.special-tr, .special-tr td{
  background-color: rgba(0, 0, 0, 0.338);
  border-color: rgba(0, 0, 0, 0);
  color: white;
}

#ranking-container{
  width: 100%;
  overflow: scroll;
}

td{
  text-align: center;
}

.td-name, .th-name{
  text-align: start;
  padding-left: 1rem;
}

.tr-titles th{
  border-bottom-color:rgba(0, 0, 0, 0.338);
  padding-bottom: 0.5rem;
}

.credit{
  padding-right: 1rem;
  margin: 10rem 0 0 0;
  text-align: end;
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.338);
}

/* CONSTS */

.little-gray{
  user-select: none;
  font-size: 0.7rem;
  font-weight: 500;
  width: fit-content;
  color: gray;
}

.little-gray:hover{
  cursor: pointer;
}

.medium-black{
  user-select: none;
  font-size: 1.2rem;
  font-weight: 700;
  color: black
}

.red{
  color: red;
}

.green{
  color: green;
}

/*------ SCROLLBAR (CHROME/SAFARI) ------*/ 
::-webkit-scrollbar {
  width: 2px;
  height: 4px;
  background-color: rgb(255, 255, 255);
  cursor: all-scroll;

}

  ::-webkit-scrollbar-thumb {
    background-color: #6a6a6a;
  }

  ::-webkit-scrollbar-thumb:hover{
    background-color: #494949;
  }