/* changes in respect to different viewports */

@media all and (min-width: 35em) {
   body{
      font-size: large;
      margin: 0.5em 1em ;
      letter-spacing: 0.15em;
   }
   
   article{
    flex: 17 1 0%;
   }
   
   aside{
      flex: 1 auto;
      width: 2em;
   }
   
   section.main-content{
      padding: 0 2em 0 2em;
   }
   
   nav ul {
      flex-flow: row wrap;
   }
   
   nav li{
      padding: 5px 10px;
   }
   nav li.umenu:hover > ul{
      margin-right: -11px;
   }
   
   .image-links img{
    width: auto;    
   }
   
   form{
      flex-flow: row wrap;
   }
   
   form ul{
      justify-content: space-between;
      flex-flow: row wrap;
   }

   form li.block{
      display: block;
      width: 100%;
   }
   textarea{
      width: 100%;
   }
   input, label {
      flex: auto;
   }
   .button{
      flex-direction: row;
   }
   div.examples{
    display: flex;
   }
}

@media all and (min-width: 50em) {
   body{
      margin: 0.5em auto auto auto;
   }
   form li{
      width: 40%;
   }
}