#video-placeholder{
    max-width: 285%;
        width: 748px;
        position: fixed;
        top: -125px;
       
       right: 165px;
       
       
       box-shadow: 0px 0px 2px 5px #ffffff80;
}

#controls{
  
  position: relative;
      height: 86px;
      font-variant: diagonal-fractions;
      background-image: -webkit-linear-gradient(247deg ,#443595,#FF0000 30%,#B5007D 60%,#ffc107 80%,#0071FF);
      text-align: -webkit-center;
      border: 2px solid #e80234;
      -moz-box-shadow: 10px 10px 5px #ccc;
      -webkit-box-shadow: 10px 10px 5px #ccc;
      box-shadow: 10px 10px 5px #00000054;
      -moz-border-radius: 25px;
      /* -webkit-border-radius: 25px; */
      margin: 10px;
      border-radius: 10px;
      padding: 10px;
      float: none;

     
}

#controls ul{
    list-style: none;
}

#controls pre{
    border: 6px solid #E7E9F3;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#controls ul li {
    margin: 2px;
        float: left;
        /* font-size: 24px; */
        color: #484141;
        border-radius: 5px;
        background-color: #c8d82ab3;
        padding: 5px;
        height: 100%;
        
}

#controls ul li:hover {
margin: 2px;
    float: left;
    /* font-size: 24px; */
    color: #484141;
    border-radius: 5px;
    background-color: #ffc107;
    padding: 5px;
    height: 100%;
}


#controls ul li code{
    padding: 24px;
    line-height: 1.45;
    font-size: 13px;
}





.thumbnail{
    /*
    cursor: pointer;
    margin: 0 10px 20px 0;
    border: 6px solid #fff;
    box-shadow: 0 1px 1px #ccc;
    width: 200px;
    **/
    
    cursor: pointer;
    border: 7px solid #ffffff69;
    border-radius: 5px;
    box-shadow: 2 5px 1px #ccc;
    /* margin: 5px; */
    width: 122px;
}

.thumbnaila{
   
    cursor: pointer;
    margin: 0 10px 20px 0;
    border: 6px solid #fff;
    box-shadow: 0 1px 1px #ccc;
    width: 200px;
    
}


.thumbnail:hover{
    /*
    cursor: pointer;
    margin: 0 10px 20px 0;
    border: 6px solid #fff;
    box-shadow: 0 1px 1px #ccc;
    width: 200px;
    **/
    cursor: pointer;
       
        border: 5px solid #f44336;
        border-radius: 5px;
        box-shadow: 2 5px 1px #ccc;
        width: 250px;
}

#progress-bar{
    position: relative;
    width: 100%;
    height: 20px;
    cursor: pointer;
}


#controls i {
    color: #000;
    font-size: 32px;
    cursor: pointer;
}

#volume-input{
    height: 32px;
    width: 45px;
}

#next,
#prev{
    display: block;
}


@media (max-width: 1000px) {


    header h1{
        float: none;
    }

    header a{
        margin-top: 25px;
        float: none;
    }

}

@media (max-width: 1200px) {

    #video-placeholder{
       
            position: relative;
           
    }

    #controls{
        
        
        margin-right: -1;
        position: relative;
        /**float: left;*/
        margin: 10px;
        border-radius: 10px;
        padding: 5px;
        background-image: -webkit-linear-gradient( 247deg ,#00ff06,#FF0000 30%,#B5007D 60%,#ffc107 80%,#0071FF);
        top: 0px;
        left: 100%;
        overflow-y: scroll;
        inset-inline-start: auto;
    }

    #bsaHolder{ display:none;}
}


/** player controls above */

.fire {
  animation: burn 1.5s linear infinite alternate;
}

@keyframes burn {
  from { text-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .4em #ffae34, .2em -.3em .3em #ec760c, -.2em -.4em .4em #cd4606, .1em -.5em .7em #973716, .1em -.7em .7em #451b0e; }
  45%  { text-shadow: .1em -.2em .5em #fefcc9, .15em 0 .4em #feec85, -.1em -.25em .5em #ffae34, .15em -.45em .5em #ec760c, -.1em -.5em .6em #cd4606, 0 -.8em .6em #973716, .2em -1em .8em #451b0e; }
  70%  { text-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .6em #ffae34, .2em -.3em .4em #ec760c, -.2em -.4em .7em #cd4606, .1em -.5em .7em #973716, .1em -.7em .9em #451b0e; }
  to   { text-shadow: -.1em -.2em .6em #fefcc9, -.15em 0 .6em #feec85, .1em -.25em .6em #ffae34, -.15em -.45em .5em #ec760c, .1em -.5em .6em #cd4606, 0 -.8em .6em #973716, -.2em -1em .8em #451b0e; }
}




/** footer */
.fbottom{
    
    align-items: center;
    /* border-radius: 14px; */
    bottom: 15px;
    /* cursor: pointer; */
    display: flex;
    height: 46px;
    justify-content: center;
    min-width: 32px;
    position: fixed;
    padding:10px;
    /* right: 16px; */
    width: fit-content;
    margin: 0 auto 0 auto;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.18);
    font-size: 14px;
    width: var(--content-width);
    box-shadow: 0 0 3px 1px #29487d;
    border-radious: 10px;
    
  
    
    
    
}

.rotate {
  animation: rotation 15s infinite linear;
}

.rotate:hover {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}