@charset "UTF-8";
body,
html {
	background: rgb(0, 0, 0);
	font-family: Georgia, "serif";
	-font-smoothing: antialiased;
	overflow: visible;
	text-rendering: optimizeLegibility;
}

@media only screen and (max-width: 980px) {
	body {
		padding-top: 0;
	}
}

:root {
	--video-aspect-ratio: 16 / 9;
	/* PLAYER CONTAINER STYLES*/
	--player-font: 'Georgia';
	--player-background-color: rgb(0, 0, 0);
	--player-border-color: rgb(0, 0, 0);
	--player-border-width: 0;
	/* <-- 0 = no border */
	/* PLAYLIST STYLES */
	--playlist-background-color: rgb(0, 0, 0);
	/* PLAYLIST BUTTON STYLES */
	--playlist-button-font-size: 15px;
	--playlist-button-mobile-font-size: 10px;
	--playlist-button-text-color: rgb(109, 109, 109);
	--playlist-button-border-color: rgba(0, 0, 0, 0.5);
	--playlist-button-border-hover-color: rgba(111, 160, 223, 0.9);
	--playlist-button-border-active-color: rgba(138, 138, 138, 0.8);
	--playlist-button-text-color: rgb(138, 138, 138);
	--playlist-button-text-transform: normal;
	/* <--  uppercase - lowercase- normal - etc.*/
	/* PLAYER BUTTON WIDTH 
     Sets aspect ratio width and height in scrolling playlist grid */
	--playlist-button-width: 190px;
	--playlist-button-mobile-width: 163px;
	/* CAPTION STYLES */
	--caption-container-padding: 15px;
	/* <-- PADDING SETS CONTAINER HEIGHT*/
	--caption-container-mobile-padding: 15px;
	--caption-font-size: 10px;
	--caption-font-mobile-size: 15px;
	--caption-text-color: rgb(114, 114, 114);
	--caption-text-transform: uppercase;
	/* <--  uppercase - lowercase- normal - etc.*/
	--parent-container-max-width: 95%;
}

#parent-container {
	margin: 0 auto;
	max-width: var(--parent-container-max-width);
	padding-top: 5px;
	width: 100%;
}

@media only screen and (max-width: 980px) {
	#parent-container {
		padding-top: 0;
	}
}

/* PLAYER CSS */
#video-player {
	background-color: var(--player-background-color);
	border: var(--player-border-width) solid var(--player-border-color);
}

#video-player iframe {
	aspect-ratio: var(--video-aspect-ratio);
	background: black;
	height: auto;
	width: 100%;
}

#video-caption {
	color: aliceblue;
	font-family: var(--player-font);
	font-size: var(--caption-text-size);
	letter-spacing: 2px;
	overflow: hidden;
	
	/* top padding less 5 pixels.  Looked nicer.  */
	padding-top: calc(var(--caption-container-padding) - 5px);
	padding-bottom: var(--caption-container-padding);
	text-transform: var(--caption-text-transform);
	width: 100%;
}

@media only screen and (max-width: 980px) {
	#video-caption {
		letter-spacing: 0;
		padding-top: calc(var(--caption-container-mobile-padding) - 5px);
		padding-bottom: var(--caption-container-mobile-padding);
	}
}

#playlist {
	background-color: rgb(0, 0, 0);
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(var(--playlist-button-width), 1fr));
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--playlist-button-width), 1fr);
	padding-bottom: 25px;
	padding-top: 15px;
	overflow-x: auto;
}

/* MEDIA QUERY for PLAYLIST GRID */
@media only screen and (max-width: 980px) {
	#playlist {
		grid-auto-columns: minmax(var(--playlist-button-mobile-width), 1fr);
		grid-template-columns: repeat(auto-fill,
				minmax(var(--playlist-button-mobile-width), 1fr));
	}
}

