@import url("styles-template.css");


body {
    background-color: #000;
}

.intro { 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
    text-align: start; 
    font-family: Arial;
    color: #fff;
    border-top: 1px solid var(--color-gray-light);

    a, a:visited {
        color: white;
    }
    div {
      display: flex;
      
      
      margin-bottom: 2rem;
      padding-top: 2.5rem;

      span {
        display: flex;
        align-items: center;
        height: 2rem;
        padding-right: 2rem;
        padding-left: 2rem;
        
        border-right: 1px solid white;
        
      }
    }
    
    p {
        margin-top: 1rem;
    }
  }

  #title { 
    font-size: 16px;
    padding-left: 0;
    
  }
  #menu {
    border-right: 1px solid white;
  }
  #menu p { 
    font-size: 12spt;
  }
  
  .main-content {
    display: grid;
    justify-items: center;
  }
  #image-thumbs { 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    max-width: 85rem;
    margin: 3rem 0 5rem 0;
    gap: 2.5rem;    
  }
  .grid-wrapper {
    max-width: 85rem;
    margin: 0 auto;
  }
  
  #current-image { 
    width: 100%;
  } 


  .thumb { 
    width: 10rem; 
    height: 10rem; 
    object-fit: cover; 
    cursor: pointer;
  }