body {
	
  /*font-family: Work Sans;
  font-size: 16px;
  line-heigh: 1.5;
  color: #fff; */
  
  background-color: #000;
  
  padding-top: 104px;
  /*this bumps the top image down on teh page so that the header appears to be sitting in its own space. otherwise it would be on top of the first image*/
}


a {
  color: #fff;
  text-decoration: none;
  
}

header {
  /*overflow hidden not needed when using flexbox*/
  /* overflow:  hidden; */
  position: fixed;
  /*whenever you add fixed positioning to something, the element becomes only as wide as its content*/
  top: 0;
  left: 0;

  width:  100%;
    /*by adding a width of 100% it tells it to take up all the available width on the screen. without this, the nav was bunched up to the left right next to the logo*/
   padding: 20px;
  
  /*below items use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  display: flex;
  justify-content: space-between;
  align-items: top;
  z-index: 1;
  
}

/*version 1: using floats (not flexbox)
header h1 {
  float:  left;
  /*sometimes when you have images inside of tags and you float them you end up having issues.. so the below explicitly sets the width and holds it open when you set the width, the image will take up the available space (end comment)

  width: 64px;
}

note: neither float nor margin top are needed with flexbox 

header nav {
  float: right;
  margin-top:  20px;
} */

/*version 2 using flexbox*/
header h1 {
  width: 50vw;
  font-size: 20px;
  color: green;
}

header nav a {
  margin-left: 10px;

  
}

.selected {
  border-bottom: solid 2px #fff;
  padding-bottom: 3px;
}

.photos {
  /* commented out removed when shifted over to flexbox: */
  /* text-align: center; */
  
  /* mix-blend-mode: exclusion; */

  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  /* align-items: flex-end; */
  justify-content: center; /*this centers things on the page*/
}


.background {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  /* background-image: url("images/southland_poster2.png");  */
  opacity: .3;
  z-index: 0;
}

.photo {
  /* float: left; 
  not using float left because of the way it arranges things less reliably. going to us display: inline-block instead. 
  */
  width: 400px;
  margin: 30px;
  /*removed when shifted over to flexbox */
  /* 
  display: inline-block; 
  vertical-align: bottom; 
  */
  
/* by using position : relative on parent photo element our overlay will be positioned in relation to it   */
  position: relative;
  
  /* filter: overlay; */
}

/* by using absolute position we can position things in relation to the page OR other elements... element with a position of absolute keeps looking up the tree to find a parent element. If a parent element lists it's position as 'relative' then the thing that is position: absolute, will latch onto that. so here the absolute position of .overlay becomes relative to .photo (kind of confusing)  if it doesn't find anything, it will finally latch itself to the body element*/



/* .overlay {
  position:  absolute;
  top:  0;
  left: 0;
  
  width: 100%;
  height: 100%;
  background-color: #000;
  
} */

.small {
  width:  25vw;
}

.large {
  width: 40vw;
}



.overlay h2 {
  margin: 0 0 0 20%;
  color: #fff;
  opacity: 1;
}

.overlay h3 {
  margin: 0 0 10px 35%;
  color: #fff;
  opacity: 1;
  
}

.photo figcaption {
  margin: 10px 0 0 20%;
  color: #fff;
  opacity: 1;
}

footer {
  
  
  position: fixed;
  /*whenever you add fixed positioning to something, the element becomes only as wide as its content*/
  bottom: 0;
  left: 0;
  
  width:  100%;
    /*by adding a width of 100% it tells it to take up all the available width on the screen. without this, the nav was bunched up to the left right next to the logo*/
   padding: 20px;
  
  /*below items use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  
}