$accent-color: #FFEC41;
        body {
          align-items: center;
          background11: #000046;
          background11: linear-gradient(to right, #1CB5E0, #000046);
          display: flex;
          height: 100vh;
          justify-content: center;
          margin: 0;
          padding: 0;
        }
        .player {
          max-width: 100%;
          border: 6px solid rgba(255, 255, 255, 0.2);
          box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.1);
          position: relative;
          overflow: hidden;
        }
        .player:hover .progress {
          height: 10px;
        }
        .player:hover .player-controls {
          transform: translateY(0);
        }
        .player:-webkit-full-screen, .player:fullscreen {
          max-width: none;
          width: 100%;
        }
        .play-btn {
          flex: 1; 
        }
        #myvideo {
          width: 100%;
          display: block;
        }
        .player-btn {
          background: none;
          border: 0;
          color: white;
          text-align: center;
          max-width: 60px;
          padding: 5px 8px;
            cursor: pointer;
        }
        .player-btn svg {
          fill: #FFFFFF;
        }
        .player-btn:hover, .player-btn:focus {
          border-color: #FFEC41;
          background: rgba(255, 255, 255, 0.2);
        }
        .player-slider {
          width: 10px;
          height: 30px;
        }
        .player-controls {
          align-items: center;
          display: flex;
          position: absolute;
          bottom: 0;
          width: 99.9%;
          transform: translateY(100%) translateY(-5px);
          transition: all 0.3s;
          flex-wrap: wrap;
          background: rgba(0, 0, 0, 0.3);
         
        }
        .player-controls > * {
          flex: 1;
        }
        .progress {
          position: relative;
          display: flex;
          flex: 10;
          flex-basis: 100%;
          height: 4px;
          transition: height 0.3s;
          background: rgba(0, 0, 0, 0.5);
        }
        .filled-progress {
          width: 50%;
          background: #FFEC41;
          flex: 0;
          flex-basis: 50%;
        }
        .sliders {
          max-width: 200px;
          display: flex;
        }
        
    
    
    
    
    
    
    
    
    
    input[type=range] {
          -webkit-appearance: none;
          background: transparent;
          width: 100%;
          margin: 0 5px;
        }
        input[type=range]:focus {
          outline: none;
        }
    
    
    
        
    input[type=range]::-webkit-slider-runnable-track {
          width: 100%;
          height: 8px;
          cursor: pointer;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
          background: rgba(255, 255, 255, 0.5);
          border-radius: 10px;
          border: 0.2px solid rgba(1, 1, 1, 0);
        }
   
    
    
    
    
    
    
        input[type=range]::-webkit-slider-thumb {
          height: 15px;
          width: 15px;
          border-radius: 50px;
          background: white;
          cursor: pointer;
          -webkit-appearance: none;
          margin-top: -3.5px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        input[type=range]:focus::-webkit-slider-runnable-track {
          background: rgba(255, 255, 255, 0.8);
        }
        input[type=range]::-moz-range-track {
          width: 100%;
          height: 8px;
          cursor: pointer;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
          background: #ffffff;
          border-radius: 10px;
          border: 0.2px solid rgba(1, 1, 1, 0);
        }
        input[type=range]::-moz-range-thumb {
          box-shadow: 0 0 3px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
          height: 15px;
          width: 15px;
          border-radius: 50px;
          background: white;
          cursor: pointer;
         }
		 button#fullscreenbtn {
        background: url(video-html5-video-player/fullscreen.png) no-repeat right;
            border:0;
            width1: 19px;
            height: 29px;
            cursor: pointer;
            margin-top1:-5px;
            padding1: 5px;
            opacity: 1;
           
        }
    button#fullscreenbtn:hover {border: none;  background: url(video-html5-video-player/fullscreen-hover.png) no-repeat right;}