* {
  -webkit-backface-visibility:  hidden;
  -webkit-tap-highlight-color:  transparent;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
}

html, body {
  overflow:hidden;
  font-family: arial, sans-serif;
}
body {
  height: 100vh;
}

body, .board {
  margin: 0px;
  width: 100vw;
}

.board {
  position: absolute;
  overflow: hidden;
  top: 165px;
  left: 15px;
}

.cell {
  box-sizing: border-box;
  position: absolute;
  padding: 2px;
}

.splash, .level, .game {
  height: 100%;
  width: 100%;
  background-size: cover;
}

.splash {
  background-image: url('/splash.png');
}

.game {
  position: relative;
  background-image: url('/background.jpg');
}

.level {
  display: none;
}

.level-1 {
  background-image: url('/level-1.jpg');
}

.level-2 {
  background-image: url('/level-2.jpg');
}

.level-3 {
  background-image: url('/level-3.jpg');
}

.level-4 {
  background-image: url('/level-4.jpg');
}

.level-5 {
  background-image: url('/level-5.jpg');
}

.lost {
  z-index: 9999;
  background-color: transparent;
  background-image: url('/lost.jpg');
}

.next_level {
  z-index: 9999;
  background-color: transparent;
  background-image: url('/next_level.jpg');
}

.win {
  z-index: 9999;
  background-color: transparent;
  background-image: url('/win.jpg');
}

.notice {
  position: absolute;
  display: none;
  z-index: 1000;
  background-color: yellow;
}

.piece {
  position: relative;
  background-size: cover;
  height: 100%;
  width: 100%;
}

.score, .objective, .moves {
  display: none;
}

.moves {
  position: absolute;
  display: none;
  top: 85px;
  left: 245px;
  width: 110px;
  font-size: 30px;
  text-align: center;
  z-index: 1000;
}
.infinity {
  top: 70px;
  font-size: 60px;
}

.objective {
  position: absolute;
  display: none;
  top: 85px;
  left: 10px;
  width: 110px;
  font-size: 30px;
  text-align: center;
  z-index: 1000;
}

.level-1-objective {
  padding-left: 10px;
  padding-top: 3px;
}

.level-1-objective > .piece-count {
  float: left;
}

.level-1-objective > .piece {
  float: left;
  margin-top: 3px;
  margin-right: 7px;
  width: 30px;
  height: 30px;
}

.level-2-objective, .level-3-objective, .level-4-objective {
  padding-left: 10px;
  margin-top: -3px;
}

.level-5-objective .piece {
  width: 40px;
  height: 40px;
  margin-left: 35px;
}

.level-2-objective .piece-count-green, .level-2-objective .piece-count-purple, .level-3-objective .piece-count-red, .level-3-objective .piece-count-blue, .level-4-objective .piece-count-yellow, .level-4-objective .piece-count-green  {
  font-size: 20px;
  float: left;
}

.level-2-objective .piece, .level-3-objective .piece, .level-4-objective .piece {
  float: left;
  margin-top: 3px;
  margin-right: 7px;
  width: 20px;
  height: 20px;
}

.stuffed-mailbox {
  background-image: url('/stuffed-mailbox.png');
}

.mailbox {
  background-image: url('/mailbox.png');
}

.letter {
  background-image: url('/letter.png');
}

.broken {
  background-image: url('/broken.png');
}

.red {
  background-image: url('/red_heart.png');
}

.blue {
  background-image: url('/blue_heart.png');
}

.green {
  background-image: url('/green_heart.png');
}

.yellow {
  background-image: url('/yellow_heart.png');
}

.purple {
  background-image: url('/purple_heart.png');
}

.red-chocolate {
  background-image: url('/red_chocolate_heart.png');
}

.blue-chocolate {
  background-image: url('/blue_chocolate_heart.png');
}

.green-chocolate {
  background-image: url('/green_chocolate_heart.png');
}

.yellow-chocolate {
  background-image: url('/yellow_chocolate_heart.png');
}

.purple-chocolate {
  background-image: url('/purple_chocolate_heart.png');
}

.down-1, .up-1, .left-1, .right-1,
.down-2, .up-2, .left-2, .right-2,
.down-3, .up-3, .left-3, .right-3,
.down-4, .up-4, .left-4, .right-4,
.down-5, .up-5, .left-5, .right-5,
.down-6, .up-6, .left-6, .right-6,
.down-7, .up-7, .left-7, .right-7,
.down-8, .up-8, .left-8, .right-8,
.down-9, .up-9, .left-9, .right-9,
.remove, .insert, .show {
  z-index: 2;
  animation-duration: 250ms;
  animation-fill-mode: forwards;
}

.gravity, .insert {
  animation-duration: 500ms;
}

.down-1 {
  animation-name: down-1;
}

.up-1 {
  animation-name: up-1;
}

.left-1 {
  animation-name: left-1;
}

.right-1 {
  animation-name: right-1;
}

.down-2 {
  animation-name: down-2;
}

.up-2 {
  animation-name: up-2;
}

.left-2 {
  animation-name: left-2;
}

.right-2 {
  animation-name: right-2;
}

.down-3 {
  animation-name: down-3;
}

.up-3 {
  animation-name: up-3;
}

.left-3 {
  animation-name: left-3;
}

.right-3 {
  animation-name: right-3;
}

.down-4 {
  animation-name: down-4;
}

.up-4 {
  animation-name: up-4;
}

.left-4 {
  animation-name: left-4;
}

.right-4 {
  animation-name: right-4;
}

.down-5 {
  animation-name: down-5;
}

.up-5 {
  animation-name: up-5;
}

