html, body{

  margin: 0;
  display:flex;
  flex-direction: column;
  min-height:100vh;
  font: 400 21px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
  & > header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 1rem 0;
    box-shadow: 0 -3px 9px #000; 
    @media(min-width: 550px){
      padding: 0 1rem;
    }
    h1{
      margin: 0;
    }
    div, nav{
      flex: 0 1 100%;
    }
    div{
      @media(min-width: 1300px){
        flex: 0 1 75%;
      }
      @media(min-width: 550px){
        flex: 0 1 60%;
      }
    }
    nav{
      flex-basis: auto !important;
      @media (max-width: 1300px){
        flex: 0 1 25%;
      }
      @media(min-width: 550px){
        flex: 0 1 40%;
      }
      ul{
        list-style: none;
        padding: 0;
        display: flex;
        justify-content: space-between;
        li{
          @media(min-width: 550px){
            justify-content: space-around;
          }
        }
      }
    }
  }
}