* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  
body {
  background-color:#000000;
  color:#888;
  font-family: "Saira Condensed", sans-serif;
}

h1{
  font-family: "Londrina Outline", sans-serif;
  font-size: 3em;
  margin-bottom: 15px;
}
h1 a{
    text-decoration: none;
}
p{
  margin-bottom: 10px;
}
  
#container {
  padding: 0px 5% 50px 5%;
}

#global{
    padding: 45px 5% 0 0;
    text-align: right;
}
#imageMetadata{
  margin-left: 45px;
}

#copyright{
  text-align: center;
}
#copyright img{
  width: 70px;
}
a{
  color:#888;
  text-decoration: none;
}  
.heading-text {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.heading-text span {
  font-weight: 100;
}

ul {
  list-style: none;
}

/* Picture grid for navigation and metadata */

#photo { grid-area: photo; }
#download { grid-area: download; }
#photoTitle { grid-area: photoTitle; }
#metadata1 { grid-area: metadata1; }
#metadata2 { grid-area: metadata2; }
#metadata3 { grid-area: metadata3; }
#navigationLeft { grid-area: leftArrow; }
#navigationRight { grid-area: rightArrow; }

#grid {
  margin: 0 auto;
  width: 90%;
  display: grid;
  grid-template-areas:
    'photo photo photo photo photo photo photo photo photo'
    'leftArrow download download download download download download download rightArrow'
    'photoTitle photoTitle photoTitle photoTitle photoTitle photoTitle photoTitle photoTitle photoTitle'
    'metadata1 metadata1 metadata1 metadata2 metadata2 metadata2 metadata3 metadata3 metadata3';
  gap: 10px;
  padding: 10px;
}
#navigationLeft * img, #navigationRight * img{
  width: 15px;
}
#navigationAndMetadata > div {
  padding: 20px 0;
}
#navigationRight {
  text-align: right;
}
#download {
  text-align: center;
}
#photo img{
  border-radius: 5px;
  width: 100%;
}

  
/* ======================================
Responsive Image gallery Style rules
======================================*/
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.image-gallery > li {
  flex: 1 1 auto; /* or flex: auto; */
  height: 300px;
  cursor: pointer;
  position: relative;
}
.image-gallery::after {
  content: "";
  flex-grow: 999;
}
.image-gallery li img {
  border-radius: 5px;
  height: 100%;
  object-fit: cover;
  width: 100%;
  vertical-align: middle;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(57, 57, 57, 0.502);
  top: 0;
  left: 0;
  transform: scale(0);
  transition: all 0.2s 0.1s ease-in-out;
  color: #fff;
  border-radius: 5px;
  /* center overlay content */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* hover */
.image-gallery li:hover .overlay {
  transform: scale(1);
}