/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: url("Hosted Images/HKTileBG.png");
  font-family: "Trebuchet MS", "Open Sans", sans-serif;
  font-size:16px;
  color: #f64a02;
  background-attachment: fixed;
  background-repeat: repeat;
  }
  
a {
    color: #0783b9;
  }
  
.tiny {
  font-size: 9px;
  margin: 0 auto;
  text-align: center;
  }
  
/*Everything in the main box goes in this*/
.wrapper {
  width: 1000px;
  border-radius: 20px;
  border: 10px ridge #E2E2E1;
  margin: 0 auto;
  top: 0px;
  }
  
.header {
  background-color: rgba(237, 230, 217, 0.5);
  height: 300px;
  border-radius: 20px;
  border: 10px hidden #E2E2E1;
  margin: 0 auto;
  overflow: hidden;
  background-image: url("HKMugzBanner1.png");/*Header image -- replace with your own!*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  }

  
/*This and the header-title class are deprecated now that this style uses a background image for the header div.*/
/*.header img {
  display: block;
  opacity: 0.35;
  width: 100%;
  height: 100%;
  overflow: hidden;
  }
*/

 /*If you want to use a smaller title or normal text, add .header p or .header h4 or whatever to the list*/
.header h2, .header h3, .header h1 {
  font-weight: bold;
  color: white;
  text-align: center;
  border: 0px solid green;
  margin: 18% auto; /*approx centered*/
  opacity: 0.999999 ;
}

h2 {
  font-weight: bold;
  color: #000000;
  font-size: 24px;
  margin: 0;
}

.layout {
  width: 100%;
  display: flex;
  gap: 16px;
  text-align: left;
}

.links {
  background: #ff6e1d;
  padding: 10px;
 
  }

/*Link styles*/
a:link {
  color: #05e6de;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  font-size:17px;
  
        }
a:visited {
   color: #05e6de;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  font-size:17px;
}
a:hover {
  color: #05e6de;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  font-size:17px;
  }

a.sub:link {
  color: #f64a02;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  text-shadow:1px 1px 10px #ff6e1d, 1px 1px 10px #ff6e1d;
  font-size:16px;
  font-weight: bold;
        }
a.sub:visited {
  color: #f64a02;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  text-shadow:1px 1px 10px #ff6e1d, 1px 1px 10px #ff6e1d;
  font-size:16px;
  font-weight: bold;
}
a.sub:hover {
  color: #f64a02;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  text-shadow:1px 1px 10px #ff6e1d, 1px 1px 10px #ff6e1d;
  font-size:16px;
  font-weight: bold;
  }  
  
a.sub2:link {
  color: #400641;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
  font-size:16px;
  font-weight: bold;
        }
a.sub2:visited {
  color: #400641;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
  font-size:16px;
  font-weight: bold;
}
a.sub2:hover {
  color: #400641;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
  font-size:16px;
  font-weight: bold;
  }  

.main {
  padding: 15px;
  margin: 0 auto;
  background-color: rgba(237, 230, 217, 0.8);
  text-align: center;
  }

/*Crew Stuff*/
.petpro {
  display: inline-block;
  margin: 5px auto;
  padding: 2px;
  width:auto;
  
}

.petpro img {
  width: auto;
  filter: drop-shadow(12px 5px 6px #444444);
  background-image: url("");
}

.desc {
  padding: 15px;
  text-align: center;
  overflow: auto;
  height: auto;
  border: none;
  background-color: #D3D3D3;
}

.otherdesc {
  padding: 15px;
  text-align: center;
  overflow: auto;
  height: auto;
}

.center {
  margin: auto;
  width: 100%;
}
 
/*Prevent overflow of large images in main text areas.*/
.main img {
  max-width: 100%;
  height: auto;
  }
  
.footer {
  background-color: rgba(237, 230, 217, 0.5);
  padding: 0px;
  padding-top:0px;
  padding-bottom:0px;
  font-size:14px;
  clear: left;
  }
  
details {
    margin-bottom: 14px;
    border-bottom: 1px hidden #444;
    padding-bottom: 10px;
}

summary {
    font-weight: bold;
    color: #f64a02;
    	font-family: 'Trubuchet MS', sans-serif;
    	text-shadow: 1px 1px 10px #ff6e1d, 1px 1px 10px #ff6e1d;
	font-style: normal;
	font-stretch: normal;
	line-height: initial;
	letter-spacing: 0.5px;
	font-size: 16px;
}

summary:hover {
    color: #f64a02;
    text-shadow: 1px 1px 10px #ff6e1d, 1px 1px 10px #ff6e1d;
  transition: text-shadow 0.3s ease;
}

details[open] summary {
    color: #ff4444;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold;
	font-style: normal;
	font-stretch: normal;
	line-height: initial;
	letter-spacing: 0.5px;
	font-size: 16px;
}  

.title {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1em;
  color: #f64a02;
}

.title a:hover {
  background-image: none;
}

  
/*For narrow screens*/
@media(max-width: 790px) {
  .wrapper {
    width: 95%;
    }
  .header h1, .header h2, .header h3 { /*Vertical centering gets wonky when the box is variable width*/
    margin: 20% 5% auto;
  }
  .petpro {
    width: 75%;
    display: block;
    }

}

/*Mobile compatibility*/
@media(orientation: portrait) {
  .wrapper {
    width: 95%;}
  .header {
    height:230px;
    }
  .header h1, .header h2, .header h3 {
    margin: 20% 3% auto;
    }
}

body{
  background-color: #f64a02;
  color: #f64a02;
  font-family: 'Roboto', sans-serif;
}
#myProgress {
  width: 300px;
   background-color: #f64a02; 
  cursor: pointer;
  border-radius: 10px;
}

#myBar {
  width: 0%;
  height: 5px;
  background-color: #f64a02;
  border-radius: 10px;
}

.logo {
  fill: red;
}

.btn-action{
  cursor: pointer;
  padding-top: 10px;
  width: 30px;
}

.btn-ctn, .infos-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.infos-ctn{
padding-top: 20px;
}

.btn-ctn > div {
 padding: 5px;
 margin-top: 18px;
 margin-bottom: 18px;
}

.infos-ctn > div {
 margin-bottom: 8px;
 color: #f64a02;
}

.first-btn{
  margin-left: 3px;
}

.duration{
  margin-left: 10px;
}

.title{
  margin-left: 10px;
  width: 210px;
  text-align: center;
}

.player-ctn{
  border-radius: 15px;
  width: 300px;
  padding: 5px;
  background-color: rgba(250, 111, 3, 0.21);
  margin:auto;
  margin-top: 0px;
  border: solid 3px #01cfc5;
}

.playlist-track-ctn{
  display: flex;
  background-color: #f6f4e7;
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266; */
}

.playlist-track-ctn > div{
  margin:2px;
}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 7px;
  padding-bottom: 7px;
  color: #f64a02;
  font-size: 12px;
  pointer-events: none;
}
.playlist-ctn{
   padding-bottom: 20px;
}
.active-track{
  background: #f6f4e7;
  color: #f64a02 !important;
  font-weight: bold;
  
}

.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
  color: #f64a02 !important;
}


.playlist-btn-play{
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.fas{
  color: #f6f4e7;
  font-size: 20px;
}