.left-5 {
  animation-name: left-5;
}

.right-5 {
  animation-name: right-5;
}

.down-6 {
  animation-name: down-6;
}

.up-6 {
  animation-name: up-6;
}

.left-6 {
  animation-name: left-6;
}

.right-6 {
  animation-name: right-6;
}

.down-7 {
  animation-name: down-7;
}

.up-7 {
  animation-name: up-7;
}

.left-7 {
  animation-name: left-7;
}

.right-7 {
  animation-name: right-7;
}

.down-8 {
  animation-name: down-8;
}

.up-8 {
  animation-name: up-8;
}

.left-8 {
  animation-name: left-8;
}

.right-8 {
  animation-name: right-8;
}

.down-9 {
  animation-name: down-9;
}

.up-9 {
  animation-name: up-9;
}

.left-9 {
  animation-name: left-9;
}

.right-9 {
  animation-name: right-9;
}

.gravity-1 {
  animation-name: gravity-1;
}

.gravity-2 {
  animation-name: gravity-2;
}

.gravity-3 {
  animation-name: gravity-3;
}

.gravity-4 {
  animation-name: gravity-4;
}

.gravity-5 {
  animation-name: gravity-5;
}

.gravity-6 {
  animation-name: gravity-6;
}

.gravity-7 {
  animation-name: gravity-7;
}

.gravity-8 {
  animation-name: gravity-8;
}

.gravity-9 {
  animation-name: gravity-9;
}

.remove {
  animation-name: remove;
}

.show {
  animation-name: show;
}

.insert {
  animation-name: insert;
}

@keyframes down-1 {
  from {
    top: -110%;
  }
  to {
    top: 0px;
  }
}

@keyframes up-1 {
  from {
    top: 110%;
  }
  to {
    top: 0px;
  }
}

@keyframes left-1 {
  from {
    left: 110%;
  }
  to {
    left: 0px;
  }
}

@keyframes right-1 {
  from {
    left: -110%;
  }
  to {
    left: 0px;
  }
}

@keyframes down-2 {
  to {
    top: 220%;
  }
}

@keyframes up-2 {
  to {
    top: -220%;
  }
}

@keyframes left-2 {
  to {
    left: -220%;
  }
}

@keyframes right-2 {
  to {
    left: 220%;
  }
}

@keyframes down-3 {
  to {
    top: 330%;
  }
}

@keyframes up-3 {
  to {
    top: -330%;
  }
}

@keyframes left-3 {
  to {
    left: -330%;
  }
}

@keyframes right-3 {
  to {
    left: 330%;
  }
}

@keyframes down-4 {
  to {
    top: 440%;
  }
}

@keyframes up-4 {
  to {
    top: -440%;
  }
}

@keyframes left-4 {
  to {
    left: -440%;
  }
}

@keyframes right-4 {
  to {
    left: 440%;
  }
}

@keyframes down-5 {
  to {
    top: 550%;
  }
}

@keyframes up-5 {
  to {
    top: -550%;
  }
}

@keyframes left-5 {
  to {
    left: -550%;
  }
}

@keyframes right-5 {
  to {
    left: 550%;
  }
}

@keyframes down-6 {
  to {
    top: 660%;
  }
}

@keyframes up-6 {
  to {
    top: -660%;
  }
}

@keyframes left-6 {
  to {
    left: -660%;
  }
}

@keyframes right-6 {
  to {
    left: 660%;
  }
}

@keyframes down-7 {
  to {
    top: 770%;
  }
}

@keyframes up-7 {
  to {
    top: -770%;
  }
}

@keyframes left-7 {
  to {
    left: -770%;
  }
}

@keyframes right-7 {
  to {
    left: 770%;
  }
}

@keyframes down-8 {
  to {
    top: 880%;
  }
}

@keyframes up-8 {
  to {
    top: -880%;
  }
}

@keyframes left-8 {
  to {
    left: -880%;
  }
}

@keyframes right-8 {
  to {
    left: 880%;
  }
}

@keyframes down-9 {
  to {
    top: 990%;
  }
}

@keyframes up-9 {
  to {
    top: -990%;
  }
}

@keyframes left-9 {
  to {
    left: -990%;
  }
}

@keyframes right-9 {
  to {
    left: 990%;
  }
}

@keyframes remove {
  to {
    width: 0px;
    height: 0px;
    margin-top: 50%;
    margin-left: 50%;
  }
}

@keyframes show {
  from {
    width: 0px;
    height: 0px;
    margin-top: 50%;
    margin-left: 50%;
  }
  from {
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-left: 0px;
  }
}

@keyframes gravity-9 {
  from {
    top: -990%
  }
  to {
    top: 0%;
  }
}
@keyframes gravity-8 {
  from {
    top: -880%
  }
  to {
    top: 0%;
  }
}
@keyframes gravity-7 {
  from {
    top: -770%
  }
  to {
    top: 0%;
  }
}
@keyframes gravity-6 {
  from {
    top: -660%
  }
  to {
    top: 0%;
  }
}
@keyframes gravity-5 {
  from {
    top: -550%
  }
  to {
    top: 0%;
  }
}
@keyframes gravity-4 {
  from {
    top: -440%
  }
  to {
    top: 0%;
  }
}
@keyframes gravity-3 {
  from {
    top: -330%
  }
  to {
    top: 0%;
  }
}
@keyframes gravity-2 {
  from {
    top: -220%
  }
  to {
    top: 0%;
  }
}

@keyframes gravity-1 {
  from {
    top: -110%
  }
  to {
    top: 0%;
  }
}

@keyframes insert {
  from {
    top: -990%
  }
  to {
    top: 0%;
  }
}