lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
	/* DAN TOUCHED THIS - funny zoom on play */
    background-size: 100%;
	background-repeat: no-repeat;
    cursor: pointer;
    max-width: 720px;
	transition: background-size 0.5s ease;
}

/* DAN TOUCHED THIS - funny zoom on play */
lite-youtube.lyt-activated {
	background-size: 110%;
	transition: background-size 0.5s ease;
}

@media (prefers-reduced-motion) {
	lite-youtube.lyt-activated {
		background-size: 100%;
	}
}

/* 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%;
	scale: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
	padding-bottom: calc(100% / (16 / 9));

	/* DAN TOUCHED THIS - it looks cooler with blur*/
	backdrop-filter: blur(0.5rem);
	background-color: color-mix(in srgb, var(--bg) 50%, transparent 50%);
	transition: backdrop-filter 0.25s ease, background-color 0.25s ease;
}

lite-youtube.lyt-activated::after {
	/* DAN TOUCHED THIS - remove blur on play */
	pointer-events: none;
	backdrop-filter: blur(0rem);
	background-color: transparent;
}

lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    display: block;
	/* DAN TOUCHED THIS - made it scale with rems */
    width: 5rem;
	height: 5rem;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    /* YT's actual play button svg */
	/* DAN TOUCHED THIS - the svg is blue now muahahahaha */
    background-image: url("../../common/video-play.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
    /* DAN TOUCHED THIS - i wanted it to be white when at rest */
	filter: grayscale(100%) brightness(65%) contrast(200%) invert(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* 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;
  }