media-controller {
    width: 100%;
    max-width:100vw;
    height: auto;
  }
media-volume-range{
  display:none;
}
.mute:hover ~ .vol{
  display:block;
}
.vol:hover{
  display:block;
}

section{
  user-select:none;
  pointer-events: none;
  z-index:0;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  grid-gap:0px;
  background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7));
  grid-template-columns:1fr auto 1fr;
}
media-seek-backward-button{
  scale:2;
  background:none;
  align:left;
  width:70px;
  height:70px;
  border-radius:50%;
}
media-play-button{
  scale:2;
  background:none;
  width:100px;
  height:100px;
  border-radius:50%;
}
media-seek-forward-button{
  scale:2;
  background:none;
  width:70px;
  height:70px;
  border-radius:50%;
}

media-play-button:hover{
  transition:0.5s;
  scale:2.5;
}


html{
  scroll-behavior:smooth;
  width:100%;
  height:100%;
}
body{
  width:100%;
  height:100%;
  color:#AAA;
  font-family:sans;
  background:#14151a;
  transition:0.5s;
  margin:0px;
  display:grid;
  grid-template-rows:auto auto auto auto 1fr;
  grid-gap:10px;
}
.servers{
  height:fit-content;
  color:#DDD;
  text-align:center;
  font-family:sans;
  border-radius:5px;
  background:#202125;
  margin:10px;
  margin-bottom:0px;
  padding:5px;
  padding-top:10px;
  padding-bottom:0px;
}
.servers-container{
  border-radius:5px;
  background:#202125;
  display:grid;
  grid-gap:10px;
  margin:10px;
  padding:5px;
  padding-top:5px;
  grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  place-items:center;
}
.servers-container button{
  width:100%;
  background:#cce96b;
  border:none;
  border-radius:5px;
  padding:5px 10px;
}


.episodes{
  color:#DDD;
  text-align:center;
  font-family:sans;
  background:#1a1b1f;
  margin-bottom:0px;
  padding:5px;
  padding-top:10px;
  padding-bottom:0px;
}
.episodes-selector{
  padding:15px;
  padding-top:0px;
  padding-bottom:10px;
  text-align:left;
  display:grid;
  grid-template-columns:1fr auto;
}
.episodes-selector input{
  height:30px;
  text-align:center;
  width:100px;
  background:#111;
  color:#AAA;
  border-radius:5px;
  border:none;
}
.episodes-selector span{
  font-size:0.9rem;
  line-height:30px;
}
.episodes-container{
  max-height:500px;
  overflow-y:scroll;
  border-radius:5px;
  background:#111;
  display:grid;
  grid-gap:0px;
  padding:0px;
  grid-template-columns:1fr;
  grid-template-rows:repeat(auto);
}
.episodes-container div{
  font-size:0.9rem;
  color:#888;
  text-align:left;
  padding:10px;
  padding-left:10px;
  padding-right:10px;
}
.episodes-container div[type="1"]{
  background:#2b2c30;
}
.episodes-container div[type="0"]{
  background:#202125;
}
.details{
  color:#DDD;
  text-align:center;
  font-family:sans;
  margin:0px;
  padding:5px;
  padding-top:0px;
  padding-bottom:0px;
}
#Episode_num{
  line-height:2rem;
}






ul {
  height:50px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  height:50px;
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}