@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;1,400&display=swap');




:root {
  /* DEFAULT YOUTUBE VIDEO ASPECT RATIO */
  --video-aspect-ratio: 16 / 9; 
  
  --player-background-color: #111;  /* True Black */
  --player-border-color: #111;      /* Dark Gray */
  --playlist-background-color: rgba(36, 36, 36, 0.95); /* Deep Charcoal */
  --playlist-button-border-active-color: #00A8E8; /* Electric Blue Accent */
  --caption-text-color: #E0E0E0; /* Light Gray */
  
/* PLAYER CONTAINER STYLES*/
 --player-font: Montserrat;
 --player-border-width: 5px; /* <-- 0 = no border */
  --playlist-button-text-transform: lowercase; /* <--  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: 20px;
  --caption-font-mobile-size: 18px;
  --caption-text-color: rgba(255, 255, 255, 1);
  --caption-text-transform: uppercase; /* <--  uppercase - lowercase- normal - etc.*/
  
  

  /* FOR DEMO */
  --parent-container-max-width: 980px; /* <-- PLAY WITH ME */
}


 /* FOR DEMO */
.playlist-parent-container {
  width: 90%;
  max-width: var(--parent-container-max-width);
  margin: 0 auto;
  padding-top:60px;
}
@media only screen and (max-width: 980px) {
  .parent-container {
  padding-top:0;
}
  
}


/* BEGIN YOUTUBE PLAYER CSS */

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

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

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

#autoplay-toggle {background:transparent;border:0;color:white;font-size:14px;text-transform:uppercase;letter-spacing:1px;}

/* MEDIA QUERY for CAPTION */

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

}

#playlist {
  background-color: var(--playlist-background-color);
  overflow: scroll-x;
  padding-top: 15px;
  padding-bottom: 25px;
  /* grid layout for playlist */
  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);
  overflow-x: auto;
  color:white;
  
}  

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



#autoplay-state {
    font-weight: bold;
  font-size:14px;
  
}

#autoplay-container {
    text-align: right; /* Adjust as needed */
    margin-top: 0px;
}

#autoplay-toggle {
    background: transparent;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  letter-spacing:2px;
  font-size:12px;
}


#playlist button {

  aspect-ratio: var(--video-aspect-ratio);
  width: var(--playlist-button-width);
  font-family: var(--player-font);
  font-size: var(--playlist-button-font-size);
  color: var(--playlist-button-text-color);
  text-transform: var(--playlist-button-text-transform);
  overflow: hidden;
   border: solid 3px var(--playlist-button-border-color);
  filter: brightness(0.7);
  height: 100%;
  background-size: cover;
  background-position: center;
  padding-left: 10px;
  padding-right:10px;
  letter-spacing:1px;
    transition: all 300ms ease;
  
/* CUSTOM PLAYLIST BUTTON CURSOR  */
 
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMi1jMDAwIDc5LjU2NmViYzViNCwgMjAyMi8wNS8wOS0wODoyNTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIzLjQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QURDQ0ZGRURGMUFBMTFFQ0JCQTFDMDBCMDE0NDg5M0QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QURDQ0ZGRUVGMUFBMTFFQ0JCQTFDMDBCMDE0NDg5M0QiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBRENDRkZFQkYxQUExMUVDQkJBMUMwMEIwMTQ0ODkzRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBRENDRkZFQ0YxQUExMUVDQkJBMUMwMEIwMTQ0ODkzRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps/vyusAAAdxSURBVHja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),
    auto;
}


#playlist button:hover {
  filter: brightness(1);
   border:solid 2px var(--playlist-button-border-hover-color);
}


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

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

/* MEDIA QUERY for PLAYLIST BUTTON*/

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

}
#playlist {
    display: flex;
    overflow-y: hidden; /* Prevent the container from scrolling */
  overflow-x: scroll;
    white-space: nowrap; /* Keep all buttons in a row */
    position: relative;
}

