styles.css

* {
  list-style: none;
  box-sizing: content-box;
  margin: 0;
}

div, ul, p {
  padding: 0;
  margin: 0;
  display: block;
}

body {
  background-color: #3B3832;
  font-family: Ubuntu;
  color: #fff;
}

a {
  text-decoration: none;
  color: inherit;
  transition: .5s all ease-in-out;
}

a:hover {
  transition: .5s all ease-in-out;
  color: #888;
}

a, button {
  cursor: pointer;
}



body > * {
  margin: 0 auto;
}

.clear:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

header {
  margin-top: 30px;
  max-width: 1200px;
  position: relative;
}

h1 {
  color: #ffd700;
  text-align: center;
  font-size: 50px;
  font-family: 'Bangers';
  font-weight: normal;
  padding-top: 20px;
}
h2 {
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-family: 'Bangers';
  font-weight: normal;
  padding-bottom: 20px;
}

.logo {
  height: 100px;
  position: absolute;
  top: 0px;
  left: 20px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.links {
  position: absolute;
  right: 20px;
  top: 20px;
}
  .links div {
    font-size: 25px;
    height: 25px;
    line-height: 25px;
    margin-bottom: 20px;
  }
    .created-by p {
      color: #008aff;
      font-family: 'Bangers';
      font-size: 25px;
      height: 25px;
      line-height: 25px;
      text-align: right;
    }
    .created-by i {
      font-size: 12px;
      vertical-align: top;
    }
    .sites li {
      margin-right: 10px;
    }

footer {
  margin-top: 30px;
  display: block;
}

  footer p {
    text-align: center;
  }


.splash {
  width: 600px;
  height: 475px;
  margin: auto;
  text-align: center;
  padding: 100px;
}

  .splash h3 {
    font-size: 20px;
    line-height: 30px;
    color: #D2691E;
    margin-bottom: 15px;
  }

  .splash p {
    color: #fff;
    line-height: 30px;
  }

  .splash button {
    margin: 50px auto;
    width: 300px;
    height: 75px;
    font-size: 50px;
    font-family: Bangers;
    background-color: #76af0a;
    border: 5px solid #304606;
    border-radius: 5px;
    color: #252427;
    box-shadow: 2px 2px #000000;
    transition: .5s all ease-in-out;
  }
  .splash button:hover {
    transition: all .5s ease-in-out;
    transform: scale(1.03);
    background-color:
  }

.hud {
  width: 1040px;
  margin: auto;
  position: relative;
  z-index: 50;
  pointer-events: none;
  user-select: none;
  cursor: crosshair;
  cursor: crosshair;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

  .hud div {
    display: block;
    padding: 30px;

    position: absolute;
    bottom: 50px;
    text-shadow: 2px 2px #000000;
  }

  .hud ul {
    padding: 0;
  }

  .hud li {
    list-style: none;
  }

  .health {
    font-size: 20px;
    color: red;
    font-weight: bold;
    left: 0;
  }

  .events {
    color: #ffd700;
    right: 0;
  }

.dungeon {
  width: 1200px;
  height: 675px;
  background: url("./images/background.jpg");
  border: 15px ridge  #252427;;
  position: relative;
  box-sizing: content-box;
  cursor: crosshair;
  margin: 0 auto;
}


.enemy {
  color: red;
  user-select: none;
}

.entity {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 30;
}
  .hit {
    transition: all .075s ease-in-out;
    -webkit-filter: drop-shadow(0 0 10px rgba(255, 246, 143, 0.9));
    padding-bottom: 10px;
  }

  .hit-bright {
    transition: all .1s ease-in-out;
    -webkit-filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1));
  }

  .dying {
    transition: opacity 1s ease-in-out;
    opacity: 0.6;
    -webkit-filter: sepia(100%) contrast(150%) drop-shadow(0 0 5px rgba(50, 50, 50, 1));
    z-index: 10;
  }

  .dead {
    opacity: 0.6;
  }
    .dead .weapon {
      z-index: 20;
    }

