body {
  margin: 0;
  font-family: "Roboto", sans-serif; }

header {
  color: white; }
  header small {
    display: block;
    font-size: 0.8rem; }
  header svg {
    position: absolute;
    top: 8px;
    right: 8px;
    color: white; }

h1,
h2 {
  margin: 0;
  padding: 0.5rem; }

.game {
  display: block;
  margin: auto;
  width: 95%;
  max-width: 635px; }

.boardgame {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  padding: 5px; }

.highscores {
  overflow-y: scroll;
  height: 3.3rem; }
  .highscores-container {
    font-family: monospace; }

.card {
  cursor: pointer;
  width: 14vw;
  max-width: 100px;
  height: 14vw;
  max-height: 100px;
  position: relative;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }
  .card.face-up {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    cursor: not-allowed; }

.face {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }
  .face--front {
    font-size: 3rem;
    text-align: center;
    line-height: 2;
    color: white; }
  .face--back {
    background-image: url(cards.png);
    background-size: 100%;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg); }

[data-number="0"] {
  background-position: 0 0%; }

[data-number="1"] {
  background-position: 0 5.88235%; }

[data-number="2"] {
  background-position: 0 11.76471%; }

[data-number="3"] {
  background-position: 0 17.64706%; }

[data-number="4"] {
  background-position: 0 23.52941%; }

[data-number="5"] {
  background-position: 0 29.41176%; }

[data-number="6"] {
  background-position: 0 35.29412%; }

[data-number="7"] {
  background-position: 0 41.17647%; }

[data-number="8"] {
  background-position: 0 47.05882%; }

[data-number="9"] {
  background-position: 0 52.94118%; }

[data-number="10"] {
  background-position: 0 58.82353%; }

[data-number="11"] {
  background-position: 0 64.70588%; }

[data-number="12"] {
  background-position: 0 70.58824%; }

[data-number="13"] {
  background-position: 0 76.47059%; }

[data-number="14"] {
  background-position: 0 82.35294%; }

[data-number="15"] {
  background-position: 0 88.23529%; }

[data-number="16"] {
  background-position: 0 94.11765%; }

[data-number="17"] {
  background-position: 0 100%; }

:root {
  --remaining: 100; }

.progress {
  background-color: #c7c7c7;
  height: 3rem;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  line-height: 3rem; }
  .progress::after {
    counter-reset: variable var(--remaining);
    content: counter(variable);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center; }
  .progress-bar {
    background-size: 23em 0.25em;
    height: 100%;
    position: relative;
    -webkit-transition: width 1s;
    transition: width 1s;
    width: calc((var(--remaining) / var(--allocated)) * 100%); }

.credits {
  text-align: center;
  font-size: small; }

