site.css

header{
    background-color: #05F2AF;
    color:black;
    text-align: center;
    padding: 10px;
    font-family: 'Raleway', sans-serif;
}

header a{
    color:black;
    padding: 10px;
}

footer {
    background-color: #05F2AF;
    color:black;
    position: absolute;
    font-family: 'Raleway', sans-serif;
    margin-bottom: -50px;
    width: 100%;
}

footer a{
    color:black;
}

li{
    list-style: none;
}

#container {
    position: relative;
    min-height: 100vh;
}

#selfie{
    padding:1em;
}

.content {
    font-family: 'Raleway', sans-serif;
    padding-bottom: 1rem;
    min-height:100vh;    /* Footer height */
}

.box{
    justify-content:center;
    display:block;
    margin:auto;
}

.depth{
    width:35vw;
    height:auto;
    justify-content:center;
    display:block;
    margin:auto;
}

.grid-container{
    display: grid;
    grid-template-columns: auto auto;
}
.grid-item{
    padding:5vw;
}

.images{
    width:35rem;
    height:auto;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

@media only screen and (max-width: 600px) {
    .depth {
        width:60vw;
    }
    .grid-container{
        grid-template-columns: auto;
    }
    .images{
        width:50vw;
        height:auto;
    }
}