body{

   font-family: Verdana, Geneva, sans-serif;
   max-width:1280px;
   margin: 0 auto; 
	float: none; 
}
   

* {

   box-sizing: border-box;
  
}

.top-nav {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   background-color: #737373;
   
   color: #fff;
   height: 50px;
   padding: 1em;
 }
 
 .menu {
   display: flex;
   flex-direction: row;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
 .menu > li {
   margin: 0 1rem;
   overflow: hidden;
   
 }
 
 .menu>li>a{
   text-decoration:none;
   color:#fff;
 }
 
 .menu>li:hover{
   background-color: #46b83b;
 }
 
 
 
 
 .menu-button-container {
   display: none;
   height: 100%;
   width: 30px;
   cursor: pointer;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 #menu-toggle {
   display: none;
 }
 
 .menu-button,
 .menu-button::before,
 .menu-button::after {
   display: block;
   background-color: #fff;
   position: absolute;
   height: 4px;
   width: 30px;
   transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
   border-radius: 2px;
 }
 
 .menu-button::before {
   content: '';
   margin-top: -8px;
 }
 
 .menu-button::after {
   content: '';
   margin-top: 8px;
 }
 
 #menu-toggle:checked + .menu-button-container .menu-button::before {
   margin-top: 0px;
   transform: rotate(405deg);
 }
 
 #menu-toggle:checked + .menu-button-container .menu-button {
   background: rgba(255, 255, 255, 0);
 }
 
 #menu-toggle:checked + .menu-button-container .menu-button::after {
   margin-top: 0px;
   transform: rotate(-405deg);
 }
 
 @media (max-width: 700px) {
   .menu-button-container {
     display: flex;
   }
   .menu {
     position: absolute;
     top: 0;
     margin-top: 50px;
     left: 0;
     flex-direction: column;
     width: 100%;
     justify-content: center;
     align-items: center;
   }
   #menu-toggle ~ .menu li {
     height: 0;
     margin: 0;
     padding: 0;
     border: 0;
     transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   #menu-toggle:checked ~ .menu li {
     border: 1px solid #333;
     height: 2.5em;
     padding: 0.5em;
     transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   .menu > li {
     display: flex;
     justify-content: center;
     margin: 0;
     padding: 0.5em 0;
     width: 100%;
     color: white;
     background-color: #222;
   }
   .menu > li:not(:last-child) {
     border-bottom: 1px solid #444;
   }
 }


nav ul {

 font-family: Verdana, Geneva, sans-serif;

   display:grid;

   grid-template-columns: repeat(4,1fr);

   grid-template-rows: 50px;

   justify-content:center;

   justify-items:center;

   list-style-type:none;

   margin:0;

}


.wrapper {

   display: grid;

   grid-template-rows: 150px repeat(3,auto);

   grid-template-columns: 1fr 2fr;

   grid-gap: 1em;

}



.wrapper>* {

   border: 1px solid #fff;

}

.wrapper>header {

   text-align:center;

   background-color:#737373;

   grid-column: 1/3;

   padding:10px;

}



.wrapper>header>div:first-child{

   font-size:3em;

   padding-top:20px;

   color:#46b83b;

}

.wrapper>header>div:last-child{

   font-size:1.5em;

   color:#bbb;

   font-style:italic;

}

.wrapper>nav {

   background-color: #737373;

   grid-column: 1/3;

}

.wrapper>article {

   padding:10px;

   background-color: #fff;

   font-size:1.0em;

   line-height: 1.4;

}

.wrapper>article img{

   float:left;

   border:5px solid white;

   margin:15px;

}

.wrapper>article img:after {

   content:'';

   display:table;

   clear:both;

}

.wrapper>article em{

   padding:10px;

   background-color: #ccc;
   color:red;
   font-size:1.2em;

}

.wrapper>aside {

   background-color: #737373;

   color: white;

}

.wrapper>aside img{

   float:left;

   border:5px solid white;

   margin:15px;
   

}





.wrapper>aside>div{

   margin:20px 20px;

   border-bottom: 0px solid;

   padding:10px 10px;

}

.wrapper>aside>div::first-letter{

   color: #fff;

   font-size:1.4em;

}

.wrapper>footer {

   display:grid;

   grid-template-columns: 1fr ;

   grid-column: 1/3;

   background-color: ;


   color:white;

}

.wrapper>footer>div{

   padding:10px;

   text-align:center;

}

.wrapper>footer>div:last-child {

   background-color:rgba(21, 180, 34, 1.0);

}

@media only screen and (max-width:640px){

   .wrapper {

       grid-template-rows: repeat(4,auto);

       grid-gap: 0;

   }

   .wrapper>article img{

       float:none;

       display:block;

       width:100%;

       border:0px;

       margin:0px;

   }

   .wrapper>aside, .wrapper>article {

       font-size:0.9em;

       grid-column: 1/3;

   }

   .wrapper>footer {

       display:grid;

       grid-template-columns: 1fr;

   }

}