body {
    margin-top: 40px;
}

.content {
    max-width: 600px;
}

.top-section {
    display: flex;
    flex-wrap: wrap;
}

.avatar {
    margin-left: 5px;
}

.avatar-link {
    color: #6e77a5;
}

.profile-links {
    list-style-type: none;
}

.name-heading {
    margin-bottom: 0.5px;
}

.mono {
    font-family: 'Roboto Mono';
}

.callout {
    color: #e8e8e9;
    background: rgba(110, 119, 165, 0.14);
    border: 1.5px solid rgba(110, 119, 165, 0.4);
    border-radius: 12px;
    padding: 12px 16px;
    line-height: 1.3;
}

a.nav-menu {
    color: #e8e8e9;
    text-decoration: none;
    padding-left: 20px;
}

a.nav-menu:before {
    content: '\00B7';
    padding-right: 10px;
}

a.nav-menu:after {
    content: '\00B7';
    padding-left: 10px;
}

a.nav-menu:hover {
    color: #6e77a5;
    text-decoration: none;
}