#playlist button {

	aspect-ratio: var(--video-aspect-ratio);
	background-color: black;
	background-position: center;
	background-size: cover;
	border: solid 2px var(--playlist-button-border-color);
	border-radius: 15px;
	color: aliceblue;
	cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9dJREFUeNrMmmtIFFEUx8dVLHsSlqVhqRioJFL4ocjIyEdi9iALAoMgCulFEESBVEQfCvtoUPRAksCgsKgkiqRAyzJ6oCGKabgklYb5SDO16X/YM7KKj507d+7OgR/rLs7d+587995z/ncDdF3XJMZiEA3CwDJ+nQGGwW/gBs2gHTSAbllfHGTxehdIABvBWpAEFoFpU1zXy6JqwHPwDLRa6UiA4IgEg61gN8jg91aCRqgMlIBKoRZIiEk2gyrdnugHt0CS2X6Z+edYUKKriU5wCoTIFpINmnX1UQHiZQk5CgZ0/4UbpFoVck53RvwEOaJCCnRnxS+QPlF/J1p+aVkt5n3CSfEVZIFaX/aRFbxBzdOcGdUgc2xWMPaO0458SUDEP4VCVoGC8VIM7zgEVgs0TvnTEfBFkZjDLGjcnT0CtAlOxHpuIwoUg78KJn+592T3HpGDIFzwDgWCEB6RPSCbE0I7I4PnyqhHayGvVLLiKUgDJ8EPm4TQzdtvaDCEpINIyV9Eq8p5sAHctUlMGtc/I0LybHwE6kAu2AHqJbc9B2yjVxISAZYrWGnugFRQyNWirKARjyEhiSxGRdB8OQ7Wg8eS2owHa1xcWwco3p1pRcsB+aDFYlu0UCW6FD1W48UQuALWgav8XiSm00JFQmL9nDu5eRlNE67XebKHOSQZfMEb3Anwzaz14JLggMiMPnABpIDroN+ML+XE+MzZwbAZIX0OE7ESlINSMMuMkDaHCKAa6Ayo4CrQtOXZ4AAR29k6PQ3mmp3o5FQGcS7kr4jlzudZXCDcJKQJDPhgPMuMEK5/jrHpbSXI/H5Dj9ZH3pRURTqvSIUSRGjsqNS4uG54pUAAnZ0UgYeU5Els9wGNirGP3LRRgFHJVfLjJHMDJp/rCU0NQ8hL8M4GEcl8xyg5jLKh/TKjlHZ5zfzLEr8gFJzVPEZflk0j3T2qz16WCp1FvBe0Zhq92skFnxTYQUWTmdhbwJBAo3UgAZQqPGqInEwIecE3BBruAR0Knfm9vrjxoZwu+KtynCqugX1jP5zoWCGZM9AFDhNRpXlczC5f65G3msf67HKQiFrOybrMFlblfGG7A0R8ADu1ydx+Hw5DU0CTH4/cHoFwWcfT0eC+YgGDfBjr01m7mR8MBIJ80KpARDXItOuXDwZLwEXw3QYBlBEcALPN9kv0RzUaJ4G7wCbNc1wnarv2sqd1G9wDPSKNWBFixEwQx047mdNLwXw2E4K9BNKB6R/QwTSwkf2aq9RhK52QIWTEtgQxmufgJY7/JjsniA2CQdDJAhrZvG7hzy3HfwEGAFdwoJHzsBGDAAAAAElFTkSuQmCC) 10 10, auto;
	filter: brightness(0.6);
	font-family: var(--player-font);
	font-size: var(--playlist-button-font-size);
	height: 100%;
	letter-spacing: 1px;
	margin-top: 0;
	overflow: hidden;
	text-transform: var(--playlist-button-text-transform);
	transition: all 300ms ease;
	width: var(--playlist-button-width);
}


#playlist button:hover {
	background-color: rgb(0, 0, 0);
	border: solid 2px rgb(34, 34, 34);
	filter: brightness(1);
	height: 100%;
	width: 100%;
}


#playlist button:focus,
#playlist button.active {
	border: solid 2px var(--playlist-button-border-active-color);
	cursor: none;
	filter: brightness(1);
}

#playlist button:active {
	transform: scale(0.95);
}

/* MEDIA QUERY for PLAYLIST BUTTON*/

@media only screen and (max-width: 980px) {
	#playlist button {
		font-size: var(--playlist-button-mobile-font-size);
		font-size: var(--caption-font-mobile-size);
		letter-spacing: 0;
		padding-top: calc(var(--caption-container-mobile-padding) - 5px);
		padding-bottom: var(--caption-container-mobile-padding);
		width: var(--playlist-button-mobile-width);
	}

}

/* Chrome, Edge, and Safari */
::-webkit-scrollbar {
	width: 16px;
}

::-webkit-scrollbar-track {
	background: #212121;
}

::-webkit-scrollbar-thumb {
	background-color: #121212;
	border-radius: 15px;
	border: 2px groove #121212;
}