/*
  We include some minimal custom CSS to make the playlist UI look good
  in this context.
*/

body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: #1a1a1a;
    max-height: 100vh;
    color: lightgrey;
    font-size: 100%;     /* flexible baseline */
    font-size: 1em;
    overflow-y: auto;
  }

  h1
  {
      font-style: italic;
      font-size: 1.5em;
      padding: 10px;
      background: rgb(131,58,180);
      background: linear-gradient(80deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
  }

  h2
  {
      font-style: normal;
      font-size: 1.25em;
      padding: 0 10px 0 10px;
      margin-block-start: 1em;
      margin-block-end: 0.5em;
  }

  li
  {
      font-size: 1em;
      line-height: 1.5em;
  }


  .topiclist {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 100%;
  }

  .topic {
    flex: auto;
  }

  @media only screen and (min-width: 600px) {
    .vjs-playlist {
      bottom: 0;
    }
  }

  .frontpagelink {
      text-align: center;
      text-decoration: none;
      font-size: 1.4em;
      padding: 10px;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-weight:lighter;
      color: plum;
  }
  
  .player-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    }
  
  .video-js,
  .playlist-container {
    position: relative;
    min-width: 250px;
    min-height: 100%;
    max-height: ;
  }

  .video-js {
    flex: 3 1 75%;
  }

  .playlist-container {
    flex: 1 1 25%;
  }
  
  .vjs-playlist {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .preview-player-dimensions.vjs-fluid {
    padding-top: 41%;
  }

  .vjs-playlist-now-playing-text {
    left: unset !important;
    right: 0;
    color: #ad3080 
  }

  .vjs-playlist .vjs-selected .vjs-playlist-duration {
    display: block ;
    color: #ad3080;
  }

  .vjs-playlist-name {
    font-size: 1em;
  }

  .vjs-playlist-item {
    height: 75px;
  }

  .vjs-up-next-text {
    display: none !important;
  }