body {
     background-image: url('images/backgrounds/pattern4.jpg');
  background-size: cover;
  
  color: green;
  font-family: Times New Roman;
  }
  
  .header {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background: black;     
         border-left: dotted;
          border-right: dotted;
          border-top: dotted;
          
        }
       
       .header img {
         height: auto;
         max-width:50%;
       }
        




        .nav {
       width: 100%;
       height: auto;
        display: flex;
        float: left;
        background: black;
        position: relative;
        overflow: hidden;
        box-sizing:border-box;
        border-style: dotted ;
        border-color: green;
        
         
    }
    
    .nav img {
       width: 80%;
       display: inline-block;
      
        
         
    }
    
        
    
    
     P {
    margin:3%;
  }
     
     
        .middle {
        width: 100%;
        background: black;        
        box-sizing:border-box;
        border-style: dotted ;
        border-color: green;
        
        }
    
    

  /* Grid layout */
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 95%;
    margin: auto;
  }

  /* Square thumbnails */
  .thumbnail {
    width: 100%;
    border: 1px solid blue; /* Gray border */
    aspect-ratio: 1 / 1;       /* forces square */
    object-fit: cover;         /* crops image nicely */
    cursor: pointer;
    transition: 0.3s;
  }

  .thumbnail:hover {
    opacity: 0.8;
  }

  /* Overlay */
  .overlay {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
  }

  .overlay img {
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
  }

  .close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 40px;
    cursor: pointer;
  }
  
  
  
  