@charset "utf-8";

/* One thumbnail per movie; the play button and dimming are drawn with CSS. */
#main .channel.css-video-hover .movie p.img a.youtube {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 7px solid #eeeeee;
    vertical-align: top;
}

#main .channel.css-video-hover .movie p.img a.youtube img {
    display: block;
    border: 0;
}

#main .channel.css-video-hover .movie p.img a.youtube::before,
#main .channel.css-video-hover .movie p.img a.youtube::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* The shadow dims the thumbnail around the red play button. */
#main .channel.css-video-hover .movie p.img a.youtube::before {
    width: 56px;
    height: 38px;
    margin: -19px 0 0 -28px;
    border-radius: 8px;
    background: #e52d27;
    box-shadow: 0 0 0 400px rgba(0, 0, 0, 0.4);
}

#main .channel.css-video-hover .movie p.img a.youtube::after {
    width: 0;
    height: 0;
    margin: -8px 0 0 -5px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 14px solid #ffffff;
}

#main .channel.css-video-hover .movie p.img a.youtube:hover::before,
#main .channel.css-video-hover .movie p.img a.youtube:hover::after,
#main .channel.css-video-hover .movie p.img a.youtube:focus-visible::before,
#main .channel.css-video-hover .movie p.img a.youtube:focus-visible::after {
    opacity: 1;
}

#main .channel.css-video-hover .movie p.img a.youtube:focus-visible {
    outline: 2px solid #226c32;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #main .channel.css-video-hover .movie p.img a.youtube::before,
    #main .channel.css-video-hover .movie p.img a.youtube::after {
        transition: none;
    }
}