/* roboto-regular - latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/roboto-v20-latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html, body {
    margin: 0;
    padding: 0;
    background: #0070ff;
}
body {
    background-color: #0070ff;
    color: #ffffff;
    font: 25px Roboto,sans-serif;
}
h1{
    font-size: 50px;
}
h2{
    font-size: 33px;
}
li{
    line-height:2em;
}
a{
    color: #cccccc;
}
div{
    position: relative;
}

.logo img{
    width: 250px;
}

.content{
    margin: 1em;
}

.flex-container {
  font-size: 18px;
  display: flex;
  justify-content: center;
  max-width: 800px;
}

.flex-container > div {
  width: 33%;
  box-sizing:border-box;
  padding: .3em;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  text-align: left;
  /*margin-left: 10px;*/
}
  
.flex-container > div:first-child {
    /*margin-left: 0px;*/
}

@media ( max-width: 800px ) {
    body{
        font-size: 15px;
    }
    h1{
        font-size: 28px;
    }
    h2{
        font-size: 23px;
    }
    .flex-container {
        flex-direction: column;
        font-size: 15px;
    }
    .flex-container > div {
        width: 100%;
        padding-left:8em;
    }
    .flex-container > div:before { 
        display:block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 7em;
        height:100%;
        padding: .3em; 
        background-color: grey;
        text-align:left;
        box-sizing: border-box;
    }
}