*{
    box-sizing: border-box;
}

div#page{
    background: #f2f2f2;
   }
   
   .site-branding {
     display: flex;
     background: white;
     padding: 20px 20px;
     align-items: center;
   }
   
   .main-navigation{
     ul{
       justify-content: center;
     }
     li{
       padding: 20px;
     }
     a:visited{
     color: black
     }
     }
   
     .menu{
     
       display: flex;
       justify-content: center;
       flex-wrap: wrap;

       list-style: none;
       li{
         padding: 20px;
       }
       a:visited{
       color: black
       }
     }
   
   .menu-toggle img {
       width: 30px; 
       height: auto; 
   }
   
   @media only screen and (max-width: 768px) {
     .main-navigation {
       text-align: -webkit-right;
     }
   
     .menu{
       padding: 0;
       margin: 0;
     }
   

     
   }
   
   main#primary {
     float: left;
     margin-left: 20px;
     width: 60%;
     article{
       background: white;
     }
     a{
       text-decoration: underline;
     }
     @media only screen and (max-width: 600px) {
       padding: 20px;
       width: auto;
     }
     @media only screen and (max-width: 1024px) {
        width: auto;
      margin: 0px;
     
   }}
   
   #secondary {
     margin-top: 20px;
     width: 30%;
     background: white;
     float: right;
     padding: 20px;
     color: rgb(27, 27, 27);
     margin-right: 50px;
     a{
       color: #1e73be;
       text-decoration: underline;
     }
     @media only screen and (max-width: 600px) {
       margin: 0;
       padding: 0;
     }
     @media only screen and (max-width: 1024px) {
       width: 100%;
       float: none;
       padding: 15px;
     
   }}
   
   
   .site-footer {
     clear: both;
     width: 100%;
     position: relative;
     bottom: 0;
     background: #f1f1f1;
     padding: 20px 0;
     text-align: center;
   }