* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
	margin: 0;

  color: #fff;
  font-family: monospace;
  letter-spacing: 5px;

	background: url(images/logo.png) no-repeat center 20px / 200px,
              url(images/stars-bg.jpg) no-repeat center center / cover;
}

header {
  padding: 20px 50px;
}

header p {
  font-size: 1.3rem;
  margin: 5px 0;
}

.hearts {
  position: relative;
}

.hearts::after {
  content: url('images/heart.png');
  position: absolute;
  left: 30px;
  top: 3px;
}

.game-area {
  width: 400px;
  height: 400px;
  margin: 0 auto;

  display: grid;
  grid: repeat(4, 1fr) / repeat(4, 1fr);
  grid-gap: 10px;
}

.card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: .3s;
}

.opened {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
  background: black;
  border: 3px solid yellow;
}

.back {
  transform: rotateY(180deg);
}

.jabba .back {
  background: url('images/jabba.png') no-repeat center center / cover, #fff;
}

.obi .back {
  background: url('images/obi.png') no-repeat center center / cover, #fff;
}

.c3po .back {
  background: url('images/c3po.png') no-repeat center center / cover, #fff;
}

.chewbacca .back {
  background: url('images/chewbacca.png') no-repeat center center / cover, #fff;
}

.leia .back {
  background: url('images/leia.png') no-repeat center center / cover, #fff;
}

.luke .back {
  background: url('images/luke.png') no-repeat center center / cover, #fff;
}

.vader .back {
  background: url('images/vader.png') no-repeat center center / cover, #fff;
}

.yoda .back {
  background: url('images/yoda.png') no-repeat center center / cover, #fff;
}

.closed {
  visibility: hidden;
  opacity: 0;
  transition: .8s;
}

@media screen and (max-width: 500px) {
  .game-area {
    width: 300px;
    height: 300px;
  }
}

.msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  font-size: 1.3rem;
  background: black;
  padding: 0 25px 25px 25px;
  border: 2px solid #fff;
}

.fadeIn {
  animation: fadeIn .4s;
}

@keyframes fadeIn {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}

.msg .level {
  color: #ffe81f;
}

.msg button {
  padding: 5px 15px;
  background: #ffe81f;
  border: none;

  color: black;
  text-transform: uppercase;
  font-weight: bold;
  font-family: monospace;
  letter-spacing: 5px;
  font-size: 1.1rem;

  cursor: pointer;
  outline: none;
}

.big-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

@media screen and (max-width: 700px) {
  body {
    background: url(images/logo.png) no-repeat 90% 30px / 150px,
                url(images/stars-bg.jpg) no-repeat center center / cover;
  }

  header {
    padding-left: 20px;
  }
}