html {
  background-color: black;
}

/* Layout */
body {
  display: flex;
	margin: 0 auto; max-width: 1620px;
  background-color: antiquewhite;
}
main {
  position:relative;
	height:100vh; width: 100%;
  overflow-y: scroll;
}
main article {
  margin: 3vh auto; padding: 0; max-width: 90%;
}
.main-filter {
  display: none;
}
/* Typography */
html {
  font-family: sans-serif;
}
a,a:visited,a:link,a:focus {
  text-decoration: none;
  color: purple;
  transition: color 0.5s;
}
a:hover {
  color: darkorchid;
  transition: color 0.5s;
  text-decoration: underline;
}
article {
  display: flex;
  flex-flow: column;

  h2 {
    background-color: black;
    color: white;
    box-shadow: 0 10px 10px grey;
    padding: 0.2em 0.6em;
  }

  .cards {
    display: flex; flex-flow: row wrap;

    &#adventure {
      justify-content: space-evenly;

      a {
        width: 30%;
        max-width: 30%;
      }

    }

    &#journal {
      justify-content: left;

      a {
        width: 20vw; max-width: 20vw; min-width: 200px;
      }

    }

    a,a:visited,a:link,a:focus {
      text-decoration: none;
      color: black;
      transition: color 0.5s;
    }
    a:hover {
      color: #222;
      transition: color 0.5s;
    }
  }

  .card {
    border: 2px solid black; border-radius: 10px;
    padding: 0 2em; margin: 1vh 2vw;
    transition: 
      background-color 0.3s ease-out,
      box-shadow 0.5s ease-in;

    &#adventure {
      background-color: grey;

      &:hover {
        background-color: lightgrey;
        box-shadow: 10px 5px 5px black;
        transition: 
          background-color 0.3s ease-in,
          box-shadow 0.5s ease-out;

      }
    }

    &#journal {
      background-color: darkgoldenrod;

      &:hover {
        background-color: goldenrod;
        box-shadow: 10px 5px 5px black;
        transition: 
          background-color 0.3s ease-in,
          box-shadow 0.5s ease-out;

      }
    }

    figure {
      width: 100%; max-width: 100%;
      margin: 0 auto;
    }

    figcaption {
      font-size: 1.5rem;
    }

    h1 {
      text-align: center;
    }

    h2 {
      text-align: center;
      background-color: unset;
    }

    img {
      max-width: 75%;
      margin: 0 auto;
    }
  }
}

/* Responsive */
@media only screen and (max-width: 900px) {
  body {
    overflow-y: hidden;
  }

  article {
    .cards {
      justify-content: space-around;
    }
}