body {
  background-color: rgb(95,95,95);
  background-image: linear-gradient(rgb(95,95,95), rgb(60,60,60));
}

.allProjects {
  height: 100vh;
  min-height: 450px;
  width: 100vw;
  display: flex;
  align-content: stretch;
  flex-direction: column;

  /* For chrome mix-blend issues */
  background-image: linear-gradient(rgb(95,95,95), rgb(60,60,60));
}

.work {
  border-bottom: 4px solid rgb(255, 251, 246);
  position: relative;
  flex-grow: 1;
  transition: .6s;
  transition-timing-function: ease-out;

  overflow: hidden;
}

.work > .textWrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.work h2 {
  white-space: nowrap;
  text-align: center;
  color: rgb(255, 251, 246);
}

@media screen and (max-width: 500px) {
  .work h2 {
    font-size: 28px;
  }
}

@media screen and (min-width: 501px) {
  .work h2 {
    font-size: 36px;
  }
}

a:hover, a:active {
  background-color: orange;
  flex-grow: 5;
}

/*Images*/
.imageWrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .6s;
  transition-timing-function: ease-out;
  opacity: 0;
}

.work img {
   position: absolute;
   max-height: 85%;
   max-width: 100%;
   opacity: 0;

   transition: .6s;
   transition-timing-function: ease-out;
}

.work:hover img, .work:active img, .work:hover .imageWrapper, .work:active .imageWrapper{
 opacity: 1;
}

#scorekeeper > .imageWrapper > img {
  mix-blend-mode: multiply;
}

#ledger > .imageWrapper > img {
  mix-blend-mode: hard-light;
}

#scorekeeper > .imageWrapper {
  background-image: url(workImages/ScorekeeperTile.jpg);
  mix-blend-mode: multiply;
}

#cool > .imageWrapper {
  background-image: url(workImages/CoolTile.png);
  mix-blend-mode: multiply;
  background-size: 800px auto;
  background-repeat: repeat-x;
}

#aliens > .imageWrapper {
  background-image: url(workImages/AlienTile.jpg);
  mix-blend-mode: multiply;
  background-size: auto 350px;
}

#other > .imageWrapper {
  background-image: url(workImages/OtherTile.png);
  mix-blend-mode: multiply;
  background-repeat: repeat-x;
  background-size: auto 90%;
  background-position: bottom;
}

#ledger > .imageWrapper {
  background-image: url(workImages/LedgerTile.png);
  mix-blend-mode: multiply;
  background-size: auto 800px;
}

#code > .imageWrapper {
  background-image: url(workImages/WebsiteTile.png);
  mix-blend-mode: multiply;
  background-position: center;
  background-size: cover;

}

#home > .imageWrapper {
  background-image: url(workImages/HomeTile.jpg);
  mix-blend-mode: multiply;
  background-size: cover;
}