/* style for the film page */

/* grid info from https://learncssgrid.com/ */

/* animation for content fades */
#contentwrapper {
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

/* lightbox ref: https://www.youtube.com/watch?v=QghhoJBdw7A&t=220s&ab_channel=Mr.WebDesigner */
.container {
    display: block;
    margin: auto;
    width: 94%;
}

.image {
    max-width: 32%;
}

.image-wrapper img {
    aspect-ratio: 1/1;
    object-fit: contain;
    width: 100%;
    opacity: 100%;
    transition: 0.25s;
    cursor: pointer;
}

.image-wrapper img:hover {
    opacity:60%;
}

.image-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    justify-content: center;
    position: relative;
    padding-bottom: 2vw;
}


/* popup image field, starts with display: none */
.popup-image{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.85);
    height: 100%;
    width: 100%;
    z-index: 100;
}

.container .popup-image span{
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 40px;
    color: white;
    cursor:pointer;
}

.popup-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 94%;
    max-height: 95%;
    object-fit: cover;
    z-index: 200;
}

/* allows for easier minimizing */
#img-bg {
    display: block;
    width: 100%;
    height: 100%;
}


/* changes to block if too slim */
@media screen and (max-width: 750px) {
    .image {
        max-width: 49%;
    }
}


/* adds space to bottom of page */
.spacer {
    padding-top: 1vw;
    padding-bottom: 1vw;
}