/*
 - using shorthand to create 3 columns. Easier to change this now.
*/

body { font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    font-weight: 400;
    color: white ;
    background-color: #414a4c;
    text-align:left;
    line-height: 2;

    padding: 10px 10px 10px 10px; /*
    - top, right, bottom,left
   */
    margin: px;
    width: 99%;
    height: 100%;
    
}



/* Typography */

h1 {
    font-family: Verdana, Arial, sans-serif;
    color: cyan;
    font-size: 20px;
    line-height: 1.25;
    font-weight: normal;
    
  }
  
  h2 {
    font-family: Verdana, Arial, sans-serif;
    color: rgb(155, 168, 168);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 0px 10px 0px 3px;
   
    
  }
  
  h3 {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 10px;
  }
  
  h4 {
    font-family: Verdana, Arial, sans-serif;
    color: cyan;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
  }
  h5 {
      font-family: Arial, sans-serif;
      color: white;
      font-size: 10px;
      font-weight: 400;
      margin-bottom: 10px;
    }
  h6 {
    font-family: Verdana, Arial, sans-serif;
    color: rgb(110, 195, 195);
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 10px;
    padding: 0px 15px 0px 3px;
   
    
  }
  p {
    margin-bottom: 15px;
    
  }
  
  a:link {
    color: rgb(217, 208, 208);  
    background-color: transparent;
    text-decoration: none;
    
  }
  a:visited {
    color: white;  
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:hover {
    color: rgb(242, 232, 93);
    background-color: transparent;
    text-decoration: none;
  }
  
  a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: none;
  }
  
  hr {
    width: 70px;
    height: 0px;
    background-color: white;
    border: none;
    margin: 20px 0;
  }
  
  
  /* Project Structure */
  
  .project {
    min-width: 40px; /* changed fr 50 */
    width: 90%;
    max-width: 820px;  /* Para width */
    padding: 0 5px;
    margin: 0;
  }
  
  .project__nav {
    color: #FFF380;
    font-size: 14px;
    font-weight: 400;
    margin: 50px 0;
  }
  
 

.picture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    justify-items: center;
    grid-gap 5px;
    grid-row-gap: 0px;
   
}


/*
 - zoom from stack overflow https://stackoverflow.com/questions/39858998/zoom-in-and-out-on-mouse-click-with-css
*/

.grid-box input[type=checkbox] {
    display: none
  }
  
  .grid-box img {
    width: 98%;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    margin-right: 0px;
    transition: transform 0.25s ease;
    cursor: zoom-in
  }
  
  .grid-box input[type=checkbox]:checked~img {
    transform: scale(2.5);
    cursor: zoom-out
  }