* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-family: 'Domine', serif; }

.wrap {
  position: relative; }

.game {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 500px;
  perspective: 500px;
  width: 860px;
  max-width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

@-webkit-keyframes matchAnim {
  0% {
    background: #bcffcc; }
  100% {
    background: white; } }

@keyframes matchAnim {
  0% {
    background: #bcffcc; }
  100% {
    background: white; } }

.card {
  width: 100px;
  height: 100px;
  text-align: center;
  display: block;
  -webkit-perspective: 500px;
  perspective: 500px;
  position: relative;
  cursor: pointer;
  z-index: 50;
  margin: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  @media (max-width: 800px) {
    .card {
      width: 10vw;
      height: 10vw; } }
  .card .inside {
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    background-image: url("img/back.jpg");
    background-size: cover; }
    .card .inside.picked, .card .inside.matched {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg); }
    .card .inside.matched {
      -webkit-animation: 1s matchAnim ease-in-out;
      animation: 1s matchAnim ease-in-out;
      -webkit-animation-delay: .4s;
      animation-delay: .4s; }
  .card .front, .card .back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .card .front img, .card .back img {
      max-width: 100%;
      display: block;
      margin: 0 auto;
      max-height: 100%; }
  .card .front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg); }
  .card .back {
    -webkit-transform: rotateX(0);
    transform: rotateX(0); }

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.modal {
  display: none;
  text-align: center;
  position: relative;
  width: 500px;
  max-width: 90%;
  margin: 0 auto;
  background: white;
  -webkit-box-shadow: 0px 0px 23px -14px rgba(0, 0, 0, 0.664);
  box-shadow: 0px 0px 23px -14px rgba(0, 0, 0, 0.664);
  margin-top: 50px;
  padding: 30px 10px;
  border-radius: 50px; }
  .modal .winner {
    font-size: 50px;
    text-align: center;
    font-family: 'Domine', serif;
    color: #3f2313; }
  .modal .restart {
    font-family: 'Domine', serif;
    margin: 30px auto;
    padding: 20px 30px;
    display: block;
    font-size: 25px;
    border: none;
    background: #be404b;
    border-radius: 50px;
    color: white;
    cursor: pointer; }
    .modal .restart:hover {
      background: #3f2313; }
  .modal .message {
    text-align: center; }
    .modal .message a {
      text-decoration: none;
      color: #28afe6;
      font-weight: bold; }
      .modal .message a:hover {
        color: #56c0eb;
        border-bottom: 1px dotted #56c0eb; }

.snek {
  width: 100px;
  height: auto;
  margin: 0 auto; }