/* 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;
     }
}

/* award blocks */
#award-wrapper {
    display:flex;
    flex-wrap: wrap;
    max-width: 1200px;
    justify-content: space-evenly; /* https://www.digitalocean.com/community/tutorials/css-align-justify */
    justify-items: center;
    margin: auto;
}
.award-block h3 {
    font-weight: 400;
    margin: 0;
    text-decoration: none;
}
.award-block h4 {
    font-weight: 100;
}
#awards {
    padding-top: 2em;
    text-align: center;
}
.award-block {
    color: white;
    flex: 1 1 250px; /* sets flex basis to 250px*/
    max-width: 375px;
    margin: .75em;
}
/* changes to block if too slim */
@media screen and (max-width: 880px) {
    #award-wrapper {
        display: block;
        grid-template-columns: 1fr;
    }
    .award-block {
        max-width: none;
        padding-bottom: 1em;
        padding-top: 1em;
    }
}


/* images */
#filmgrid {
    display: block;
    margin: auto;
    width: 94%;
}

.film_block img {
    width: 100%;
    object-fit: cover;
    opacity: 100%;
    transition: 0.25s;
}

.film_block {
    position: relative;
    padding-top: 2vw;
    padding-bottom: 2vw;
    width: 96%;
    margin: auto;
}



#film-title {
    text-align: center;
    margin-bottom: 5px;
}

#film-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.info-role {
    text-align: right;
    padding-right: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.info-name {
    text-align: left;
    padding-left: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}



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