@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fredoka One'), local('FredokaOne-Regular'), url(https://fonts.gstatic.com/s/fredokaone/v7/k3kUo8kEI-tA1RRcTZGmTmHB.ttf) format('truetype');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo18E.ttf) format('truetype');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o18E.ttf) format('truetype');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o18E.ttf) format('truetype');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkCEv18E.ttf) format('truetype');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv18E.ttf) format('truetype');
}
/* colors https://coolors.co/460c3d-de3c4b-c42847-cb9cf2-ffd046 */
html, body {
    height: 100%;
}
body {
  margin: 0;
  background: linear-gradient(-45deg, #460C3D, #C42847);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* originally #49a09d, #5f2c82 */
  font-family: 'Quicksand', sans-serif;
  color: white;
}
/* header, main, and footer */
header,
footer {
  padding: 15px 50px 15px;
}
h1 {
  font-size: 3em;
}
h1,
h2 {
  font-family: 'Fredoka One', cursive;
  letter-spacing: 3px;
}
nav {
  /* position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: rgba(255,255,255,0.2); */
}
nav ul,
nav li {
  display: block;
  float: right;
}
main {
  padding: 0 50px 0;
}
footer {
  text-align: center;
}
footer a,
footer a:visited,
footer a:active {
  color: white;
}
details[open] summary ~ * {
  -webkit-animation: sweep 1s ease-in-out;
          animation: sweep 1s ease-in-out;
}
@-webkit-keyframes sweep {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sweep {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Grid */
* {
  box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .column {
    width: 100%;
  }
}
/* buttons and ui */
.btn {
  background: none;
  border: 2px solid;
  border-color: white;
  border-radius: 5px;
  color: white;
  /* border-bottom-width: 4px; */
  font: inherit;
  font-weight: bold;
  letter-spacing: inherit;
  margin: 10px;
  padding: 10px 10px;
  text-transform: inherit;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  box-shadow: -2px -2px white;
}
.btn:hover {
  background-color: white;
  color: #460C3D;
  box-shadow: -4px -4px #CB9CF2;
}
/* end of buttons */
table.intro,
table.intro:hover,
table.intro tr,
table.intro tr:hover,
table.intro td,
table.intro td:hover {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 0;
  -moz-box-shadow: 0 0 0 0;
  -webkit-box-shadow: 0 0 0 0;
  padding: 0px;
}
table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 5px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  box-shadow: -3px -3px rgba(255, 255, 255, 0.1);
}
table:hover {
  box-shadow: -6px -6px rgba(255, 255, 255, 0.3);
}
th,
td {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
th {
  text-align: right;
}
thead th {
  background-color: #C42847;
  font-size: 24pt;
  text-align: center;
}
thead th.red:hover {
  color: #FFD046;
}
thead th.black:hover {
  color: #FFD046;
}
thead th.corner {
  background: repeating-linear-gradient(-45deg, #CB9CF2, #CB9CF2 10px, #DE3C4B 10px, #DE3C4B 20px);
}
tbody.data th {
  background-color: #460C3D;
}
tbody.data th:hover {
  color: #FFD046;
}
tbody.data tr:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
tbody.data td {
  position: relative;
}
tbody.data td:hover:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9999px;
  bottom: -9999px;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
}
/* the playing cards - adapted and simplified greatly (removed complex inner displays and so forth) from http://selfthinker.github.io/CSS-Playing-Cards/ */
/* all cards */
.playingCards .card {
  display: inline-block;
  width: 5.7em;
  /* originally 3.3 */
  height: 8em;
  /* originally 4.6 */
  border: 1px solid #666;
  border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  -khtml-border-radius: 0.3em;
  padding: 0.25em;
  margin: 0 0.5em 0.5em 0;
  text-align: center;
  font-size: 1.2em;
  /* @change: adjust this value to make bigger or smaller cards */
  font-weight: normal;
  font-family: Arial, sans-serif;
  position: relative;
  background-color: white;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  /* standard blur shadow */
  /* -moz-box-shadow: .2em .2em .5em #333;
   -webkit-box-shadow: .2em .2em .5em #333;
   box-shadow: .2em .2em .5em #333; */
}
.playingCards a.card {
  text-decoration: none;
}
.playingCards label.card {
  cursor: pointer;
}
.face:hover {
  box-shadow: -2px -2px #FFD046;
}
/* deck stack effect kind of? */
.deck {
  box-shadow: -2px -2px #FFD046, -4px -4px #CB9CF2, -6px -6px #DE3C4B;
}
.deck:hover {
  box-shadow: -3px -3px #FFD046, -6px -6px #CB9CF2, -9px -9px #DE3C4B;
}
/* our card button disguised as a "back of the card" design :) */
.cardback {
  float: left;
  color: white;
  /* the text */
  /* bg pattern w image */
  background: repeating-linear-gradient(-45deg, #cb9cf2, #cb9cf2 10px, #de3c4b 10px, #de3c4b 20px);
}
/* data URI backgrounds: https://codepen.io/tutorialsetc/pen/IEuFq */
/* suit colours
********************************************************************/
.playingCards .card.diams {
  color: #C42847 !important;
  /* raspberry diamonds */
}
.playingCards .card.hearts {
  color: #C42847 !important;
  /* raspberry hearts */
}
.playingCards .card.spades {
  color: #460C3D !important;
  /* eggplant spades */
}
.playingCards .card.clubs {
  color: #460C3D !important;
  /* eggplant clubs */
}
/* inner bits
********************************************************************/
/* top left main info (rank and suit) */
.playingCards .card .rank,
.playingCards .card .suit {
  display: block;
  line-height: 1;
  text-align: left;
}
.playingCards .card .suit {
  line-height: 0.7;
}
/* inner suits */
.playingCards .card .suit:after {
  display: block;
  margin-top: -0.8em;
  text-align: center;
  white-space: pre;
  line-height: 1;
  font-size: 1.3em;
  word-spacing: -0.05em;
}
/* make the hearts and clubs symbols fit, because they are a bit bigger than the others */
.playingCards .card.hearts .suit:after {
  word-spacing: -0.15em;
}
.playingCards .card.hearts.rank-10 .suit:after {
  word-spacing: -0.05em;
  letter-spacing: -0.1em;
}
.playingCards .card.clubs.rank-10 .suit:after {
  word-spacing: -0.15em;
}
/* 8, 9, 10 are the most crowded */
.playingCards .card.rank-8 .suit:after,
.playingCards .card.rank-9 .suit:after {
  letter-spacing: -0.075em;
}
.playingCards .card.rank-10 .suit:after {
  letter-spacing: -0.1em;
}
.playingCards .card.clubs .suit:after {
  letter-spacing: -0.125em;
}
.playingCards.simpleCards .card.rank-j,
.playingCards.simpleCards .card.rank-q,
.playingCards.simpleCards .card.rank-k {
  background-image: none !important;
}
/*____________ symbols in the middle (faces as dingbat symbols) ____________*/
.playingCards.simpleCards .card .suit:after,
.playingCards .card.rank-j .suit:after,
.playingCards .card.rank-q .suit:after,
.playingCards .card.rank-k .suit:after,
.playingCards .card.rank-a .suit:after,
.playingCards .card.joker .rank:after {
  font-family: sans-serif;
  position: absolute;
  font-size: 3em;
  right: 0.1em;
  bottom: 0.25em;
  word-spacing: normal;
  letter-spacing: normal;
  line-height: 1;
}
/* big suits in middle */
.playingCards.simpleCards .card .suit:after,
.playingCards .card.rank-a .suit:after {
  font-family: sans-serif;
  line-height: 0.5;
  bottom: 0.35em;
}
.playingCards.simpleCards .card.diams .suit:after,
.playingCards .card.rank-a.diams .suit:after {
  content: "\2666";
  right: 0.7em;
  /* big suit alignment */
}
.playingCards.simpleCards .card.hearts .suit:after,
.playingCards .card.rank-a.hearts .suit:after {
  content: "\2665";
  right: 0.65em;
}
.playingCards.simpleCards .card.spades .suit:after,
.playingCards .card.rank-a.spades .suit:after {
  content: "\2660";
  right: 0.65em;
}
.playingCards.simpleCards .card.clubs .suit:after,
.playingCards .card.rank-a.clubs .suit:after {
  content: "\2663";
  right: 0.6em;
}
/*____________ smaller cards for use inside text ____________*/
.playingCards.inText .card {
  font-size: 0.4em;
  vertical-align: middle;
}
.playingCards.inText .card span.rank,
.playingCards.inText .card span.suit {
  text-align: center;
}
.playingCards.inText .card span.rank {
  font-size: 2em;
  margin-top: 0.2em;
}
.playingCards.inText .card span.suit {
  font-size: 2.5em;
}
.playingCards.inText .card .suit:after,
.playingCards.inText .card.joker .rank:after {
  content: "" !important;
}
.playingCards.inText .card .rank:after {
  left: 0.5em;
  padding: 0 0.1em;
}