lite-youtube{ 
    background-color:#000;
    position:relative;
    display:block;
    contain:content;
    background-position:center center;
    background-size:cover;
    cursor:pointer;
    max-width:720px;}
/* gradient */
lite-youtube::before{ 
    content:'';
    display:block;
    position:absolute;
    top:0;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position:top;
    background-repeat:repeat-x;
    height:60px;
    padding-bottom:50px;
    width:100%;
    transition:all 0.2s cubic-bezier(0, 0, 0.2, 1);}
/* responsive iframe with a 16:9 aspect ratio */
lite-youtube::after{ 
    content:"";
    display:block;
    padding-bottom:calc(100% / (16 / 9));}
lite-youtube > iframe{ 
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border:0;}
/* play button */
lite-youtube > .lty-playbtn{ 
    display:block;
    /* Make the button element cover the whole area for a large hover/click target… */
    width:100%;
    height:100%;
    /* …but visually it's still the same size */
    background:no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position:absolute;
    cursor:pointer;
    z-index:1;
    filter:none;
    transition:filter .1s cubic-bezier(0, 0, 0.2, 1);
    border:0;}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus{ 
    filter:grayscale(100%);}
@media only screen and (min-width: 537px) and (max-width: 1370px){
lite-youtube > .lty-playbtn{
    background:no-repeat center/48px 48px;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');}}
/* channel image and name */
.channelLogo-container{
    position:absolute;
    top:10px;
    left:10px;
    right:20px;
    display:grid;
    grid-template-columns:auto auto;
    overflow-x:auto;
    white-space:nowrap;}
.channelLogo-container::-webkit-scrollbar{display:none;}
.live-indicator, .video-duration{
    display:flex;
    place-items:center;
    color:var(--white);
    font-family:"Roboto", "Noto", sans-serif;
    font-size:calc(10px + (24 - 16)*((100vw - 320px) / (1920 - 320)));
    -webkit-font-smoothing:antialiased;
    letter-spacing:.011em;
    text-transform:uppercase;
    border-radius:2px;
    padding:2px 4px;
    position:absolute;
    bottom:10px;
    right:15px;
    fill:currentcolor;}
.video-duration{background:var(--bgColor-youtube-duration);}
.live-indicator{background:var(--bgColor-youtube-live);}
.live-icon{
    color:var(--white);
    height:16px;
    width:16px;}
.live-text{margin-left:2px;}
/* channel image */
.channelLogo-container > .lty-channelLogo{ 
    display:block;
    background-image:url("https://yt3.ggpht.com/AI2QaRc-PEAN2mc4a69n73fltXwO_9howEBEsui0Mzz_1VBWnYzGiAQAFQe5_NWLaMev-GGbRg=s88-c-k-c0x00ffffff-no-rj");
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    width:35px;
    height:35px;
    /* margin:10px; */
    border-radius:100%;
    z-index:1;}
/* Video Title */
.moving-text{
    display:none;
    color:#ffffff;
    font-size:calc(10px + (24 - 16)*((100vw - 320px) / (1920 - 320)));
    /* margin-top:5px; */
    margin-left:10px;
    z-index:-1;}
.moving-text:hover{
    animation-play-state:paused;}
@keyframes marquee{
    0%{transform:translateX(100%)}
    100%{transform:translateX(-100%);}
}
/* @keyframes marquee{
    0%{transform:translateX(0%)}
    20%{transform:translateX(-20%)}
    100%{transform:translateX(-100%);}} */
/* media query to enable animation for only those who want it */
/* @media (prefers-reduced-motion:no-preference){
    .moving-text{animation:marquee 20s linear infinite;}} */
/* Post-click styles */
lite-youtube.lyt-activated{cursor:unset;}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn{ 
    opacity:0;
    pointer-events:none;}
.lyt-visually-hidden{ 
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    height:1px;
    overflow:hidden;
    position:absolute;
    white-space:nowrap;
    width:1px;}