body::before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -10000;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 5, 5, .02))), url(../newimages/background/Tree_Background.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
}

h1 {
    color: var(--darker-blue-bar);
    font-family: "Lato", sans-serif;
    text-align: center;
}

p {
    font-family: "lato", sans-serif;
    color: #616161;
    padding: .1em;
}

.portfolio-text-box {
    margin: 3em 0em 3em 0em;
}

.center-button {
    text-align: center;
}

.submit-button {
    border-radius: 15px;
}

.portfolio-box > a {
    text-decoration: none;
    font-family: "lato", sans-serif;
    color: #101010;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 2em 2em 20em 2em;
    grid-gap: 2em;
    align-items: start;

    justify-items: center;
}

.portfolio-box {
    background-color: #F9F9F9;
    position: relative;
    padding: 1.5em;
    border: 2px solid #616161;
    display: inline-block;
    max-width: 18em;
}

.title-bar {
    height: 2em;
    max-width: 100%;
    
    align-self: center;

    position: absolute;
    
    margin-top: 3.5em;

    left: 0;
    right: 0;
    margin-left: 1em;
    margin-right: 1em;

    background-color: #F9F9F9;
    border: 2px solid #616161;
}


.title-box {
    margin: 10em 0em 2em 0em;
    grid-column: 1 /span 3;
    max-width: 20em;
    /*justify-self: stretch;*/
}

.portfolio-box p {
    text-align: left;
}

.neon-dreams-title {
    color: var(--neon-pink);
}

.neon-dreams {
    background-color: var(--neon-pink);
}

.neon-dreams:hover {
    background-color: var(--neon-pink-hover);
}

.bootstrap {
    background-color: #df902a;
}

.bootstrap:hover {
    background-color: #ba751b;
}

/*Responsive Media */

@media screen and (max-width: 1200px) {

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 7em 2em 15em 2em;
        grid-gap: 2em;
    }
}

@media screen and (max-width: 900px) {

    h1 {
        font-size: 2.5em;
        text-align: center;
    }

    .portfolio-box {
        text-align: center;
    }


}

@media screen and (max-width: 700px) {
    .grid-container {
        margin: 8em 1em 15em 1em;
        grid-gap: 1em;
    }

    @media screen and (max-width: 600px) {

        .col1,
        .col2,
        .col3,
        .title-box {
            grid-column: 1;
        }

        .grid-container {
            grid-template-columns: 1fr;
            margin: 8em 1em 15em 1em;
            grid-gap: 4em;
        }
    }