@font-face {
font-family:"DuwunFont";
src:url("https://duwun-data.sgp1.cdn.digitaloceanspaces.com/fonts/v1.6/Duwun_lite_v1.6.woff2") format("woff2"),
    url("https://duwun-data.sgp1.cdn.digitaloceanspaces.com/fonts/v1.6/Duwun_lite_v1.6.woff") format("woff"),
    url("https://duwun-data.sgp1.cdn.digitaloceanspaces.com/fonts/v1.6/Duwun_lite_v1.6.ttf") format('truetype');
font-display: swap;
}
body {
    margin: 0;
    padding: 0;
}
.shadow::before{
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(0deg,transparent, rgba(0,0, 0, 0.4), rgba(0,0, 0, 0.4));
    z-index: 1;
}
.videoWidgetTitle{
    font-family: 'DuwunFont';
    position: absolute;
    top: 5px;
    left: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90%;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px;
    z-index: 1;
    color: rgb(255, 255, 255);
}

#playlistWidget .jw-title{
    display: none;
}

#clapprPlaylistWidget {
    max-height: 700px;
    overflow: hidden!important;
}

@media screen and (max-width: 328px) {
    #clapprPlaylistWidget {
        height: 410px;
    }
}

@media only screen and (min-width: 329px) and (max-width: 378px) {
    #clapprPlaylistWidget {
        height: 440px;
    }
}

@media only screen and (min-width: 379px) and (max-width: 458px) {
    #clapprPlaylistWidget {
        height: 480px;
    }
}

@media only screen and (min-width: 459px) and (max-width: 528px) {
    #clapprPlaylistWidget {
        height: 520px;
    }
}

@media only screen and (min-width: 529px) and (max-width: 568px) {
    #clapprPlaylistWidget {
        height: 550px;
    }
}

@media only screen and (min-width: 569px) and (max-width: 600px) {
    #clapprPlaylistWidget {
        height: 590px;
    }
}

@media only screen and (min-width: 601px) {
    #clapprPlaylistWidget {
        height: 660px;
    }
}