/* Custom styles*/
 * {
  padding: 0;
  background-color: #0e1111;
  color: #ffffff;
  text-decoration: none;
  font-family: Tahoma, Calibri, Helvetica, Arial, Verdana, Courier, 
  Times New Roman,"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", 
  "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, 
  "Courier New", Courier, monospace;
  text-transform: lowercase;
}
  
/* Body styles */
body{
  display: grid;
  grid-template-rows:  auto auto 1fr auto;
  grid-template-areas: 
  "nav"
  "header"
  "main"
  "footer";
}
  
/* Nav styles */
nav {
  grid-area: nav;
  width:100vw;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  font-size: 1.2rem;
  font-weight: bold;
}
  
nav ul {
  display: flex;
  gap: .5em;
  font-size: 1em;
  list-style: none;
}

.logo {
  height: 10vh;
}
  
header {
  grid-area: header;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 8vh;
}

main {
  grid-area: main;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  list-style: none;
  min-height: 70vh;
  width: auto;
}

main h1, h2 {
  text-align: center;
}

/* Space out photos - bottom */
main li {
  margin-block-end: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Position h2/image, add one border around group of items */
main li > *  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: .5em solid white;
  padding: 1em;
}

/* Remove spacing between h2 and images */
h2 {
  margin: 0;
}

img {
  width: 100%;
  height: auto;
}

footer {
  width:100vw;
  height: 10vh;
  grid-area: footer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .2em;
}

/* remove borders from photos on individual collection pages*/
.photo-page > * {
  width:100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: none;
}

a,nav, footer, h1, h2, h3, h4, h5, h6 {
  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif, Tahoma, 
  Helvetica, Verdana, Times New Roman, Courier,"Lucida Console", "Lucida Sans Typewriter", 
  "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, 
  "Courier New", Courier, monospace;
}



/*Create clarity regarding links*/
a:focus h2 {
  background-color: #ffffff;
  color:#0e1111;
}

a:hover h2 {
  background-color: #ffffff;
  color:#0e1111;
}

.hoverstyle a:focus {
  background-color: #ffffff;
  color:#0e1111;
}

.focusstyle a:hover {
  background-color: #ffffff;
  color:#0e1111;
}


/*Media Queries*/
@media print {
  /* print styles go here */
  body {
    background-color: #FFF;
    color: black;
  }
}

/*Layout change for small screen devices
@media (max-width:350px){

  /*Shift content under nav
  body{
    display: grid;
    width:100vw;
    height: auto;
    margin-block-start: 12vh;
    grid-template-rows:  auto auto 1fr auto;
    grid-template-areas: 
    "nav"
    "header"
    "main"
    "footer";
  }

  /*Create more room for wrapped header text
header {
    grid-area: header;
    margin-block-start: 4vh;
    margin-block-end: 4vh;
    width: 100vw;
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  h1 {
    text-align: center;
  }
  
  nav {
    grid-area: nav;
    width:100vw;
    height: 10vh;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    font-size: 1.2rem;
    font-weight: bold;
  }
    
}*/