@import url('./normalize.css');

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  background: black;
}

.img {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://media.giphy.com/media/6FbcWebhs4aQ0/giphy.gif');
  background-position: center;
}

.music {
  width: 1px;
  height: 1px;
  position: fixed;
  visibility: hidden;
  left: -9999px;
  top: -9999px;
}

#counter {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  color: white;
  font-size: 20em;
  text-align: center;
  line-height:0;
  text-shadow: 0 0 0.2em rgba(0,0,0,1);
  font-weight: bold;
}

@-webkit-keyframes rainbow {
  0% { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); -webkit-filter: hue-rotate(360deg); }
}
@-moz-keyframes rainbow {
  0% { filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); }
}
@keyframes rainbow {
  0% { filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -webkit-filter: hue-rotate(360deg); }
}
.rainbow {
  -webkit-animation: 4s linear 0s infinite rainbow;
  -moz-animation: 4s linear 0s infinite rainbow;
  -ms-animation: 4s linear 0s infinite rainbow;
  animation: 4s linear 0s infinite rainbow;
}