.container {
    height: 100%;
    display: grid;
    grid-template: 95px auto auto 50px  / repeat(12, 1fr);
    grid-gap: 5px;
    grid-template-areas: 
        "h h h h h h h h h h h h"
        "m c c c c c c c c c c c"
        ". c c c c c c c c c c c"
        "f f f f f f f f f f f f";
}

.header {
    grid-area: h;
    background-color: #efefef;
    border-top-style: double;
    border-bottom-style: double;
    font-family: 'Nunito', sans-serif;
}

.menu {
    grid-area: m;
    background-color: #efefef;
    border-top-style: double;
    border-bottom-style: double;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
}

.menu a {
    text-decoration: none;
}

.content {
    grid-area: c;
    padding-left: 5em;
    padding-right: 10em;
    background-color: #f5f5f5;
    font-family: 'Lora', serif;
    font-size: 16px;
}

.footer {    
    grid-area: f;
    background-color: #efefef;
    border-top-style: double;
    border-bottom-style: double;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
}

h1 {
    font-family: serif;
    color: #222;
    font-size: 1.2em;
    text-decoration: none;
}

h2 {
    color: #5555dd;
    font-size: 1.2em;
}

figcaption {
    font-size: 0.8em;
}

#nav li {
    list-style-type: none;
    padding: 2px;
}

#homecontent {
    height: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
}

.homeimage {
    padding: 20px;
}

.me {
    border-radius: 100px;
    border: 2px solid #ddd;
}