.projectsDiv
{
    display: flex;
    flex-direction: row;
    width: calc(100vw - 1em);
    justify-items: center;
    flex-wrap: wrap;
    /*overflow-y: scroll;*/
    padding-bottom: 5em;
}

.project
{
    margin-top: 2vw;
    width: 20vw;
    max-width: 20vw;
    height: 40vh;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
    background-size: cover;
    cursor: pointer;
    box-shadow: 0px 0px 34px -8px rgba(0,0,0,0.75);
    background-repeat: no-repeat;
    overflow-y: hidden;
    text-align: center;
    flex: 1 0 18%;
}

.projectDescription
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .3em;
    background-color: var(--background-color);
    color: var(--textareas-and-inputs);
    border-right: 3px solid var(--textareas-and-inputs);
    border-left: 3px solid var(--textareas-and-inputs);
    height: 0;
    width: 100%;
    position: relative;
    top: 100%;
    left: 0;
    backdrop-filter: blur(10px);
    transition: all ease 0.3s;
    pointer-events: none; 
}

.project:hover .projectDescription
{
    top: 0%;
    height: 100%;
    transition: all ease 0.3s;
}

h4
{
    text-align: center;
}

.projectView
{
    width: 80vw;
    height: 80vh;
    position: absolute;
    top: 10vh;
    left: 10vw;
}