@media screen and (max-width:1000px){
body { 
    background-color: rgb(90, 178, 40);
      width : 96vw;
}

 .mobile-container {
   max-width: 98vw;
   margin: auto;
   background-color: #555;
   height: 100vm;
   color: white;
 }

 .topnav {
   overflow: hidden;
   background-color: #333;
   position: relative;
 }

 .topnav a {
   color: white;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
   display: block;
 }

 .topnav a.icon {
   background: black;
   display: block;
   position: absolute;
   right: 0;
   top: 0;
 } 

 .topnav a:hover {
   background-color: #ddd;
   color: black;
 } 

 .active {
   background-color: #04AA6D;
   color: white;
 }
.flexwrap{
   display : flex ;
   flex-wrap:wrap ;
   flex-direction: row;
 }

 .fotobox{
   flex: 100px;
   width:100vw;
   height:220px;
 }

 #floatright {
 width:95vw;
 padding : 10px;
}

}




@media screen and (min-width:1000px){
 body{
  background-color: rgb(237, 219, 58);
    width : 98vw;
    }
    
  .topnav {
    background-color: #333;
    overflow: hidden;
  }

  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding:14px 17px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

 .flexwrap{
   display : flex ;
   flex-wrap:wrap ;
   flex-direction: row;
 }

 .fotobox{
   flex: 200px;
   width:20vw;
   height:15vw;
 }

 #floatright {
  float : right;
 width:60vw;
 }
}

.padding{
  padding: 1vw;
}