#cover.front {
  height: 75vh;
  background-image: url('background-ff4fe.jpg');
  background-size: cover;
  background-position: left;
  background-attachment: scroll;
}

#cover-title {
  background-image: url('background-ff4fe-blur.jpg');
  background-position: bottom;
}

#cover-title div.tint {
  background-color: rgba(30, 30, 70, 0.8);
}

#art-credit {
  text-align: center;
  font-style: italic;
}

/* ---------------------------------- */
/* Action buttons                     */
/* ---------------------------------- */

#actions {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: auto auto auto;
}

#actions a {
  text-decoration: none;
}

.action {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;

  min-height:20rem;

  background-color: rgba(0, 0, 0, 0.2);
  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;

  transition: 0.2s;
}

.action:hover {
  transition: 0.2s;
}

.action .name {
  padding: 0.3em;

  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  text-align: center;

  background-color: rgb(90, 90, 180);
  color: rgb(240, 240, 250);
}

.action .desc {
  padding: 0.5em;

  text-align: center;

  background-color: rgb(10, 10, 10);
  color: rgb(180, 180, 254);
}

#action-play {
  background-image: url('action-play-off.jpg');
}

#action-play:hover {
  background-image: url('action-play.jpg');
}

#action-resources {
  background-image: url('action-resources-off.jpg');
}

#action-resources:hover {
  background-image: url('action-resources.jpg');
}

#action-discord {
  background-image: url('action-discord-off.jpg');
}

#action-discord:hover {
  background-image: url('action-discord.jpg');
}


/* turn action buttons into vertical layout at low screen widths */
@media only screen and (max-width: 40rem) {
  #actions {
    grid-template-columns: auto;
  }
}

/* Footer */
#footer a {
    text-decoration: underline;
    color: rgb(120, 120, 200);
}