body{
    margin:0;
    padding:0;
    font-family: 'Roboto', sans-serif;
  }
  
  h1 {
    font-family: 'Patua One', cursive;
  }
  
  header {
    background:#252b31e3;
    width:100%;
    padding:40px 0;
    color:white;
    text-align:center;
  }
  
  a {
    text-decoration:none;
    color:White;
    
  }
  
  nav ul {
    background-color:#313d49;;
    overflow:hidden;
    color:white;
    padding:0;
    margin:0;
    text-align:center;
    -webkit-transition:max-height 0.4s;
    -ms-transition:max-height 0.4s;
    -moz-transition:max-height 0.4s;
    -o-transition:max-height 0.4s;
    transition:max-height 0.4s;
  }
  
  nav ul li {
    display:inline-block;
    padding:20px;
  }
  
  nav ul li:hover {
    background-color:rgb(211, 210, 210);
    color: #313d49;
  }
  
  section {
    line-height: 1.5em;
    font-size:0.9em;
    padding:40px;
    width:75%;
    margin:0 auto;
  }
  
    .handle {
      width:100%;
      background: #446274;
      text-align:left;
      box-sizing:border-box;
      padding:15px 10px;
      cursor:pointer;
      color:white;
      display:none;
    }
  
  @media screen and (max-width:580px){
    
    nav ul {
      max-height:0;
    }
    
    .showing {
      max-height:20em;
    }
    nav ul li {
      width:100%;
      box-sizing:border-box;
      padding:15px;
      text-align:left;
    }
     
    .handle {
      display:block;
    }
    
  
  }