main {
    width: 95%;
    max-width: none;
}

#helpful {
    text-align: center;
}

main h2 {
    padding-left: .5em;
    padding-bottom: .25em;
    font-size:xx-large;
}

main img {
    padding: .1em;
}

main iframe {
    height: 27em;
    width: 48em;
}

figcaption{             /*hide captions in gallery view*/
    display: none;
}

/*Need to figure out how to display caption in large view*/
#caption {
    display: block;
    text-align: center;
    padding: 1em;
    background-color: darkred;
}

/*style for the gallery, copied from Codepen*/
/*Codepen source: https://codepen.io/jsauceda10/pen/oNZrJBR*/
.gallery{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.img-container:hover{
transition: all 0.1s ease-in-out;
opacity: 0.7;
}

.img-container img{
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}

.modal{
background-color:rgba(128, 0, 0, 0.75);
position:fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
}

.full-img{
position: absolute;
top: 50%;
left: 50%;
height: 85%;
transform: translate(-50%, -50%) scale(0.5);
transition: all 0.3s ease-in-out;

}

.full-img.open{
transform: translate(-50%, -50%) scale(1);
}

.modal.open{
opacity: 1;
pointer-events: all;
}
/*end Codepen copy*/