body {
     padding-top: 50px;
      background-color: lightblue;
    
}

img {
	width: 100%;
}

li {
	list-style-type: none;
}

/* NAV */


#nav {
  
   width: 60%;
    margin: auto;
    
    left: 0;
    right: 0;
    
    justify-content: center;
    padding: 0;
    background-color: darkslategrey;
    overflow: hidden;
    position: fixed;
    top: 0;
	display: flex;
    
}

#nav li {
    display: inline;
	padding-right: 1em;
}


#nav a {
    
 display: inline-block;
    color: white;
    font-size: 20px;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    transition: background-color 0.3s;
    
}


#nav a:hover {
    background-color: lightsalmon; 
    
}

#nav a.current {
    background-color: #04AA6D; 
}



/* Gallery */



#gallery {
    
    width: 60%;
    margin: auto;
	display: flex;
    flex-wrap: wrap;
     justify-content: center;
    align-items: flex-start; 
      gap: 20px;
    padding: 20px;
    border: #04AA6D solid 3px;
    border-radius: 10px ;
    
    
    
}

#gallery li {
    
    border-radius: 10px; 
    overflow: hidden; 
    
    transition: transform 0.3s ease; 
}


#gallery li:hover {
    transform: scale(1.03);
}


#gallery img {
 border: darkslategrey solid 3px; 
    box-sizing: border-box;
    border-radius: 10px ;
}