body {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    overflow: hidden;
  }

html, body { 
    width:100%; height:100%; 
}

.zdog-canvas {
    display: block;
    width:100%; height:100%;
  }

.title {
  position: absolute;
  pointer-events: none;
  text-align: center;
  -webkit-text-stroke-width: 2px;
  font-weight: 800;
  top: 50%;
  left: 50%;
}

.top {
  font-size: 70px;
  color: #223e32;
  -webkit-text-stroke-color: #ffffff;
  transform: translate(-125%,-190%) skewY(-10deg) ;
  text-shadow: -2px -5px #223e32;
}

.bottom {
  font-size: 90px;
  color: #A7C06D;
  -webkit-text-stroke-color: #000000;
  transform: skewY(10deg) translate(-40%,-65%);
  text-shadow: 2px -5px #A7C06D;
}

.start {
  font-size: 30px; width: 250px;
  color: #ffffff;
  -webkit-text-stroke-width: 0px;
  text-shadow: 3px -3px #000000;
  transform: translate(-50%,300%);
  animation: gamestart-start 1s ease-in-out infinite alternate;
}

.notification {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 16px;
  padding: 5px; padding-top: 10px; padding-bottom: 10px;
  color: white;
  pointer-events: none;
}

.notification::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  transform: skewY(3deg);
  border: white solid 2px;
  pointer-events: none;
}

.int {
  color: white;
  position: absolute;
  pointer-events: none;
  text-align: center;
  font-weight: 800;
  top: 0%;
  left: 50%;
  visibility: hidden;
}

.remaining {
  font-size: 30px;
  transform: translate(-50%,-50%);
  width: 250px;
}

.jackpot {
  font-size: 20px;
  transform: translate(0%,100%) rotate(-10deg);
  width: 200px;
  color: black;
  background-color: white;
  mix-blend-mode: screen; /* This makes the cutout text possible */
}

.score {
  font-size: 20px;
  transform: translate(-110%,50%);
  width: 80px;
  border: 2px dotted white;
}

.levelselect, .colorselect {
  color: black;
  position: absolute;
  pointer-events: none;
  text-align: center;
  font-weight: 800;
  top: 50%;
  left: 50%;
  visibility: hidden;
  font-size: 20px;
  background-color: #ffffffaa;
  width: 180px;
  padding: 5px;
}

.levelselect {
  transform: translate(-50%,-140%);
  height: 50px;
}

.colorselect {
  transform: translate(-50%,0%);
  height: 150px;
}

/*Animations*/

@keyframes gamestart-top {
  from {
    transform: translate(-125%,-190%) skewY(-10deg) scale(1,1);
    opacity: 1
  }
  to {
    transform: translate(-125%,-190%) skewY(-10deg) scale(-1.5,1.5) rotate(20deg);
    opacity: 0
  }
}

@keyframes gamestart-bottom {
  from {
    transform: skewY(10deg) translate(-40%,-65%) scale(1,1);
    opacity: 1
  }
  to {
    transform: skewY(10deg) translate(-40%,-65%) scale(1.5,-1.5) rotate(-20deg);
    opacity: 0
  }
}

@keyframes gamestart-start {
  from {
    transform: translate(-50%,250%);
  }
  to {
    transform: translate(-50%,200%);
  }
}

@keyframes jackpot-gain-1 {
  from {
    transform: translate(0%,80%) rotate(-10deg);
  }
  to {
    transform: translate(0%,100%) rotate(-10deg);
  }
}

@keyframes jackpot-gain-2 {
  from {
    transform: translate(0%,80%) rotate(-10deg);
  }
  to {
    transform: translate(0%,100%) rotate(-10deg);
  }
}

@keyframes jackpot-claim-1 {
  0% {
    transform: translate(0%,100%) rotate(-10deg);
  }
  50% {
    transform: translate(0%,100%) rotate(-190deg);
  }
  100% {
    transform: translate(0%,100%) rotate(-370deg);
  }
}

@keyframes jackpot-claim-2 {
  0% {
    transform: translate(0%,100%) rotate(-10deg);
  }
  50% {
    transform: translate(0%,100%) rotate(-190deg);
  }
  100% {
    transform: translate(0%,100%) rotate(-370deg);
  }
}

/* Smartphone-specific*/

@media only screen and (max-width: 600px) {
  .top {
    font-size: 50px;
  }

  .bottom {
    font-size: 60px;
  }

  .start {
    font-size: 20px;
  }

  .notification {
    font-size: 12px;
  }
}

@media only screen and (max-width: 359px) {
  .top {
    font-size: 30px;
  }

  .bottom {
    font-size: 40px;
  }

  .start {
    font-size: 15px;
  }

  .notification {
    font-size: 10px;
  }
}