//
// Experimenting with background-blend and mix-blend modes
// Note: browser support is spotty and chrome requires experimental flag.
// chrome://flags/#enable-experimental-web-platform-features
// http://caniuse.com/#feat=css-backgroundblendmode
// http://caniuse.com/#feat=css-mixblendmode
//

ul {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #eee;
  
  > li {
    position: relative;
    width: 50vw;
    height: 50vh;
    text-align: center;
    background-image: url(http://cdn.jsdm.com/2/detroit_skyline.jpg);
    background-position: center;
    background-size: cover;
    
    &:after {
      content: "Detroit by Jon DeBoer • jondeboer.com";
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      color: #fff;
      font-size: 0.8rem;
      font-weight: 400;
      mix-blend-mode: soft-light;
    }
    
    a {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      margin: auto;
      color: #fff;
      font-size: 8vw;
      font-weight: 700;
      text-decoration: none;
      text-transform: uppercase;
    }
    
    &:nth-child(1) {
      background-color: #bada55;
      background-blend-mode: luminosity;
      a { mix-blend-mode: overlay; }
    }
    
    &:nth-child(2) {
      background-color: #f02311;
      background-blend-mode: color-burn;
      a { mix-blend-mode: color-dodge; }
    }
    
    &:nth-child(3) {
      background-color: #2a8fbd;
      background-blend-mode: hard-light;
      a { mix-blend-mode: soft-light; }
    }
    
    &:nth-child(4) {
      background-color: white;
      background-blend-mode: difference;
      a { mix-blend-mode: exclusion; }
    }
    
  }
  
}

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-family: Montserrat, sans-serif;
}