body {
   font-family: "Play", sans-serif;
   background: #333;
   color: #ccc;
}

.container {
   max-width: 100% !important;
}

h1 {
   font-family: "Play", sans-serif;
   font-weight: 700;
   text-align: center;
   color: #999;
}

button {
   color: white;
   background: #090;
   border-radius: 12px;
   padding: 8px 32px;
}

.info {
   text-align: center;
}

canvas {
   height: auto !important;
}

.data-wrap {
   position: relative;
   bottom: 75px;
   background: #333;
   width: 110px;
   display: block;
   margin: 0 auto;
   border-top: 1px solid #000;
   border-left: 1px solid #000;
   border-right: 1px solid #333;
   border-bottom: 1px solid #333;
   padding: 0;
   border-radius: 4px;
   font-weight: 700;
   font-size: 20px;
   font-style: normal;
   color: #fff;
   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.small .data-wrap {
   width: 45px;
   font-weight: 700;
   font-size: 10px;
   bottom: 20px;
}

@media (min-width:390px) {
   h1 {
      font-size: 33px;
   }
   canvas {
      max-width: 165px;
   }

   .large .info {
      margin-bottom: -25px;
   }

   .data-wrap {
      width: 70px;
      bottom: 46px;
      font-size: 16px;
   }

   .small .data-wrap {
      width: 40px;
      font-weight: 700;
      font-size: 8px;
      bottom: 32px;
   }

}

@media (min-width:820px) {
   canvas {
      max-width: 240px;
   }

   .large .info {
      margin-top: -30px;
      margin-bottom: 0;
   }

   .small canvas {
      max-width: 110px;
   }

   .data-wrap {
      width: 90px;
      bottom: 65px;
      font-size: 18px;
   }

   .small .data-wrap {
      width: 42px;
      font-weight: 700;
      font-size: 12px;
      bottom: 40px;
   }

}

@media (min-width:1180px) {
   canvas {
      max-width: 260px;
   }

   .large .info {
      margin-top: 0;
      margin-bottom: -25px;
   }

   .data-wrap {
      width: 100px;
      bottom: 60px;
      font-size: 18px;
   }

   .small .data-wrap {
      width: 40px;
      font-weight: 700;
      font-size: 8px;
      bottom: 32px;
   }

}

@media (min-width:1400px) {
   canvas {
      max-width: 360px;
   }

   .large .info {
      margin-bottom: -25px;
   }

   .data-wrap {
      width: 120px;
      bottom: 75px;
      font-size: 18px;
   }

}

.play-regular {
   font-family: "Play", sans-serif;
   font-weight: 400;
   font-style: normal;
}

.play-bold {
   font-family: "Play", sans-serif;
   font-weight: 700;
   font-style: normal;
}

@keyframes flash {
   0% {
      background-color: rgba(255, 0, 0, .90);
   }
   100% {
      background-color: rgba(64, 64, 64, .75);
   }
}