.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 14.0625vw;
    grid-auto-flow: dense;
    gap: 6px;
    position:  relative;
    margin-top: 0;
    margin-bottom: 6px;
    margin-left: 6px;
    margin-right: 6px;
}

.albums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 14.0625vw;
    grid-auto-flow: dense;
    gap: 6px;
    position:  relative;
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
}

.albums h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    font-size: 1.5em;
    transform: translate(-50%, -50%);
    cursor: pointer;
}


.albums div {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius:10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.albums div:hover {
/*transform: translateY(-10px);*/
    transform: scale(1.05) translateZ(0);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.25), 0 8px 16px rgba(255, 255, 255, 0.1); /*0 12px 24px rgba(0, 0, 0, 0.2);*/
}

img:not(#logo){
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius:10px;
}
video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius:10px;
}

.gallery .four-grid-cells {
    grid-row: span 2 / auto;
    grid-column: span 2 / auto;
    border-radius:10px;
}
.gallery .wide-image {
    grid-column: span 2 / auto;
    border-radius:10px;
}
.gallery .tall-image {
    grid-row: span 2 / auto;
    border-radius:10px;
}

span{
    grid-column: span 4/auto;
    grid-auto-rows: 5vw;
}
@media screen and (max-width: 800px) {
   .gallery {
        grid-template-columns: 1fr 1fr;
       grid-auto-rows:28.125vw;
    }
    
    .albums {
        grid-template-columns: 1fr 1fr;
       grid-auto-rows:28.125;
    }
}
@media screen and (max-width: 480px) {

/* changes the grid layout to a single column */
    .gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 56.25vw
    }

    .albums{
        grid-template-columns: 1fr;
        grid-auto-rows: 56.25vw
    }

/* resets the grid placement properties for 
the images spanning four grid cells */
    .gallery .four-grid-cells {
        grid-row: auto;
        grid-column: auto;
    }

/* resets the grid placement properties for 
the images spanning two grid columns  */
    .gallery .wide-image {
        grid-column: auto;
    }

}
/**********************************************************/
/*                    VIDEO CONTROLS                      */
/**********************************************************/
/* 2.1. Control-bar background → fully opaque aqua */
video::-webkit-media-controls-panel,
video::-internal-media-controls-panel {
  background: rgba(0, 0, 0, 0) !important;
}


/* 2.2. PLAY / PAUSE ICONS → keep native shape, but use filter to push them to pure aqua */
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-pause-button {
  /* 
     FILTER EXPLAINED:
       • invert(40%) turns the default light-gray/white roughly toward a darker base
       • sepia(100%) adds warm tones so that hue-rotate can then land exactly on 180° (cyan/aqua)
       • saturate(8000%) spikes the saturation so the result is vivid, not faded
       • hue-rotate(180deg) shifts that warmed shape into pure cyan/aqua
       • brightness(1) & contrast(1) leave them at normal lightness
  */
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  /* Do NOT change width/height—keep the native default size */
  margin: 0 8px !important; /* maintain a bit of spacing left/right */
}

video::-webkit-media-controls-overlay-play-button{
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
}


/* 2.3. MUTE / SPEAKER ICON → same filter (keeps shape, just tints it) */
video::-webkit-media-controls-mute-button {
  filter:  sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  margin: 0 4px 0 2px !important;
}

video::-webkit-media-controls-volume-slider{
  filter:  sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  margin: 0 2px 0 4px !important;
}

/* 2.4. FULLSCREEN ICON → same “pure aqua” filter, native size */
video::-webkit-media-controls-fullscreen-button {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  margin: 0 8px !important;
}

/* 2.5. TIMELINE (seek-bar) → apply filter to recolor entire bar into aqua/hinted tones */
video::-webkit-media-controls-timeline {
  /* That same filter chain applied to the timeline makes the “played” portion a vivid aqua,
     and the “buffered” portion a lighter aqua‐ish. */
    filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  height: 5px !important; /* keep a slightly taller bar, similar to YouTube */
  margin-left: 16px !important;
  margin-right: 16px !important;
}

video::-webkit-media-controls-timeline::-webkit-media-controls-timeline-played-background {
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
}

/*  • “Buffered” portion → lighter semi‐opaque aqua */
video::-webkit-media-controls-timeline::-webkit-media-controls-timeline-buffered-background {
  filter: sepia(100%) saturate(6000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
}

/* 2.6. SCRUBBER (drag handle) → force it white, only show on hover for contrast */
video::-webkit-media-controls-timeline-thumb {
  width: 12px !important;  /* leave at default “tiny circle” size */
  height: 12px !important;
  filter: sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) !important;
  border-radius: 50% !important;
  margin-top: -3px !important; /* center on the 5px-high bar */
  opacity: 0 !important;
  transition: opacity 0.1s ease-in-out;
}
video::-webkit-media-controls-timeline:hover::-webkit-media-controls-timeline-thumb {
  opacity: 1 !important;
}

/* 2.7. TIME TEXT (current / remaining) → pure aqua */
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
  color: rgba(0, 255, 255, 1) !important;
  font-size: 12px !important;
  margin: 0 8px !important;
}

/* 2.9. HIDE ANY EXTRA BUTTONS (skip, PiP, cast, etc.) for a clean YouTube-like row */
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button,
video::-webkit-media-controls-picture-in-picture-button
 {
  display: none !important;
}

/* On hover or active (when you click and hold), still keep it transparent */
video::-webkit-media-controls-play-button:hover,
video::-webkit-media-controls-play-button:active,
video::-webkit-media-controls-overlay-play-button:hover,
video::-webkit-media-controls-overlay-play-button:active,
video::-webkit-media-controls-pause-button:hover,
video::-webkit-media-controls-pause-button:active,
video::-webkit-media-controls-fullscreen-button:hover,
video::-webkit-media-controls-fullscreen-button:active {
  box-shadow:none !important;
  border: none !important;
  filter:  invert(100%) sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) opacity(1) !important;
}

/* Remove the default focus ring/outline on these buttons */
video::-webkit-media-controls-play-button:focus,
video::-webkit-media-controls-pause-button:focus,
video::-webkit-media-controls-overlay-play-button:focus,
video::-webkit-media-controls-fullscreen-button:focus {
  box-shadow:none !important;
  border: none !important;
  filter:  invert(100%) sepia(100%) saturate(8000%) hue-rotate(120deg) brightness(1) contrast(1) opacity(1) !important;
}