.weapon {
  user-select: none;
  transform-origin: right;
  position: absolute;
  margin: -10px;
  z-index: 40;
  transition-property: all;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.weapon.attacking {
  transform: scale(1.1, 1.1);
  transition-property: all;
  transition-timing-function: ease-in-out;
}

/* entity classes */

  .hero {
    background-image: url("./images/cat-hero.png");
    height: 50px;
    width: 50px;
  }
    .hero .weapon {
      top: 6px;
      right: 40px;
    }


  .snake {
    background-image: url("./images/snake-1.png");
    height: 100px;
    width: 100px;
  }
    .snake .weapon {
      top: -19px;
      right: 85px;
    }

  .spider {
    background-image: url("./images/spider-1.png");
    height: 100px;
    width: 100px;
  }
    .spider .weapon {
      top: 14px;
      right: 72px;
    }

  .rat {
    background-image: url("./images/rat-1.png");
    height: 100px;
    width: 100px;
  }
    .rat .weapon {
      top: 30px;
      right: 78px;
    }

  .dragon {
    background-image: url("./images/dragon.png");
    height: 200px;
    width: 200px;
  }
    .dragon .weapon {
      top: 50px;
      right: 145px;
    }

  .bat {
    background-image: url("./images/bat.png");
    height: 100px;
    width: 100px;
  }
    .bat .weapon {
      top: -5px;
      right: 95px;
    }

  .grub {
    background-image: url("./images/grub.png");
    height: 100px;
    width: 100px;
  }
    .grub .weapon {
      top: 32px;
      right: 92px;
    }

  .hand {
    background-image: url("./images/hand.png");
    height: 100px;
    width: 100px;
  }
    .hand .weapon {
      top: 21px;
      right: 69px;
    }

  .skeleton {
    background-image: url("./images/skeleton.png");
    height: 200px;
    width: 200px;
  }
    .skeleton .weapon {
      top: -11px;
      right: 90px;
    }

  .t-rex {
    background-image: url("./images/t-rex.png");
    height: 200px;
    width: 200px;
  }
    .t-rex .weapon {
      top: 60px;
      right: 172px;
    }

  .john-cena {
    background-image: url("./images/john-cena.png");
    height: 200px;
    width: 200px;
  }
    .john-cena .weapon {
      top: 11px;
      right: 121px;
    }

/* weapon classes */

  .ax {
    background-image: url("./images/ax.png");
    height: 100px;
    width: 100px;

    transform: rotate(45deg);
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
  }
  .ax.attacking {
    transform: rotate(-45deg);
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
  }

  .knife {
    background-image: url("./images/knife-1.png");
    height: 50px;
    width: 50px;

    transition-duration: .1s;
    transition-timing-function: ease-in-out;
  }
    .knife.attacking {
      transform: translateX(-20px); /* stabby */
      transition-property: all;
      transition-duration: .1s;
      transition-timing-function: ease-in-out;
    }

  .lightsaber {
    background-image: url("./images/lightsaber_blue.png");
    height: 100px;
    width: 100px;

    transform: rotate(315deg);
    transition-duration: .1s;
  }
    .lightsaber.attacking {
      transform: rotate(-45deg);
      transition-property: all;
      transition-duration: .9s;
      transition-timing-function: ease-in-out;
    }

  .ak47 {
    background-image: url("./images/ak47.png");
    height: 100px;
    width: 100px;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
  }
  .ak47.attacking {
    transform: rotate(15deg) translateX(10px);
    transition-property: all;
    transition-duration: .1s;
    transition-timing-function: ease-in-out;
  }

  .baseball-bat {
    background-image: url("./images/baseball-bat.png");
    height: 100px;
    width: 100px;

    transform: rotate(30deg);
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
  }
    .baseball-bat.attacking {
      transform: rotate(-45deg) scale(1.1, 1.1);
      transition-property: all;
      transition-duration: .3s;
      transition-timing-function: ease-in-out;
    }

    .buster {
      background-image: url("./images/sword-buster.png");
      height: 100px;
      width: 100px;

      transform: rotate(45deg);
      transition-duration: 0.5s;
      transition-timing-function: ease-in-out;
    }
    .buster.attacking {
      transform: rotate(-20deg);
      transition-property: all;
      transition-duration: 0.2s;
      transition-timing-function: ease-in-out;
    }

  .crowbar {
    background-image: url("./images/crowbar.png");
    height: 100px;
    width: 100px;

    transform: rotate(45deg);
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
  }
  .crowbar.attacking {
    transform: rotate(-20deg);
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
  }

  .spear {
    background-image: url("./images/spear.png");
    height: 200px;
    width: 200px;

    transform: rotate(20deg);
    transition-duration: 0.7s;
    transition-timing-function: ease-in-out;
  }
    .spear.attacking {
      transform: rotate(0deg) translateX(-30px);
      transition-property: all;
      transition-duration: 0.3s;
      transition-timing-function: ease-in-out;
    }

  .flames {
    background-image: url("./images/flames.png");
    height: 120px;
    width: 120px;

    opacity: 0;
    transition-timing-function: ease-in-out;
  }
    .flames.attacking {
      opacity: 1;
      transform: translateX(-300px);
      transition-property: all;
      transition-duration: 1s;
      transition-timing-function: ease-in;
    }

  .hearts {
    background-image: url("./images/hearts.png");
    height: 100px;
    width: 100px;

    opacity: 0;
    transition-timing-function: ease-in-out;
  }
  .hearts.attacking {
    opacity: 1;
    transform: translateX(-100px);
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in;
  }










  @-webkit-keyframes shake {
    from, to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  @keyframes shake {
    from, to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translate3d(-3px, 0, 0);
      transform: translate3d(-3px, 0, 0);
    }

    20%, 40%, 60%, 80% {
      -webkit-transform: translate3d(3px, 0, 0);
      transform: translate3d(3px, 0, 0);
    }
  }

  .shake {
    -webkit-animation-duration: 1s;
  animation-duration: 1s;
    -webkit-animation-name: shake;
    animation-name: shake;
  }