body {
        margin: 0px;
        font-family: Palatino Linotype, Times New Roman, serif ;
        font-size: 125% ;
        color: #27AE60 ;
      }
      h1 {
        color: #800080 ;
        font-family: STXihei, Helvetica, sans-serif ;
      }
      h2 {
        color: #800080 ;
        font-family: STXihei, Helvetica, sans-serif ;
      }
      h3 {
        color: #800080 ;
        margin-top: 15px ;
        margin-bottom: 0px ;
        font-family: STXihei, Helvetica, sans-serif ;
      }
      p   {
         color: #27AE60 ;
         margin: 0 ;
         padding: 0 ;
      }  
      /* navigation */
      .navigation {
        padding: 0;
        list-style: none;
        margin: 0;
        background-color: #E5E8E8;
        text-align: left;
        display: block;
        flex-flow: column wrap;
        justify-content: space-around;
      }
      .navigation a {
        text-align: center;
        margin: 10px 15px ;
        border: 5px solid #800080 ;
        border-radius: 15px ;
        text-decoration: none;
        display: block;
        color: #27AE60 ;
        background-color: #D3D3D3 ;
        font-family: STXihei, Helvetica, sans-serif ;
      }
      .navigation li  a:hover {
        background: #800080;
        color: #FFFFFF;
        padding: 10px 10px ;
      }
      .navigation li:last-of-type a {
        border-bottom: -10px;
      }

      /* main layout */
      .wrapper {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        text-align: center;
      }
      .wrapper > * {
        padding: 0px;
        margin: 0;
        flex: 1 100%;
      }
      header.header {
        padding-right:0;
        padding-left: 6px;
        padding-bottom: 0;
        text-align: left;
      }
      .header, .main {
        background: #E5E8E8;
        padding: 0px 25px ;
      }
      .footer {
        font-family: STXihei, Helvetica, sans-serif ;
        font-size: 80% ;
        color: #800080;
        background: #E5E8E8;
        padding-left: 10px ;
        text-align: left;
      }
      .main {
        text-align: left;
      }
      aside {
        background: #E5E8E8; 
        max-width: 20% ;
      }

      /* medium sized screens */
      @media all and (min-width: 600px) {
        .navigation {
          flex-flow: row wrap;
        }
        .navigation a {
          padding: 1em;
        }
        .aside {
          flex: 1 auto;
        }
      }

      /* large sized screens */
      @media all and (min-width: 800px) {
        .navigation {
          justify-content: flex-end;
        }
        .main {
          flex: 3 0px;
        }
        .aside1 {
          order: 1;
        }
        .main {
          order: 2;
        }
        .aside2 {
          order: 3;
        }
        .footer {
          order: 4;
        }
      }