body {
    margin: 0; /* Haalt standaard witruimte weg */
    background-color: #f9f9f9; 
    
    @media (min-width: 800px) {
     padding-inline-start: 5em; 

   }
    
}

/* Header */
header {
    background-color: #072d0f;
    color: rgb(46, 222, 152); 
    padding: 1rem; /* Ruimte binnen de header toevoegen */
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;    
                         
   
    /* Logo */
    .logo img {
     height: 65px;       
     width: auto;    
     align-items: center;
   }

    /* .logo {
     */
    

    h1 {
     margin: 0; 
   }



    /* Header media query */
    @media (min-width: 800px) {
        background-color: #f9f9f9;    
   }

}


form{
    display: none;
    
    @media (min-width: 800px) {
     display: grid;
     grid-template-columns: 1fr auto;
    gap: 0.5rem;
   }
    
}

main{
    padding-bottom: 70px;

    section {
     display: grid; 
     grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
     gap: 10px; 
     padding: 1rem; 
  }
   
    img {
     width: 100%; 
     aspect-ratio: 1/1; /* maakt foto vierkant */
     height: auto; 
     border-radius: 7px; 
  }
  
  @media (min-width: 800px){
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */    
  }
  
}


/* Navigatie */

nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around; /* ruimte tussen icoontjes */
  background-color: #072d0f;
  padding: 6px;

    a {
     margin: 0.5rem; 
     text-decoration: none; /* Haalt onderlijning weg */
     font-size: 1.5rem; 
   }

    @media (min-width: 800px) {
     display: grid;
     top: 0;
     bottom: 0;
     right: unset;   
     left: 0;  
   }


}