body
{
  background       : #e1e1e1;
  margin           : 0px;
  font-family      : 'Arial';
}

.card 
{
  max-width        : 300px;
  border-radius    : 20px;
  background       : #e0e0e0;
  box-shadow	   : 0px 7px 20px rgba(43, 8, 37, 0.2);
  padding	   : 20px;
  margin	   : 20px;
}

.gamecard
{
  background       : #fff;
  border-radius    : 7px 7px 0px 0px;
  border           : 1px solid black;
  width            : 36px;
  height           : 22px;
  margin           : 2px;
  padding          : 3px;
  display          : inline-block;
  text-transform   : uppercase;
  text-align       : center;
  vertical-align   : middle;
  font-size        : 1.2em;
  box-shadow	   : 0px 7px 20px rgba(43, 8, 37, 0.2);
}

.red
{
  color            : #ce2b2c;
}

.orange
{
  color            : #ef8b2b;
}

.green
{
  color            : #008537;
}

.black
{
  color            : #000;
}

.club:before
{
  content          : '\2663';  
}

.spade:before
{
  content          : '\2660';
}

.heart:before
{
  content          : '\2665';
}

.diamond:before
{
  content          : '\2666';
}

.seven:after
{
  content          : '7';
}

.eight:after
{
  content          : '8';
}

.nine:after
{
  content          : '9';
}

.ten:after
{
  content          : '10';
}

.jack:after
{
  content          : 'B';
}

.queen:after
{
  content          : 'D';
}

.king:after
{
  content          : 'K';
}

.ace:after
{
  content          : 'A';
}

.questionmark:after
{
  content          : '?';
}

.title,
.question,
.answer
{
  color            : rgb(0, 0, 0);
  font-style	   : italic;
  padding          : 0px;
  text-transform   : uppercase;
  font-size        : 0.9em;
  margin	   : 3px 0px;
}

.question
{
  font-weight      : bold;
}

.dateContainer 
{
  width            : 100%;
  background-color : rgb(0, 30, 60);
  box-shadow       : inset 0px 0px 2em rgba(0, 0, 0, 0.3);
}

#date
{
  text-align       : center;
  color            : rgb(180,180,180);
  font-size        : x-large;
  font-weight      : bold;
  padding          : 20px;
}

.instruction
{
  text-align       : justify;
  color            : black;
  padding          : 0px;
}

.hint
{
  color            : rgb(0, 30, 60);
  padding          : 0px;
}

.solution
{
  color            : rgb(0, 30, 60);
  padding          : 0px;
  text-transform   : uppercase;
  letter-spacing   : 0.4px;
  text-align       : center;
  transform        : rotate(180deg); 
}

.image
{
  box-sizing       : border-box;
  border           : rgb(0,30, 60) solid 2px;
  min-width        : 100%;
  width            : 100%;
  max-height       : 100%;
}

.spacer
{
  height           : 10px;
  width            : 100%;
}

.footer
{
  text-align       : center;
  font-family      : inherit;
  font-size        : 10px;
  text-transform   : uppercase;
  letter-spacing   : 0.4px;
  color            : rgb(0, 30, 60);
  padding          : 0px;
}

.text
{
  text-align       : justify;
  padding          : 0px;
}

a
{
  color            : rgb(0, 30, 60);
  cursor           : pointer;
  text-decoration  : none;
}

a:hover
{
  color            : rgb(0, 30, 60);
  text-decoration  : underline;
}

.caption
{
  color            : rgb(0, 30, 60);
  text-transform   : uppercase;
  letter-spacing   : 0.4px;
  padding-bottom   : 10px;
}

.externalLink
{
}

.externalLink:before
{
  background       : rgb(0, 30, 60);
  content          : 'www';
  color            : #e1e1e1;
  font-size        : 0.4em;
  text-transform   : uppercase;
  letter-spacing   : 0.1px;
  border-radius    : 3px;
  margin-right     : 0.75em;
  padding          : 0.3em;
  vertical-align   : middle;
}

.psalm
{
  color             : rgb(0, 30, 60);
  font-size         : 1.4em;
  font-style        : italic;
}

.links
{
  text-align        : center;
}

.poem
{
  font-family       : 'Arial Narrow';
  font-size         : 1.0em;
  font-style        : italic;
  line-height       : 2.0em;
}

.signature
{
  font-weight       : bold;
  font-size         : 0.75em;
  text-transform    : uppercase;
  margin-top        : 0.75em;
}

.center
{
  text-align        : center;
}