header, .face--front, .progress-bar {
  background: #bc4e9c;
  background: -webkit-gradient(linear, left top, right top, from(#f80759), to(#bc4e9c));
  background: linear-gradient(to right, #f80759, #bc4e9c);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFNBQVM7RUFDVCxpQ0FBaUMsRUFBRTs7QUFFckM7RUFDRSxZQUFZLEVBQUU7RUFDZDtJQUNFLGNBQWM7SUFDZCxpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGtCQUFrQjtJQUNsQixRQUFRO0lBQ1IsVUFBVTtJQUNWLFlBQVksRUFBRTs7QUFFbEI7O0VBRUUsU0FBUztFQUNULGVBQWUsRUFBRTs7QUFFbkI7RUFDRSxjQUFjO0VBQ2QsWUFBWTtFQUNaLFVBQVU7RUFDVixnQkFBZ0IsRUFBRTs7QUFFcEI7RUFDRSxhQUFhO0VBQ2IscUNBQXFDO0VBQ3JDLGtDQUFrQztFQUNsQyxvQkFBb0I7RUFDcEIsaUJBQWlCO0VBQ2pCLFlBQVksRUFBRTs7QUFFaEI7RUFDRSxrQkFBa0I7RUFDbEIsY0FBYyxFQUFFO0VBQ2hCO0lBQ0Usc0JBQXNCLEVBQUU7O0FBRTVCO0VBQ0UsZUFBZTtFQUNmLFdBQVc7RUFDWCxnQkFBZ0I7RUFDaEIsWUFBWTtFQUNaLGlCQUFpQjtFQUNqQixrQkFBa0I7RUFDbEIsMENBQTBCO0VBQTFCLGtDQUEwQjtFQUExQiwwQkFBMEI7RUFBMUIsa0RBQTBCO0VBQzFCLG9DQUE0QjtVQUE1Qiw0QkFBNEIsRUFBRTtFQUM5QjtJQUNFLGtDQUEwQjtZQUExQiwwQkFBMEI7SUFDMUIsbUJBQW1CLEVBQUU7O0FBRXpCO0VBQ0Usa0JBQWtCO0VBQ2xCLFlBQVk7RUFDWixXQUFXO0VBQ1gsbUNBQTJCO1VBQTNCLDJCQUEyQjtFQUMzQix3Q0FBd0MsRUFBRTtFQUMxQztJQUNFLGVBQWU7SUFDZixrQkFBa0I7SUFDbEIsY0FBYztJQUNkLFlBQVksRUFBRTtFQUNoQjtJQUNFLGdDQUFnQztJQUNoQyxxQkFBcUI7SUFDckIsa0NBQTBCO1lBQTFCLDBCQUEwQixFQUFFOztBQUVoQztFQUNFLHlCQUF5QixFQUFFOztBQUU3QjtFQUNFLCtCQUErQixFQUFFOztBQUVuQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLGdDQUFnQyxFQUFFOztBQUVwQztFQUNFLDJCQUEyQixFQUFFOztBQUUvQjtFQUNFLGdCQUFnQixFQUFFOztBQUVwQjtFQUNFLHlCQUF5QjtFQUN6QixZQUFZO0VBQ1osa0JBQWtCO0VBQ2xCLFdBQVc7RUFDWCxrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLGlCQUFpQixFQUFFO0VBQ25CO0lBQ0Usd0NBQXdDO0lBQ3hDLDBCQUEwQjtJQUMxQixrQkFBa0I7SUFDbEIsTUFBTTtJQUNOLE9BQU87SUFDUCxXQUFXO0lBQ1gsa0JBQWtCLEVBQUU7RUFDdEI7SUFDRSw0QkFBNEI7SUFDNUIsWUFBWTtJQUNaLGtCQUFrQjtJQUNsQiw0QkFBb0I7SUFBcEIsb0JBQW9CO0lBQ3BCLHlEQUF5RCxFQUFFOztBQUUvRDtFQUNFLGtCQUFrQjtFQUNsQixnQkFBZ0IsRUFBRTs7QUFFcEI7RUFDRSxtQkFBbUI7RUFDbkIscUZBQXVEO0VBQXZELHVEQUF1RDtFQUN2RCxxRUFBcUUsRUFBRSIsImZpbGUiOiJzdHlsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJib2R5IHtcbiAgbWFyZ2luOiAwO1xuICBmb250LWZhbWlseTogXCJSb2JvdG9cIiwgc2Fucy1zZXJpZjsgfVxuXG5oZWFkZXIge1xuICBjb2xvcjogd2hpdGU7IH1cbiAgaGVhZGVyIHNtYWxsIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBmb250LXNpemU6IDAuOHJlbTsgfVxuICBoZWFkZXIgc3ZnIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiA4cHg7XG4gICAgcmlnaHQ6IDhweDtcbiAgICBjb2xvcjogd2hpdGU7IH1cblxuaDEsXG5oMiB7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMC41cmVtOyB9XG5cbi5nYW1lIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbjogYXV0bztcbiAgd2lkdGg6IDk1JTtcbiAgbWF4LXdpZHRoOiA2MzVweDsgfVxuXG4uYm9hcmRnYW1lIHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoNiwgMWZyKTtcbiAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoNiwgMWZyKTtcbiAgZ3JpZC1jb2x1bW4tZ2FwOiA1cHg7XG4gIGdyaWQtcm93LWdhcDogNXB4O1xuICBwYWRkaW5nOiA1cHg7IH1cblxuLmhpZ2hzY29yZXMge1xuICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gIGhlaWdodDogMy4zcmVtOyB9XG4gIC5oaWdoc2NvcmVzLWNvbnRhaW5lciB7XG4gICAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZTsgfVxuXG4uY2FyZCB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgd2lkdGg6IDE0dnc7XG4gIG1heC13aWR0aDogMTAwcHg7XG4gIGhlaWdodDogMTR2dztcbiAgbWF4LWhlaWdodDogMTAwcHg7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuNXM7XG4gIHRyYW5zZm9ybS1zdHlsZTogcHJlc2VydmUtM2Q7IH1cbiAgLmNhcmQuZmFjZS11cCB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGVZKDE4MGRlZyk7XG4gICAgY3Vyc29yOiBub3QtYWxsb3dlZDsgfVxuXG4uZmFjZSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuO1xuICBib3gtc2hhZG93OiAwIDNweCAzcHggcmdiYSgwLCAwLCAwLCAwLjIpOyB9XG4gIC5mYWNlLS1mcm9udCB7XG4gICAgZm9udC1zaXplOiAzcmVtO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBsaW5lLWhlaWdodDogMjtcbiAgICBjb2xvcjogd2hpdGU7IH1cbiAgLmZhY2UtLWJhY2sge1xuICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybChjYXJkcy5wbmcpO1xuICAgIGJhY2tncm91bmQtc2l6ZTogMTAwJTtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZVkoMTgwZGVnKTsgfVxuXG5bZGF0YS1udW1iZXI9XCIwXCJdIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCAwJTsgfVxuXG5bZGF0YS1udW1iZXI9XCIxXCJdIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCA1Ljg4MjM1JTsgfVxuXG5bZGF0YS1udW1iZXI9XCIyXCJdIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCAxMS43NjQ3MSU7IH1cblxuW2RhdGEtbnVtYmVyPVwiM1wiXSB7XG4gIGJhY2tncm91bmQtcG9zaXRpb246IDAgMTcuNjQ3MDYlOyB9XG5cbltkYXRhLW51bWJlcj1cIjRcIl0ge1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAwIDIzLjUyOTQxJTsgfVxuXG5bZGF0YS1udW1iZXI9XCI1XCJdIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCAyOS40MTE3NiU7IH1cblxuW2RhdGEtbnVtYmVyPVwiNlwiXSB7XG4gIGJhY2tncm91bmQtcG9zaXRpb246IDAgMzUuMjk0MTIlOyB9XG5cbltkYXRhLW51bWJlcj1cIjdcIl0ge1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAwIDQxLjE3NjQ3JTsgfVxuXG5bZGF0YS1udW1iZXI9XCI4XCJdIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCA0Ny4wNTg4MiU7IH1cblxuW2RhdGEtbnVtYmVyPVwiOVwiXSB7XG4gIGJhY2tncm91bmQtcG9zaXRpb246IDAgNTIuOTQxMTglOyB9XG5cbltkYXRhLW51bWJlcj1cIjEwXCJdIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCA1OC44MjM1MyU7IH1cblxuW2RhdGEtbnVtYmVyPVwiMTFcIl0ge1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAwIDY0LjcwNTg4JTsgfVxuXG5bZGF0YS1udW1iZXI9XCIxMlwiXSB7XG4gIGJhY2tncm91bmQtcG9zaXRpb246IDAgNzAuNTg4MjQlOyB9XG5cbltkYXRhLW51bWJlcj1cIjEzXCJdIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCA3Ni40NzA1OSU7IH1cblxuW2RhdGEtbnVtYmVyPVwiMTRcIl0ge1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAwIDgyLjM1Mjk0JTsgfVxuXG5bZGF0YS1udW1iZXI9XCIxNVwiXSB7XG4gIGJhY2tncm91bmQtcG9zaXRpb246IDAgODguMjM1MjklOyB9XG5cbltkYXRhLW51bWJlcj1cIjE2XCJdIHtcbiAgYmFja2dyb3VuZC1wb3NpdGlvbjogMCA5NC4xMTc2NSU7IH1cblxuW2RhdGEtbnVtYmVyPVwiMTdcIl0ge1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAwIDEwMCU7IH1cblxuOnJvb3Qge1xuICAtLXJlbWFpbmluZzogMTAwOyB9XG5cbi5wcm9ncmVzcyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICNjN2M3Yzc7XG4gIGhlaWdodDogM3JlbTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTAwJTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBmb250LXNpemU6IDJyZW07XG4gIGxpbmUtaGVpZ2h0OiAzcmVtOyB9XG4gIC5wcm9ncmVzczo6YWZ0ZXIge1xuICAgIGNvdW50ZXItcmVzZXQ6IHZhcmlhYmxlIHZhcigtLXJlbWFpbmluZyk7XG4gICAgY29udGVudDogY291bnRlcih2YXJpYWJsZSk7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjsgfVxuICAucHJvZ3Jlc3MtYmFyIHtcbiAgICBiYWNrZ3JvdW5kLXNpemU6IDIzZW0gMC4yNWVtO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgdHJhbnNpdGlvbjogd2lkdGggMXM7XG4gICAgd2lkdGg6IGNhbGMoKHZhcigtLXJlbWFpbmluZykgLyB2YXIoLS1hbGxvY2F0ZWQpKSAqIDEwMCUpOyB9XG5cbi5jcmVkaXRzIHtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBmb250LXNpemU6IHNtYWxsOyB9XG5cbmhlYWRlciwgLmZhY2UtLWZyb250LCAucHJvZ3Jlc3MtYmFyIHtcbiAgYmFja2dyb3VuZDogI2JjNGU5YztcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCAjZjgwNzU5LCAjYmM0ZTljKTtcbiAgLyogVzNDLCBJRSAxMCsvIEVkZ2UsIEZpcmVmb3ggMTYrLCBDaHJvbWUgMjYrLCBPcGVyYSAxMissIFNhZmFyaSA3KyAqLyB9XG4iXX0= */