*{ --quasiWhite: #f1f1f1; }
html, body {
     margin: 0;
     min-width: 320px;  
     width: 100%;
     height: 100%;
     background-color: black;
     background-image: url("../images/DSC02498_ps.webp");
     background-position: center; /* Center the image */
     background-repeat: repeat-x; /* Do not repeat the image */
     background-size: cover;
}

h1 {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: Poppins;
     text-transform: uppercase;
     color: #fff;
     text-align: center;
     font-weight: 600;
     font-size: 3em; /* 16px; */
     letter-spacing: 30px;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     padding: 1.5em;
}

/* Style the video: 100% width and height to cover the entire window */
video {
     position: fixed;
     right: 0;
     top: 0;
     min-width: 100%; 
     max-width: 100%;    /*min-height: 100%; */
}
   
/* Add some content at the bottom of the video/page */
.content {
     position: fixed;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
     color: var(--quasiWhite);
     width: 100%;
     padding: 20px;
     overflow-y: auto;    /* width:100px; overflow:hidden;*/ /*overflow-x: scroll;*/
     height: 250px;
     line-height: 1em;    /* word-wrap: break-word; white-space: nowrap; */
     z-index: 900;
}

.content > p { 
     max-width: 90%;
     text-align:justify;
}

.legendHeader{
     color:var(--quasiWhite);
     width: 60%;
     display: inline;
}

.content > hr { max-width: 90%; margin-left: 0; }

.legendText{
     width:90%; 
     overflow:auto;
     bottom: 0;
     text-align: justify; /*height:55%; */
}

.legendText p{ margin : 0 }

.guiVideoBtns{
     position: absolute;
     width: clamp(2rem, 1rem + 1vh, 4rem);
     z-index: 999;
     padding: .5rem;
     opacity: 0;
     filter: drop-shadow( 4px 4px 3px rgba(255, 255, 255, .5)); /*bottom:0px;*/
}
#toggleInfoBtn{ right: 5rem }
#togglePlayBtn{ right: 2.5rem }
#toggleFullscreenBtn{ right: 0rem }

#toggleInfoBtn:hover{ cursor:help }
#togglePlayBtn:hover{ cursor:grab }
#toggleFullscreenBtn:hover{ cursor:crosshair }

#toggleInfoBtn:hover ~ .guiVideoBtns{ opacity: 1; transition: .3s; }
#togglePlayBtn:hover ~ .guiVideoBtns{ opacity: 1; transition: .3s; }
#toggleFullscreenBtn:hover ~ .guiVideoBtns{ opacity: 1; transition: .3s; }

.guiVideoBtns:hover{ opacity: 1; transition: .3s; }
.guiVideoBtns:hover ~ .content{ opacity: 1; transition: .3s; }
video:hover ~ .guiVideoBtns{
     opacity: 1;
     transition: .3s;
}