#playlist button {
    min-width: 190px; /* Match the playlist button width */
    margin: 0 5px; /* Space between buttons */
    padding: 10px;
    background-size: cover;
    background-position: center;
}

/* Ensure smooth button movement */
#playlist {
    transition: transform 0.4s ease;
}


/************************* //  END PLAYER MARK-UP */


/* DEMO PAGE STUFF */

/* CSS PLAYER COLOR PALETTE EXAMPLES.  Color themes set as class
   in the JSON file. */

.colonial {
  --player-background-color: #13294B;  /* Colonial Blue */
  --player-border-color: #800000;      /* Maroon */
  --playlist-background-color: rgba(128, 0, 0, 0.95); /* Maroon */
  --playlist-button-border-active-color: #B6C5E1; /* Faded Blue */
}

.rustic {
  --player-background-color: #40321E;  /* Deep Brown */
  --player-border-color: #40321E;      /* Warm Tan */
  --playlist-background-color: rgba(139, 90, 43, 0.95); /* Leather Brown */
  --playlist-button-border-active-color: #D6AE7B; /* Warm Gold */
}

.simple{
  --player-background-color: #1E1F26;  /* Dark Charcoal */
  --player-border-color: #D72638;      /* Neon Red */
  --playlist-background-color: rgba(0, 0, 25, 0.95); /* Teal */
  --playlist-button-border-active-color: #F3C13A; /* Bright Yellow */
}

.vintage {
  --player-background-color: #2E2B2F;  /* Faded Charcoal */
  --player-border-color: #A67C52;      /* Muted Gold */
  --playlist-background-color: rgba(166, 124, 82, 0.95); /* Warm Beige */
  --playlist-button-border-active-color: #B8B8A3; /* Soft Sage */
}
.modern-dark {
  --player-background-color: #111;  /* True Black */
  --player-border-color: #111;      /* Dark Gray */
  --playlist-background-color: rgba(36, 36, 36, 0.95); /* Deep Charcoal */
  --playlist-button-border-active-color: #00A8E8; /* Electric Blue Accent */
  --caption-text-color: #E0E0E0; /* Light Gray */
}

.warm-gray {
  --player-background-color: #2F2F2F;  /* Charcoal Gray */
  --player-border-color: #555555;      /* Soft Steel */
  --playlist-background-color: rgba(85, 85, 85, 0.95); /* Muted Gray */
  --playlist-button-border-active-color: #C4B7A6; /* Warm Beige Accent */
  --caption-text-color: #F4F4F4; /* Soft White */
}





/* ADD STROKE TO TEXT  */

#video-player h2,
#video-player h3,
#video-player button,
#video-caption
{
  text-transform:letter-spacing:2px;
  text-shadow: 2px 0 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(0, 0, 0, 0.5),
    -2px 0 0 rgba(0, 0, 0, 0.5), 0 -2px 0 rgba(0, 0, 0, 0.5);
}

#theme-selector-container {
  top:0;
  width:100%;
   text-align: center;
  margin-top:20px;
}

/* Theme Selector Styles */
#theme-selector {

    width: 200px;
    padding: 8px 12px;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    color: #ffffff;
    background: #0F2B4D; /* Default dark blue */
    border: 2px solid #ffffff;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  
}

/* Hover & Focus Styles */
#theme-selector:hover,
#theme-selector:focus {
    background: #13294B; /* Slightly brighter blue */
    border-color: #B6C5E1; /* Light Blue */
}

/* Dropdown Arrow Customization */
#theme-selector::-ms-expand {
    display: none; /* Removes default arrow in IE */
}

#theme-selector option {
    background: #0F2B4D; /* Keep dropdown colors consistent */
    color: #ffffff;
}



@media only screen and (max-width: 980px) {
 
}

article {width:100%;padding:25px;margin:0 auto;max-width:var(--parent-container-max-width)}
body, html {  text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-fon-smoothing: grayscale;
  font-family: 'Montserrat', sans-serif;
}
ul, li {list-style:none}

body {
  background: black;
  color:white;
  padding-bottom:50vh;
  font-weight:600;
}

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




a {color:red}