.content {
    overflow: hidden;
    /*positioning so that the text overlay can be in the right place*/
    position: relative;
    background-color: black;
}

/*set scale and opacity to transition to on hover*/
/*when hovering over the a element of a content box, do this to the child img*/
.content a:hover img {
    transform: scale(1.2);
    opacity: 0.4;
}
.content img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s, opacity 0.5s ease-in-out;
    opacity: 1;
}

/*setting position and style of content box text*/
.content-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
}

/*when hovering over the a element of a content box, do this to the child text*/
.content a:hover .content-text{
    opacity: 1;
}

#content-grid {
    height: 100%;
    /* width: 100%; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

/*fading in elements*/
/*version w/ header and footer stuff*/
/* #content-grid div, 
#header-text h1, 
#nav-links a, 
#language button,
#copyright p {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

#content-grid div.load, 
#header-text h1.load, 
#nav-links a.load, 
#language button.load,
#copyright p.load {
    opacity: 1;
} */

/*fading in elements*/
#content-grid div {
    opacity: 0;
    /*margin value set by the js + 5px*/
    margin-top: 20px;
    transition: opacity 0.5s ease-in, margin-top 0.3s ease-in;
}

#content-grid div.load {
    opacity: 1;
    /*transition back to the margin value set by the js*/
    margin-top: 15px;
}

@media only screen and (max-width: 900px) {
    #content-grid {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .content-text {
        font-size: 4vw;
    }
}