/*  =============================================================================
    
    Copyright © Vent Origins 
    By Adrian Mandee and Randy Truong
    ========================================================================== */

/*Entire playlist bar*/
#nav {
  width: 250px;
  height: 100%;
  margin: 0px;
  padding: 0px;

  /*Background color of the playlist bar*/
  background-color: #222226;

  /*Keeps the playlist bar to the left of the Splash Screen*/
  float: left;

  /*Keeps the nav bar in place throughout entire page*/
  position: fixed;

  /*Adds a scrollbar to the playlist bar*/
  overflow-y: auto; 

  border: none;
  z-index: 1000;
}

/*For the Vent Origins logo in the nav bar*/
.vent-origins-logo {
  /*Size*/
  width: 50px;
  height: 50px;

  /*Placement of the logo*/
  /*Centers logo within nav*/
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

/*For each individual playlist names, these are actual buttons*/
#nav-button {
  /*Set width of the playlist nav bar, goes to 100% of the full height of screen*/
  width: 250px;
  
  /*margins and padding*/
  margin: 0px;
  padding: 0px;

  border: none;
}

/*The category title in the nav bar*/
#nav-button h1 {
  /*Added spacing to the title's top*/
  margin-top: 10px;
  margin-bottom: 10px;

  /*Added spacing to titles left and right*/
  padding-left: 20px;
  padding-right: 20px;

  /*Font*/
  font-size: 18px;
  color: #A2A7B1; 
  border: none;
}

/*For each individual navigation href names*/
#nav-button a {
  /*Size of the entire list*/
  width: 250px;
  height: 18px;

  /*Added spacing between the navigation*/
  margin-top: 10px;
  margin-bottom: 10px;

  /*Moves positions of the playlists a bit to the right of the left side of screen*/
  padding-right: 20px;
  padding-top: 1px;
  padding-left: 5px;

  /*Font*/
  text-align: left;
  font-size: 16px;
  color: #A2A7B1;
  background-color: #222226;

  border: none;
}

/*The music logo*/
#nav-button .fa {
  /*Adjusts the size to the size of the icon*/

  /*Moves positions of the playlists a bit to the right of the left side of screen*/
  padding-left: 20px;

  /*Font*/
  font-size: 16px;
  color: #A2A7B1;
  background-color: #222226;

  border: none;
}

/*For each individual playlist names, these are actual buttons*/
#nav-playlist {
  /*Set width of the playlist nav bar and height is autoed*/
  width: 250px;
  height: auto;
  
  /*margins and padding*/
  margin: 0px;
  padding-top: 20px;
  padding-left: 0px;

  border: none;
}
/*The category title in the playlist bar*/
#nav-playlist-head a {

  /*Added spacing to titles left and right*/
  padding-left: 20px;
  padding-right: 20px;

  /*Font*/
  font-size: 16px;
  color: #A2A7B1; 
  border: none;
}

/*For each individual playlist names, these are actual buttons*/
#nav-playlist button {
  /*Size of the entire list*/
  width: 250px;
  height: 18px;

  /*Added spacing between the playlist's names*/
  margin-top: 10px;
  margin-bottom: 10px;

  /*Moves positions of the playlists a bit to the right of the left side of screen*/
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 1px;
  padding-bottom: 10px;

  /*Font*/
  text-align: left;
  font-size: 13px;
  color: #A2A7B1;
  background-color: #222226;

  border: none;

  /*For names longer than the nav size*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /*Change cursor when hovering*/
  cursor: pointer;
}

/*The music logo*/
#nav-playlist button .fa {
  /*Adjusts the size to the size of the icon*/
  width: 0px;
  height: 0px;
  margin-right: 25px;

  /*Font*/
  font-size: 13px;
  color: #A2A7B1;

  border: none;
}

/*When hovering over a playlist name, lights up white*/
#nav-playlist button:hover{
  color: white;
}

#footer {
  display:inline-block;
  width: 100%;
  height: 80px;
}

#copyright {
  text-align: center;
}
#copyright p{

  font-size: 15px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  color: #505054;
}
#icon {
  text-align: center;
}
#icon a{
  font-size:20px;
  padding-top: 0px;
  margin-top: 0px;
  color: #505054;
  text-decoration: none;
}

#icon a:hover {
  color:white;
}