body {
    display: grid;
    grid-template-areas:
        'ribbon ribbon'
        'sidebar content';
}

a {
    text-decoration: none;
}

.sidebar, .content {
    margin: 10px;
    padding: 10px;
    background-color: #bdc3c7;
    color: black;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ribbon ********************************************************************/

.ribbon {
    padding: 0;
    margin: 0;
}

.ribbon {
    grid-area: ribbon;
    background: #2c3e50;
}

.ribbon, .ribbon a {
    color: #ecf0f1;
}

h1, h2 {
    margin: 0;
    padding: 0 20px;
}

.ribbon-links {
    display: table;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #7f8c8d;
    width: 100%;
    white-space: nowrap;
}
.ribbon-links li {
    display: table-cell;
    float: left;
    padding: 5px 20px;
    background-color: #7f8c8d;
}

.ribbon li:hover {
    background-color: #34495e
}

/* sidebar *******************************************************************/

.sidebar {
    grid-area: sidebar;
    width: 300px;
}

.side-picture {
    margin: 10px auto;
}

.side-card {
    margin: 10px;
    background-color: #ecf0f1;
}

.side-card h4, .side-content {
    padding: 10px 1em;
    margin: 0;
}

p.side-content {
    padding: 0.5em 1em;
}

/* content *******************************************************************/

.content {
    grid-area: content;
}