@font-face {
  font-family: 'Pixel';
  src: url('./static/fonts/slkscr.ttf');
  font-weight: normal;
  font-style: normal;
}

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: black;
}
body.dim {
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
}

#randomImage {
  pointer-events: none;
  width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background: black;
  background-size: 100%;
}

#dimOverlay {
  pointer-events: none;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));
  opacity: 0;
}
.dim #dimOverlay {
  opacity: 1;
}

body.flicker {
  -webkit-animation: flickerAnimation 1979ms steps(1, end) 1 forwards;
          animation: flickerAnimation 1979ms steps(1, end) 1 forwards;
  -webkit-filter: brightness(20%);
          filter: brightness(20%);
}
@-webkit-keyframes flickerAnimation {
  0.00% { -webkit-filter: brightness(20%); filter: brightness(20%) } 
  12.94% { -webkit-filter: brightness(100%); filter: brightness(100%) } 
  36.53% { -webkit-filter: brightness(20%); filter: brightness(20%) } 
  41.23% { -webkit-filter: brightness(100%); filter: brightness(100%) } 
  98.99% { -webkit-filter: brightness(20%); filter: brightness(20%) } 
}
@keyframes flickerAnimation {
  0.00% { -webkit-filter: brightness(20%); filter: brightness(20%) } 
  12.94% { -webkit-filter: brightness(100%); filter: brightness(100%) } 
  36.53% { -webkit-filter: brightness(20%); filter: brightness(20%) } 
  41.23% { -webkit-filter: brightness(100%); filter: brightness(100%) } 
  98.99% { -webkit-filter: brightness(20%); filter: brightness(20%) } 
}

#everything {
  box-sizing: border-box;
  padding: 2em;
  min-height: 100%;
  width: 52em;
  margin: auto;
  background: linear-gradient(#AAA, #555);
}
html {
  transition: -webkit-transform 150ms linear, -webkit-filter 300ms linear;
  transition: transform 150ms linear, filter 300ms linear;
  transition: transform 150ms linear, filter 300ms linear, -webkit-transform 150ms linear, -webkit-filter 300ms linear;
}
.shake {
  -webkit-animation: shakeAnimation 100ms ease-in-out infinite;
          animation: shakeAnimation 100ms ease-in-out infinite;
}
@-webkit-keyframes shakeAnimation {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(0.15em, -0.15em);
            transform: translate(0.15em, -0.15em);
  }
  50% {
    -webkit-transform: translate(-0.15em, -0.15em);
            transform: translate(-0.15em, -0.15em);
  }
  75% {
    -webkit-transform: translate(0.15em, -0.15em);
            transform: translate(0.15em, -0.15em);
  }
}
@keyframes shakeAnimation {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(0.15em, -0.15em);
            transform: translate(0.15em, -0.15em);
  }
  50% {
    -webkit-transform: translate(-0.15em, -0.15em);
            transform: translate(-0.15em, -0.15em);
  }
  75% {
    -webkit-transform: translate(0.15em, -0.15em);
            transform: translate(0.15em, -0.15em);
  }
}

.swing {
  -webkit-animation: swingAnimation 3s ease-in infinite forwards;
          animation: swingAnimation 3s ease-in infinite forwards;
  -webkit-transform-origin: 0.7em 0.7em;
          transform-origin: 0.7em 0.7em;
}
@-webkit-keyframes swingAnimation {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  60% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  80% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@keyframes swingAnimation {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  60% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  80% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}

#modules {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#modules > *, fancy-counter {
  background-image: 
    url('./static/bolt.png'),
    url('./static/bolt.png'),
    url('./static/bolt.png'),
    url('./static/bolt.png'),
    url('./static/metal.png');
  background-size: 1em, 1em, 1em, 1em, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: 
    top 0.3em left 0.3em,
    top 0.3em right 0.3em,
    bottom 0.3em left 0.3em,
    bottom 0.3em right 0.3em, center;
  
  padding: 1em;
}

fancy-counter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 13em;
  height: 5em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: auto;
  margin-bottom: 1em;
}

big-red-button {
  width: 10em;
  height: 10em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (max-width: 800px) {
  #everything {
    width: 28em;
  }
}