video::-webkit-media-controls-timeline {
  display: none;
}

video::-webkit-media-controls-current-time-display {
  display: none;
}

body {
  font-family: 'Press Start 2P', monospace;
}

#content_container {
  padding:0;
  width:100%;
}

#main-container {
  padding:0 1.5rem;
  width:100%;
  background: rgb(145,178,242);
  background: linear-gradient(315deg, rgba(145,178,242,1) 0%, rgba(133,227,242,1) 30%, rgba(133,227,242,1) 70%, rgba(174,157,242,1) 100%);
}

#header-container {
  width:100%;
  text-align: center;
  padding-bottom: 1rem;
}

#site-name {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-bottom: #F2E579;
  border-width: 0 0 10px 0;
  border-style: solid;
  /* margin: auto 0% auto 0%; */
  display: inline-block;
  width:auto;
  height:auto;
  font-size: 7vw;
  color:rgb(45,45,45);
  text-align: center;
}

#coffee {
  font-size: 2rem;
}

#video-container {
  padding: 0;
  margin-bottom: 1rem;
  text-align: center;
  border-top: #91B2F2;
  border-bottom: #91B2F2;
  border-left: rgba(133,227,242,1);
  border-right: rgba(133,227,242,1);
  border-width: 15px;
  border-style: solid;
  outline: 2px solid rgb(45,45,45);
  pointer-events: none;
  background-color: rgb(25,25,25);
  width:100%;
}

#huell-stream {
  margin: 0 auto;
  pointer-events: all;
  width:100%;
  background-color: rgb(25,25,25);;
  margin-bottom: -4px;
}


#description-container {
  padding:1rem;
  padding-bottom: 1rem;
  border-top: #91B2F2;
  border-bottom: #91B2F2;
  border-left: rgba(133,227,242,1);
  border-right: rgba(133,227,242,1);
  border-width: 10px;
  border-style: solid;
  outline: 2px solid rgb(45,45,45);
  margin-bottom: 1rem;
}

#show-episode-name {
  font-size: 3vw;
  color:rgb(45,45,45);
  border-bottom: #F2E579;
  border-width: 0 0 10px 0;
  border-style: solid;
  color:rgb(45,45,45);
  display: inline-block;
}

#season-episode-num {
  font-size: 1em;
}
#episode-description {
  padding-top: 1rem;
  font-size: 2.5vw;
}

#up-next-main-container {
  background-color: #F2CAAA;
  padding: 0;
  width: 100%
}
#up-next-header {
  text-align: center;
  padding: 1rem;
  font-size: 5vw;
}

#up-next-container {
  width:100%;
}


.up-next-day-container {
  background-color: #91B2F2;
  padding:0.5rem 1.25rem;
  position:sticky;
  top:0;
  right:0;
  border: rgb(45,45,45);
  border-width: 1vh 0 1vh 0;
  border-style: solid;
  font-size: 4vw;
}

.up-next-episode-container {
  border: rgb(45,45,45);
  border-width: 0 0 1rem 0;
  border-style: solid;
  padding: 0;
}

.up-next-info-container {
  background-color: rgba(133,227,242,1);
  padding:0.5vh 1.25vh;
}

.up-next-desc-container {
  font-size: 2vw;
  padding:0.5vh 1.25vh;
}

.up-next-episode-name {
  font-size: 2.5vw;
  background-color: #91B2F2;
  padding:0.5rem 1.25rem;
}

/* desktop */
@media (min-width: 1080px) {

  #main-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width:75%;
    min-height: 100%;
    overflow-y: scroll;
    padding: 0 3rem;
  }

  #video-container {
    text-align: center;
    height: 80%;
  }
  #site-name {
    font-size: 4vw;
  }

  #huell-stream {
    width:100%;
    max-height:80vh;
    background-color: rgb(45,45,45);;
  }

  #show-episode-name {
    font-size: 2.5em;
  }

  #season-episode-num {
    font-size: 2vh;
  }
  
  #episode-description {
    font-size: 2em;
    padding-top: 2vh;
  }

  #up-next-main-container {
    height: 100%;
    width: 25%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    border-left: rgb(45,45,45);
    border-width: 0 0 0  0.2vw;
    border-style: solid;
  }
  #up-next-header {
    font-size: 1.33vw;
    display: inline-block;
   }
   .up-next-day-container {
    font-size: 2.5em;
  }
  .up-next-desc-container {
    font-size: 1.5em;
    padding:0.5rem 1.25rem;
  }
  
  .up-next-episode-name {
    font-size: 2em;
  }

}