* {
  box-sizing: border-box;
}


body {
  font-family: "Frijole";
  font-weight: 400;
  background-image: url("../images/basketball-bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  /*overflow-x: hidden;*/
  background-size: cover;
  margin: 0;
  padding: 0;
}

.main {
  width: 100%;
}

/*---------------------------------BUTTONS-----------------------------------*/

/*by clicking this button viewer will be able to go on top of the page.very usefull, specially on mobile and tablet.
idea found on codepen. adjustment was needed as chevron style arrow was not displaying on Mac and my own Samsung mobie,
it was shoiwnig an envelope style icon,so it wouldn't be obvoius for users what the button is for*/

#button {
  display: inline-block;
  background-color: transparent;
  color: #3959BA;
  border: 4px solid #3959BA;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 3px;
  position: fixed;
  transition: background-color .3s,
  opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 97;
  top: 60%;
  right: 10px;
}

#button i{
  font-size: 30px;
  margin-top: 5px;
}

#button:active {
  color: #3959BA;
  background-color: #3959ba70;
}

#button.show {
  opacity: 1;
  visibility: visible;
}

#button:hover {
  cursor: pointer;
  background-color: #3959ba70;
}

/*---------------------------------READ MORE BUTTON-----------------------------------*/

/*a button that allows viewer to open and check extra info about every player availible in portfolio.
code and idea take from css tricks. again codes and functions in JS were made for one button only.
developer had to add extra lines of codes in html and JS*/

.read-more-btn {
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none;
  background: #164a7b;
  padding: 20px;
  width: 200px;
  height: 70px;
  border-radius: 0px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;
}

.read-more-btn:hover {
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
  background-color: #2b98ff7a;
  letter-spacing: 3px;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.4s ease 0s;
}

#more {
  display: none
}

#more1 {
  display: none
}

#more2 {
  display: none
}

#summary-comments {
  margin-bottom: 40px;
}

#show_teams_played {
  Height: 425px;
}

/*---------------------------------SEE COMMENTS BUTTON-----------------------------------*/

/*button that will enable viewer to check developer additinal comments to charts
styling animations were taken from animejs.com and code pen/*/

.see-comments-btn {
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none;
  background: #164a7b;
  padding: 20px;
  width: 200px;
  height: 70px;
  border-radius: 0px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;

}

.see-comments-btn:hover {
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
  background-color: #2b98ff7a;
  letter-spacing: 3px;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.4s ease 0s;
}



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

#navbar {
  background-color: #164a7b !important;
  cursor: pointer;
  height: 90px;
}


.img-fluid {
  width: 80px;
}


.nav-text {
  padding-top: 50px;
}

.home-img {
  padding-top: 15px;
}

.title {
  margin-top: 50px;
}

.stat-button {
  border-radius: 30%;
  background-color: #b5421369;
  width: 300px;
}

.loading-page-text {
  color: #FFFFFF;
}

.loading-page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}

/*a loading page image that displays on large and medium devices*/

.loading-img {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

}

/*an additional image that displays on mobiles only and gives better impresion rather then a basket ball
an image was not perfeclty aligned, and additional styling was needed as we can see in media section*/

.mobile-img {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

}

/*in below lines we can see styiling for the quote "typewriter" that comes up on loading page */

.MJ-quote {
  position: fixed;
  color: #FFFFFF;
  font-family: Great Vibes;
  font-size: 30px;
  top: 13%;
  right: 55px;
  
}

.MJ-signat {
  padding-left: 300px;
}

.chart-comments {
  color: #FFFFFF;
  text-align: justify;
}

.comments {
  margin-bottom: 40px;
  margin-top: 20px;
}

.comments-txt {
  margin-bottom: 40px;
  margin-top: 20px;
}

.names {
  color: white;
  text-align: center;
}



                        /*---------------------------------CHARTS-----------------------------------*/
                        
/*in this part we can see all charts styled individually to gat better impression to the visitors*/

