html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif; }

header {
  background: #333;
  box-shadow: inset 0px -2px 3px black, 0px 2px 3px #333;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em; }

section {
  padding: 2.5em; }

h1 {
  margin-top: 0em;
  color: darkorange;
  padding-left: 10vw;
  max-width: 100vw; }

.container {
  width: 100%; }

.article {
  display: block;
  width: 20em;
  color: #333;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid white;
  border-radius: 5px;
  padding: 1em;
  box-shadow: 0 0 5px #999, inset 0 0 5px #bbb, 0 0 20px #999, inset 0 0 20px #ccc, 0 0 20px 2px #ccc, inset 0 0 20px 2px #ddd, 0 0 40px 4px #ccc; }

.card-container {
  perspective: 1000px;
  width: 10em;
  height: 20em;
  display: inline-block;
  margin: 2em; }
  .card-container:hover .card, .card-container .hover .card {
    transform: rotateY(180deg); }

.card {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%; }

.card-front {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: rotateY(0deg);
  background: wheat;
  border: 1px solid orange;
  border-radius: 1em; }

.card-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  background: #333;
  color: yellow;
  border-radius: 1em;
  border: 1px solid orange; }

ul li {
  transition: all 0.25s linear;
  text-shadow: none;
  list-style: none;
  background: darkorange;
  color: #333;
  display: inline-block;
  padding: 0.35em;
  border-radius: 0.25em;
  cursor: pointer;
  box-shadow: inset -2px -2px 4px #995400, inset 2px 2px 4px #ffba66, 1px 2px 3px #333; }
  ul li:hover {
    color: white;
    text-shadow: 0px 0px 3px wheat, 0px 0px 6px orange;
    box-shadow: inset -2px -2px 4px #cc7000, inset 2px 2px 4px #ffd199, 2px 4px 5px rgba(102, 102, 102, 0.6); }

@media print {
  @page {
    margin: 0.75in; }
  header {
    box-shadow: none;
    border: none; }
  h1 {
    background: black;
    color: white; }
  ul li {
    display: block;
    page-break-after: always; }
  .container {
    page-break-before: always; } }
