.project-box-hover{
    opacity: 0.75;
}

.flex-container{
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    flex-wrap: wrap;
    /*This prevents other boxes from filling space when you hover over a box*/
    align-items: flex-start;
}

.project-box{
    margin: 5rem;
    width: 40%;
    color: white;
    border-radius: var(--border-radius-box);
    border: var(--border-box);
    box-shadow: var(--box-shadow);
    transition: opacity 1.5s;
}

.project-box img{
    width: 100%;
    height: 40rem;
    border-radius: 0.8rem; 
    /* This will make the img fit the entire dimensions of the img defined here (width 100% and height 40rem) */
    object-fit: cover;
    object-position: left;
    /* This gets rid of the tiny amount of space on the bottom of each img */
    vertical-align:middle;
    position: relative;
}

/* The bug is the margin-top is also increasing the content area of .project-box */ 
.project-box-content {
	font-size: 175%;
	color: black;
	/* width: auto; */
	text-align: center;
	padding: 1rem;
    margin-top: -5.4rem;
    transition: margin-top 1.5s;
}

.project-box-content-hover {
    margin-top: 0;
}

/* #edi-web-app-box{
    background-image: url(../images/EDI-web-app.png);

} */

/* #brick-bazaar-box{
    background-image: url(../images/brick-bazaar.png);
} */

/* #coming-soon {
    background-image: url(../images/coming-soon.jpg);
} */

@media all and (max-width: 1170px) {
    .flex-container{
        flex-direction:column;
        align-items: center;
    }

    .project-box{
        margin: 2rem;
        min-width:auto;
    }

    .project-box img{
        height: 25rem;
    }

    .project-box-content{
        margin-top: 0;
        font-size: 125%;
    }
  }

  @media all and (max-width: 650px) {
    .flex-container{
        flex-direction:column;
        align-items: left;
    }

    .project-box{
        display:flex;
        flex-direction: row;
        justify-content: left;
        transition: none;
        width:100%;
        margin: 2rem auto;
        align-items: center;
        position: static;
    }

    .project-box:hover{
        /* visibility: visible; */
        opacity:1;
    }

    .project-box img{
        height: 15rem;
        width:40%;
        /* display:block; */
    }

    .project-box p.project-box-content{
        display:block;
        color: var(--main-nav-font-color);
        font-size: 100%;
        margin-left:2rem;
        position: static;
        width: 50%;
        visibility: visible;
    }
  }