.points-chart {
  padding-left: 0;
  margin-top: 40px;

}

.salary-chart {
  padding-right: 0;
  background-color: #151307db;


}

.total-points-piechart {
  width: 1000px;
  background-color: #151307c2;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0px;

}

.teams-played-stakedchart {
  padding: 0px;
  background-color: #151307c2;
  padding-bottom: 80px;
}




.card-body-highest-points {
  background-color: #151307db;



}

.card-body-salary {
  background-color: #151307c2;
  border-color: azure;
  width: 100%;
  }


                          /*-----------------CARD HEADERS-----------------------------------------------------*/


.card-header {
  background-color: #3959BA;
  text-align: center;
  color: #FFFFFF;
}

.card-body-MJ {
  background-color: #151307db;
  margin-right: 60px;
}

.card-body-KB {
  background-color: #151307db;
  margin-right: 60px;
}

.card-body-LJ {
  background-color: #151307db;
  margin-right: 60px;
}

.profile {
  height: 515px;
  display: inline-block;
  width: 100%;
  margin-bottom: 40px;
}

.portfolio-header {
  color: #FFFFFF;
  text-align: center;
  margin-top: 40px;
  padding-top: 80px;
}

.comments-txt {
  color: #FFFFFF;
  background-color: #22150a;

}

#points-season-playoffs {
  text-align: center;
}

          /*---------------------------------SCROLL CHART HEADERS-----------------------------------*/

.card-header-scroll-MJ {
  background-color: #151307db;
}

.card-header-scroll-KB {
  background-color: #151307db;
}

.card-header-scroll-LJ {
  background-color: #151307db;
}


.players-row {
  margin-top: 30px;
}

                /*---------------------------------PORTFOLIO-----------------------------------*/
                
/*in portfolio  every single player has individual color  assigned, this way you can identify them just by that fact*/

.portfolio-MJ {
  background-color: #e22b22bf;
}

.portfolio-KB {
  background-color: #ffe854b5;
}

.portfolio-LJ {
  background-color: #13a3547d;
}

.portfolio-row {
  margin-top: 100px;
}

.portfolio-names {
  color: #FFFFFF;
  margin-bottom: 20px;
}

                    /*----------------------PLAYERS LEGEND ------------------------------*/
                    
/*in this part developer used extra legend for salary and highest points charts so a potential visitor
will see an  player's color without scrooling up and checking again*/

.mj_legend {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e22b22bf;
  display: inline-block;

}

.kb_legend {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffe854b5;
  display: inline-block;

}

.lj_legend {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #13a3547d;
  display: inline-block;

}

.legend_name {
  color: #FFFFFF;
}


/* -------------------------------------------------- FOOOTER ------------------------------------------------*/

.footer-container {
  background-color: #164a7b;
  width: 100%;

}

.data-source-footer {
  padding-left: 0px;
  padding-right: 0px;
}

.footer-copyright {
  text-align: center;
  padding-top: 10px;
}


.github-logo {
  color: #7FB7BE;
  font-size: 2em;
  transition: all .2s ease-in-out;
  padding-top: 8px;
  padding-left: 60px;

}

.github-logo:focus,
.github-logo:hover {
  color: #3959ba;
}





/*---------------------------------HORIZONTAL WRAPPER FOR LAST THRE CHARTS-----------------------------------
an idea and code taken from css-tricks.com just one line of code was availible so developer had to adujst all the rows and divs
to fit three charts*/

.horizontal-scroll-wrapper {
  width: 3180px;
  display: flex;
  overflow-y: hidden;
  margin-bottom: 40px;
}



div.horizontal-scroll-wrapper .scroll-chart {
  width: 100%;
  padding-bottom: 40px;
}



/*---------------------------------TYPEWRITER FOR MJ QUOTE ON LANDING PAGE-----------------------------------*/

