* {
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box; 
}

html {
    height: 100%;
    font-family: 'Roboto', sans-serif;
}
body {
    min-height: 100%;
}

.headline {
    font-family: 'Oswald', sans-serif;
    line-height: 1.2;
    font-size: 4rem;
}

.logo {
    font-family: 'Oswald', sans-serif;
    
    font-size: 2rem;
    font-weight: 700;
}

.logo a {
    text-decoration: none;
    color: white;
}

.flexparent {
    display: flex;
    
}

.flexcolumn {
    flex-direction: column;
}

.container {
    flex: 20 1 700px;
    padding: 0 1rem;
}

.pad1remlr {
    padding: 0 1rem;
}

.sideout {
    flex: 1 100 10%; 
}

.col1 {
    flex: 1 1 700px; 
}

.col2 {
    flex: 1 1 200px; 
}

.flexwrap {
    flex-wrap: wrap;
}

.red {
    background-color: red;
}

.yellow {
    background-color:yellow;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

.white {
    background-color: white;
}

.lightgrey {
    background-color: #e5e5e5;
}

.footer {
    background-color: #303030;
    padding: 2rem 0;
    color: white;
}

.fullwidth {
 width: 100%;
}

.autoleftmargin {
    margin-left: auto;
}

.pad1rem {
    padding: 1rem;
}

.search-box-radius {
    border-radius: .5rem;
}

.pad1remt {
    padding-top: 1rem;
}

.margin1remt {
    margin-top: 1rem;
}

.margin1remb {
    margin-bottom: 1rem;
}

.margin1remr {
    margin-right: 1rem;
}

.summary {
    border-bottom: #e5e5e5;
}

.bio {
    padding-bottom: 8rem;
}

.bio h4 {
    margin-top: 2rem;
    text-transform: uppercase;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.bio p {
    margin-top: 1rem;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.bio-photo {
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 130px;
    height: auto;
  }

.pad4remb {
    padding-bottom: 4rem;
}

.sidebar-container {
    flex: 1 0 150px;
    margin-left: auto;
}

.aligncentre {
    align-items: center;
}

.copyright {
    margin: 0 auto;
}

.header {
 flex: 0 0;
}

.maincontent {
    flex-grow: 1;
}

.foot {
    flex:  0 0;
}