@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  body {
      padding: 10px !important;
  }

  /*#content {
    max-width: 85%;
  }*/
}

body {
  padding: 50px;
  font-size: 16px;
  font-family: 'Anonymous Pro', 'Courier new', monospace;
}

.footer {
  border-top: 1px dashed black;
  margin-top: 20px;
  padding-top: 20px;
  text-align: right;
}

a {
  color: #00B7FF;
}

.centered {
  text-align: center; 
}

.card
{
  text-align: right;
  float: right;
  font-size: 14px;
}

.secret
{
  color: gray;
}

.character-cards::after {  
    content: "";
    clear: both;
    display: table;
}

.character-card {
  /*width: 50%;
  min-width: 322px;
  max-width: 360px;
  border: 1px solid #9e9e9e;
  border-radius: 2px;
  display:block;
  margin: 10px;
  float: left;*/

  border: 1.5px dashed black;
  padding: 20px;
  margin: 20px;
  width: 40%;
  min-width: 360px;
  display: inline-block;
  vertical-align: middle;
  color: black;

  box-shadow: 20px 20px 0 0px black;
}

.character-card::after {
  content: "";
  clear: both;
  display: table;
}

.character-card > img {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.character-card > .card-contents {
  float: left;
  padding: 5px;
  vertical-align: middle;
  display:table-cell;
}

.card-contents > div {
  margin-bottom: 10px;
}

.card-name {
  margin-top: 5px;
  font-weight: bold;
  text-decoration: underline;
}

.card-list {
  padding-left: 0px;
  list-style-type: none;
}

.card-list > li {
  margin-bottom: 5px;
}

.character-card > .character-img:hover {
  animation: shake 0.05s; 
  cursor: help;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}