/*TYPEWRITER will start typing inn quote on landing page. idea and code from Code Pen, just had to be edited to my needs,had to adjust time
of annimation,delays. code was originally made for one line(child) so in this case having 6 lines an additional editing was needed,
without styling all 6 lines were typed in at same time*/

.css-typing p {
  border-right: .15em solid orange;
  font-size: 30px;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 10px;
}

.css-typing p:nth-child(1) {
  width: 100%;
  -webkit-animation: type 2s steps(40, end);
  animation: type 2s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type2 3s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type3 2.5s steps(40, end);
  animation: type3 2.5s steps(40, end);
  -webkit-animation-delay: 3.8s;
  animation-delay: 3.8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(4) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type3 2.5s steps(40, end);
  animation: type3 2.5s steps(40, end);
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(5) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type3 2s steps(40, end);
  animation: type3 2s steps(40, end);
  -webkit-animation-delay: 9.5s;
  animation-delay: 9.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(6) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type6 2s steps(40, end);
  animation: type6 2s steps(40, end);
  -webkit-animation-delay: 11.5s;
  animation-delay: 11.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  0% {
    border-right: none;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type5 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type5 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type6 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type6 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  0% {
    border-right: none;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

/*----------------- MEDIA QUERIES -----------------*/

/* ------------ SMALL DEVICES ----------*/

@media screen and (min-width: 320px) and (max-width: 480px) {

  #navbar {
    padding-top: 28px;
  }

  .nav-text {
    font-size: 15px;

  }

  .title {
    text-align: center;
    margin-left: 40px;
    padding-bottom: 40px;
    color: #FFFFFF;
    font-size: 15px;
  }

  body {
    background: url('../images/mobile-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    background-attachment: fixed;
    background-position-y: 86px;

  }

  .profile {
    max-width: 100%;
    min-width: 100%;
  }

  .stat-button {
    width: 250px;
  }

  .footer-copyright {
    text-align: center;
    padding-top: 15px;
  }
  .github-logo {
    margin-left: 30%;

  }
  .data-source-footer {
    text-align: center;
  }
  .mobile-bg {
    background-size: cover;
  }

  .total-points-piechart {
    width: 1000px;

  }
  .salary-chart {
    overflow-x: scroll;
  }
  .points-chart {
    overflow-x: scroll;
  }

  .card-body-highest-points {
    overflow-x: scroll;
    margin-right: 20px;
  }

  .card-body-salary {
    margin-right: 20px;
  }
  .home-img {
    padding-top: 23px;
  }

  .row {
    overflow-x: scroll;
  }
  .stacked-chart {
    overflow-x: scroll;
    margin-top: 40px;
    margin-right: 10px;
  }

}

/* ------------ MEDIUM DEVICES ----------*/

@media screen and (min-width:481px) and (max-width:900px) {

  body {
    background: url('../images/basketball-bg.jpg');
    background-size: cover;
    height: 100%;
    background-attachment: fixed;

  }

  #navbar {
    padding-top: 22px;
  }

  .nav-text {
    padding-top: 25px;
  }

  .title {
    text-align: center;
    margin-top: 19px;
    margin-left: 20px;
    font-size: 23px;
  }


  .card-body-highest-points {
    overflow-x: scroll;


  }

  .portfolio-header {
    padding-top: 100px;
  }
  .salary-chart {
    overflow-x: scroll;
  }
  .points-chart {
    overflow-x: scroll;
    padding-left: 20px;
  }

  .row {
    overflow-x: scroll;
  }

  .stat-button {
    width: 300px;
  }

  .staked-chart {
    margin-top: 40px;
  }
  .footer-copyright {
    margin-top: 20px;
  }
  .github-logo {
    margin-left: 60px;
    margin-top: 27px;
  }



}

.row {
  margin: 0;
}
/*an additional styling for title was needed to provide a smooth resizing of the screen*/

@media screen and (min-width:525px) and (max-width:900px) {
  .title {
    text-align: center;
    margin-top: 33px;
    margin-left: 20px;
    font-size: 23px;
  }
}