html {
    font-family: Open Sans, sans-serif; 
    background-color: #2d2d2d; 
    color: white;
    margin: 0;
    padding: 0;
    height: 100%; /* Ensures full height usage */
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-height: 100vh; /*Ensures minimum full viewport height */
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    flex-grow: 1;/* This item will grow to fill the available space */
}

.disclaimer::before {
  position: absolute;
  top: 1;
  right: 1rem;
  content: "This page is currently only styled for 1920x1080 resolution.";
  display: block;
  font-size: 14px;
  background-color: #C0392B;
  color: #fff;
  text-shadow: #000 1px 1px 1px;
  text-align: left;
  margin: 0;
  padding: .25rem .35rem;
  border-radius: 4px;
}

.sign {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: auto;
}

.logo_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: auto;
}

.logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 50%;
    max-width: 50%;
    box-sizing: border-box;
    margin: .5rem 0 1rem 0;

}
.controls {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 10%;
    z-index: 100;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: auto;
}

.thumbnail-container {
position: fixed;
top: 0%;
left: 10%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-width: 87.5%;
width: 87.5%;
margin: 2.5rem 0 0 0;
padding: 0;
flex-direction: row;
box-sizing: border-box;
}

h1 {
position: relative;
font-size: .8rem;
font-weight: 400;
color: #e8f48c;
margin: 0 0 0 0;
text-shadow: #000 1px 1px 1px;
width: 100%;
text-align: left;
margin-left: 25%;
} 

h2 {
position: relative;
font-size: .85rem;
font-weight: 400;
color: #ffa500;
margin: 0;
text-shadow: #000 1px 1px 1px;
width: 100%;
text-align: left;
margin-left: 25%;
} 

p {
font-size: .75rem;
margin: 0; padding: 0;
}

.timing {
margin: 0 0 1rem 0;
}

.small {
font-size: .8rem;
margin: 0 0 1rem 0; padding: 0;
color: gray;
}

a.button {
font-size: .75rem;
color: #fff;
text-shadow: #000 1px 1px 1px;
background-color: #000;
padding: 0 .4rem .1rem .35rem;
border-radius: 4px;
margin: auto;
width: fit-content;
text-align: center;
text-decoration: none;
} 

a.button:hover {
background-color: #00A9E0;
}

a.button:active {
background-color: #C0392B;
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    overflow: hidden;
    height: calc(23vh);
    min-height: calc(23vh); 
    max-height: calc(23vh);  
    width: calc(20%);
    max-width: calc(20%);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.image-wrapper {
    width: calc(100% - 10px); 
    max-width: calc(100% - 20px); 
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    margin: 0;
    display: flex;
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    text-align: center;
    position: relative; 
    box-sizing: border-box;
}

.image-wrapper > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%!important;
    height: 100%!important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 200;
    a {
        padding: 0; margin: 0; 
    }
}

.image-container a {
    padding: 0; 
    margin: 0; 
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumb {
    opacity: 0.85;
    box-shadow: transparent 0 0 4px 4px;
    cursor: pointer;
    width: 100%; /* Changed from max-width */
    height: 100%; /* Changed from max-height */
    object-fit: cover; /* Changed from contain to cover */
    padding: 0;
    margin: 0;
}

.thumbnail-title {
    font-size: .85rem;
}

iframe {
    width: calc(100% - 20px);
    height: calc(100% - 20px); /* Added calc for height */
    border: 3px solid #000;
    outline: none;
    pointer-events: none;
    box-shadow: #00A9E0 0 0 5px 2px;
    border-radius: 4px;
}

/* Add media queries for responsiveness */
@media (max-width: 1600px) {
    .tile {
        width: calc(25% - 20px);
        max-width: calc(25% - 20px);
    }
}

@media (max-width: 1200px) {
    .tile {
        width: calc(33.33% - 20px);
        max-width: calc(33.33% - 20px);
    }
}

@media (max-width: 900px) {
    .tile {
        width: calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 600px) {
    .tile {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
}
@media ((min-width:320px) and (max-width: 768px)) {
  
        .flex-container {
            display: flex;
            flex-direction: column;
            /* justify-content: space-between;
            align-items: flex-start;
            width: 100%;
            height: 100%;
            box-sizing: border-box; */
        }
        .controls {
            
            top:50%;
            left:12%;
            width: 100%;
            z-index: 100;
            /* padding: 1.5rem 0; */
        
        }
    }