/* Cards */
.cards {
  color: #fff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 6%;
  margin: 75px 10%;
  margin-bottom: 0;
  animation: fadein 1.5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cards div {
  background-position: center;
  background-size: cover;
}

.cards .boxContent {
  position: relative;
  padding: 30% 7% 45% 7%;
  text-align: center;
  color: #fff;
  z-index: 2;
  /* opacity: 0; */ /* new */
  /* animation: disappear 0.3s ease-in 0s normal 1 forwards running; */ /* new */
}

.cards .dark {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width:100%;
  height:100%;
  opacity: .2;
  /* animation: lighten 0.3s ease-in 0s normal 1 forwards running; */ /* new */
  opacity: 0.74 /* new */
}

/* darken and lighten animations */
 .cards > div:hover .dark {
  animation: lighten 0.3s ease-in 0s normal 1 forwards running;
}

@keyframes darken {
  0% {
    opacity: .2;
  }
  100% {
    opacity: 0.74;
  }
}

@keyframes lighten {
  0% {
    opacity: 0.74;
  }
  100% {
    opacity: .4;
  }
}

/* .cards > div:hover .boxContent, .cards > div:hover .viewAll {
  animation: lighten 0.3s ease-in 0s normal 1 forwards running;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes disappear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
} */

#conceptArt, #illustration, #miscellaneous {
  box-shadow: 0 0 40px #000;
  border: 1px #333 solid;
  position: relative;
  word-wrap: break-word;
  hyphens: auto;
  height: 100%;
}

#conceptArt{
  background-image: url(../img/concept_preview.png);
}

#illustration {
  background-image: url(../img/illustration_preview.PNG)
}

#miscellaneous {
  background-image: url(../img/miscellaneous_preview.png)
}

.portfolioHead {
  font-family: Playfair, Geomanist, Helvetica;
  font-size: 2.5vw;
  font-weight: normal;
}

.portfolioDes {
  font-size: 1vw;
  font-weight: normal;
}

.viewAll { /* actually, should i just put this inside the text area? :( */
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 22%;
  z-index: 2;
  /* opacity: 0; */ /* new */
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  /* text-decoration: underline; */
  text-shadow: 0 0 8px #000;
  font-size: 16px;
  letter-spacing: .7px;

  animation: disappear 0.3s ease-in 0s normal 1 forwards running;
}

.viewAll:hover {
  color: #219eff;
}

/* Media queries */
@media(min-width: 1525px){ /* prevent cards from becoming too big */
  .cards{
    max-width: 1206px;
    margin: 75px auto;
    height: 484px;
  }

  .cards .boxContent {
    padding-top: 75px;
  }

  .portfolioHead {
    font-size: 38px;
  }

  #conceptArt, #illustration, #miscellaneous {
    height: 485px;
  }
}

@media(max-width: 1425px){
  .portfolioDes {
    font-size: 14px;
  }
}

@media(max-width: 800px){ /* ipad */
  .cards {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 30px;
    margin-bottom: 150px;
  }

  #conceptArt {
    grid-column-start: 1;
    grid-column-end: 3;
    height: auto;
    min-height: 300px;
  }

  #conceptArt .boxContent {
    padding: 10% 7% 15% 7%;
  }

  #conceptArt .portfolioHead {
    font-size: 5vw;
  }

  #conceptArt .portfolioDes {
    font-size: 2.3vw;
  }

  #illustration .portfolioHead, #miscellaneous .portfolioHead {
    font-size: 20px;
  }

}

@media(max-width: 630px){ /* prevent big concept art pane description from getting too small */
  #conceptArt .portfolioDes {
    font-size: 14px;
  }
}

@media(max-width: 575px){
  .cards {
    margin-top: 30px;
  }
}

@media(max-width: 456px){ /* miscellaneous box is a special box */
  #miscellaneous .viewAll {
    bottom: 30px;
  }
}

@media(max-width: 450px){
  #conceptArt .portfolioDes {
    font-size: 13.5px;
  }
}

@media(max-width: 414px){ /* largest phone size */

  #conceptArt .portfolioHead {
    font-size: 20px;
  }

  #illustration, #miscellaneous {
    grid-column-start : 1;
    grid-column-end: 3;
  }

  #miscellaneous .viewAll {
    bottom: 22%;
  }

  #conceptArt .boxContent { /* padding back to normal */
    padding: 30% 7% 45% 7%;
  }
}

/* 320-360 px are the widths of the smallest phones, so tailor to those as well */
@media(max-width: 360px){ /* just wanna make cards less tall here */
  .cards .boxContent {
    padding-top: 10%;
    padding-bottom: 30%;
  }

  #conceptArt .boxContent { /* because we defined #conceptArt .boxContent in a prior mediaquery and so we need to be equally as specific to override it */
    padding-top: 10%;
    padding-bottom: 30%;
  }

  #conceptArt, #illustration, #miscellaneous {
    min-height: auto;
  }
}

@media(max-width: 280px){
  .viewAll {
    bottom: 12%;
  }
}