body, html{
    min-height:100%;
    min-width:99%;
}
.backdrop {
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center bottom;
    height: 100%;
}
.topbar {
    background-color: #dfdede; 
    width: 100%; 
    height: 2.5%; 
    /*border-style: solid; 
    border-width: thin; 
    border-radius: 3px; */
    display: table;
    top: 0;
    padding-left: 0.1%;
    padding-right: 0.1%;
}
.name {
    color: rgb(0, 0, 0); 
    vertical-align: middle; 
    display: table-cell; 
    padding-left: 1em;
    font-size: 30px;
    font: Garamond;
}
.section {
    color: rgb(0, 0, 0); 
    vertical-align: middle; 
    display: table-cell;
    font:Garamond;
    font-size: 14;
    padding-right: 0em;
    padding-left: 1em;
}
.contact-info {
    color: rgb(0, 0, 0); 
    vertical-align: middle; 
    display: table-cell;
    padding-right: 0em;
}
.container {
    padding-top: 0.1%; padding-left: 0%; padding-right: 0%; height: 99%; width: 100%
}
.main-content {
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto; 
    background-color: rgb(223, 223, 223); 
    width: 60%; 
    height: 40%; 
    border-style: solid; 
    border-width: thin;
    border-radius: 3px; 
    padding-top: 6em;
}
.copyright {
    padding-left: 40px;
    font-size: 99%;
}
.wall-text {
    padding-left: 5%;
    padding-right: 5%;
}
.wall-text > p {
    font-size: 18px;
    line-height: 30px;
}
.headshot {
    float: left;
    display: block;
    box-shadow: 0px 0px 5px #888;
    margin-right: 24px; 
    margin-bottom: 17px;
    padding: 6px;
}
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column-pana {
    flex: 100%;
    max-width: 100%;
    padding: 0 2px
}

.column-big {
    flex: 66%;
    max-width: 66%;
    /* min-width: 6.9cm; */
    padding: 0 2px;
}

.column-little {
    flex: 33%;
    max-width: 33%;
    /* min-width: 6.9cm; */
    padding: 0 4px;
}

.column-pana img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

.column-big img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

.column-little img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
/* @media screen and (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
} */

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
    .column-big {
        flex: 100%;
        max-width: 100%;
        padding: 0 4px;
    }
    
    .column-little {
        flex: 100%;
        max-width: 100%;
        padding: 0 4px;
    }
    
    .column-big img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
    }
    
    .column-little img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
    }
}