/*  //////////////////////////////////////////////////////////////
                Header Section
/////////////////////////////////////////////////////////// */
.header-top-logo {
height: 100%;
width: fit-content;
background-color: yellow;
}

.header-top-logo img {
    height: 300px;
    }

.header-nav {
width: 120px;
height: 100%;
background-color: blue;
}

/*  //////////////////////////////////////////////////////////////
                Body Section
/////////////////////////////////////////////////////////// */

 body {
background-color: gray;  
width: 1516px;  
 }
 
/*  //////////////////////////////////////////////////////////////
                Photo Viewer Section
/////////////////////////////////////////////////////////// */

 .photo-viewer {
	height: 800px;
    width: 1200px;
	overflow: hidden;
    border: 3px solid white;
	margin-top: 30px;
	visibility: hidden;
}

.photo-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or 'contain', 'fill', 'none', 'scale-down' */
}

.photo-viewer.is-loading {
	content: url("../image/loading.gif");
	position: absolute;
	top: 0;
	align-content: center;
}

/*  //////////////////////////////////////////////////////////////
                Gallery Section
/////////////////////////////////////////////////////////// */

.photo-gallery {
    width: 1500px;
    height: 900px; 
    display: flex;
    flex-direction: row;
    position: relative; /* Needed if you want the thumbnails to be absolutely positioned relative to this container */
}

/*  //////////////////////////////////////////////////////////////
                Story Board Section
/////////////////////////////////////////////////////////// */

.story-board {
    width: 1500px;
    height: 900px;
    display: flex;
    position: relative;
    flex-direction: column;
    background-size: 100%;
    background-image: url("../image/camera_columbia\ _rock.png"); 
}

/*  //////////////////////////////////////////////////////////////
                Picture Board Section
/////////////////////////////////////////////////////////// */

.picture-board {
    width: 1500px;
    height: 1800px; 
    margin-bottom: 8px; 
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-image: url("../image/When\ I\ am\ 65.jpg"); 
}

/*  //////////////////////////////////////////////////////////////
                Thumbnails Section
/////////////////////////////////////////////////////////// */

.thumbnails {
        border: 3px solid whitesmoke;
        margin: 10px;

}

.thumbnailsSpaced {
        border: 3px solid whitesmoke;
        margin: 20px;

}

.thumbnails-container-left {
    display: flex;         /* Makes the container a flex container */
    flex-direction: column; /* Stacks the flex items (images) vertically */
    align-items: flex-start; /* Aligns items along the left edge (start of the cross axis) */
    gap: 10px;             /* Adds space between the images */
    padding: 20px;         /* Adds padding around the container */
    width: fit-content;    /* Optional: container width fits the content */
    justify-content: space-around; /* Distributes images evenly vertically*/
}

.thumbnails-container-left img {
vertical-align: bottom;
}

.thumbnails-container-right {
    display: flex;
    flex-direction: column; /* Stacks images vertically*/
    align-items: flex-end; /* Aligns images to the right edge of this container*/
    gap: 10px; /* Adds space between thumbnails*/ 
    padding: 20px;         /* Adds padding around the container */
     /* Position the strip to the right edge of the main container  */
    position: absolute;
    right: 0;
    top: 0;
    width: fit-content;
    justify-content: space-around; /* Distributes images evenly vertically*/
}

.thumbnails-container-right img {
vertical-align: bottom;
}

.split-container-left {
    display: flex;         /* Makes the container a flex container */
    flex-direction: column; /* Stacks the flex items (images) vertically */
    align-items: flex-start; /* Aligns items along the left edge (start of the cross axis) */
    gap: 10px;             /* Adds space between the images */
    padding: 20px;         /* Adds padding around the container */
    width: fit-content;    /* Optional: container width fits the content */
    justify-content: space-around; /* Distributes images evenly vertically*/
}

.split-container-left img {
vertical-align: bottom;
}

.split-container-right {
    display: flex;
    flex-direction: column; /* Stacks images vertically*/
    align-items: flex-end; /* Aligns images to the right edge of this container*/
    gap: 10px; /* Adds space between thumbnails*/ 
    padding: 20px;         /* Adds padding around the container */
     /* Position the strip to the right edge of the main container  */
    position: absolute;
    right: 0;
    top: 0;
    width: fit-content;
    justify-content: space-around; /* Distributes images evenly vertically*/
}

.split-container-right img {
vertical-align: bottom;
}


.split-on {
    visibility: visible;    
}

.split-off {
    visibility: hidden;
}
/*  //////////////////////////////////////////////////////////////
                Music Section
/////////////////////////////////////////////////////////// */

figure {
  background-color: bisque;
  
}

.caption {
    width: 1500px;
    border: 0px 2px 2px 2px solid black;
    border-radius: 0px 0px 20px 20px;
}

figcaption {
	text-align: center;
    background-color: antiquewhite;
}

.tagline {
	margin-top: 30px;
	width: fit-content;
	font-size: x-large;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.jukebox {
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

#trailer {
	position: relative;
}

.border {
	height: 1px;
	width: 1100px;
	border: 5px solid white;
	margin: 30px 100px 30px 100px;
}

/*  //////////////////////////////////////////////////////////////
                Hide and Seek Photo Viewers
/////////////////////////////////////////////////////////// */

.visible {
	visibility: visible;
}

.invisible {
	visibility: hidden;
}


/*  //////////////////////////////////////////////////////////////
                File Download
/////////////////////////////////////////////////////////// */

.tnFileDownload {
         border: 3px solid whitesmoke;
        height: 150px;
        width: 225px;
}

.fileDownload {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    text-align: right;
    font-size: x-large;
}

 #dl-viewer-1 {
	height: 800px;
    width: 1200px;
	overflow: hidden;
    border: 3px solid white;
	margin-top: 30px;
	visibility: hidden;
}

#dl-viewer-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or 'contain', 'fill', 'none', 'scale-down' */
}

.left-align {
    text-align: left;
    font-size: x-large;
    color: chartreuse;
}