body {
  background-color: grey;
  font-family: 'MK 1', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

h1 {
  font-size: 65px;
  color: yellow;
  text-shadow: 4px 4px darkred;
  margin: 20px auto;
}

h3 {
  margin-top: -30px;
  color: red;
  text-shadow: 2px 2px black;
}

h4 {
  margin-top: 5px;
  color: #4aff3d;
  text-shadow: 2px 2px black;
}

h1, h3, h4 {
  text-align: center;
  text-transform: uppercase;
}

h3, h4 {
  font-size: 24px;
}

ul {
  font-size: 30px;
  margin-top: 70px;
  text-shadow: 3px 3px black;
}

li {
  margin: 10px;
  color: red;
}

li:hover {
  animation: blink 0.1s steps(1) infinite alternate;
  cursor: pointer;
}

button {
  position: relative;
  background-color: #515151;
  font-family: 'MK 1', sans-serif;
  font-size: 30px;
  border-radius: 0px;
  color: white;
  border: 3px solid black;
  box-shadow: 4px 4px 10px #515151;
  top: 580px;
  padding: 10px;
  margin: 0 10px;
  cursor: pointer;
}

span {
  color: red;
  font-size: 24px;
}

.bar {
  width: 36px;
  height: 0px;
  background-color: yellow;
  max-height: 246px;
  margin: 2px;
  /*margin: -80px 20px;*/
}

.outer-bar {
  width: 40px;
  height: 250px;
  max-height: 250px;
  margin: -80px 10px;
}

.to-gain-bar, .excess-bar {
  border: 2px solid white;
}

.to-gain-bar {
  width: 40px;
  height: 200px;
  margin: 2px 2px 0 2px;
  border-bottom: 0px;
}

.excess-bar {
  width: 40px;
  height: 46px;
  margin: 0 2px 2px 2px;
  border-top: 2px solid red;
}

.hero-box {
  /*border: 1px solid pink;*/
  margin: -30px 0px;
  width: 200px;
}

.sprite {
  width: 170px;
  height: 220px;
  /*background-color: blue;*/
  margin: 0 auto;
}

.material {
  width: 200px;
  height: 100px;
  /*background-color: green;*/
  background: url(../images/1whole.png) no-repeat top center;
  background-size: 80%;
  margin: 0 auto;
}

.onebreathe {
  animation: breatheOne 0.4s steps(1) infinite alternate;
}

.twobreathe {
  animation: breatheTwo 0.48s steps(1) infinite alternate;
}

.onechop {
  animation: chopOne 0.6s steps(1);
  animation-fill-mode: forwards;
}

.twochop {
  animation: chopTwo 0.6s steps(1);
  animation-fill-mode: forwards;
}

#onewin {
  animation: winOne 0.6s steps(1);
  animation-fill-mode: forwards;
}

#twowin {
  animation: winTwo 0.6s steps(1);
  animation-fill-mode: forwards;
}

.h1-blink {
  animation: blink 0.1s steps(1) infinite alternate;
}

.button-container {
  text-align: center;
}

#outer-player-1{
  float: left;
}

#outer-player-2{
  float: right;
}

#hero-player-1 {
  float: left;
  background: url(../images/1win2.gif) no-repeat top center;
  background-size: 100%;
}

#hero-player-2 {
  float: right;
  background: url(../images/2win2.gif) no-repeat top center;
  background-size: 100%;
}

#main-text-field {
}

#instruction-h3 {
  padding: 30px;
  font-size: 38px;
}

#inst-float-left {
  float: left;
  margin: 12px 20px 0px 80px;
}

#inst-float-right {
  float: right;
  margin: 12px 80px 0px 20px;
}

.instruction-p {
  padding: 0 50px 20px 50px;
  text-align: left;
  line-height: 120%;
}

.inst-label {
  margin-bottom: 15px;
}

#game-field {
  height: 448px;
  width: 640px;
  border: 5px solid red;
  background-color: black;
  margin: 100px auto;
  box-shadow: 10px 10px 20px black;
  background-image: url('../images/arena.jpg');
}

#index-field {
  height: 448px;
  width: 640px;
  border: 5px solid red;
  background-color: black;
  margin: 100px auto;
  box-shadow: 10px 10px 20px black;
  background-image: url('../images/title.png');
  overflow: auto;
}

#shade {
  position: relative;
  margin: -553px auto;
  height: 448px;
  width: 640px;
  background-color: black;
  opacity: 0;
  z-index: 10;
}

#instruction {
  position: relative;
  margin: -553px auto;
  height: 448px;
  width: 640px;
  background-color: rgba(0,0,0,0.85);
  z-index: 9;
}

.sidebar {
  width: 119px;
  height: 896px;
  background-repeat: repeat-y;
  margin: 0 25px;
}

#side-left {
  background-image: url('../images/johnside.png');
  float: left;
  animation: slide 2s linear infinite;
}

#side-right {
  background-image: url('../images/takaside.png');
  margin-top: 0px;
  float: right;
  animation: slide 2s linear infinite;
  animation-direction: reverse;
}

#title-div {
  width: 302px;
  float: left;
}

#title-h1 {
  font-size: 55px;
  margin-top: 40px;
  color: white;
  text-shadow: 4px 4px black;
}

.fade {
  animation: fadeblack 1.5s linear;
  animation-fill-mode: forwards;
}

@font-face {
  font-family: 'MK 1';
  src: url('../assets/mk1.ttf') format('truetype');

}

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

@keyframes breatheOne {
  0% {
    background-image: url('../images/1breathe1.gif');
  }
  33% {
    background-image: url('../images/1breathe2.gif');
  }
  66% {
    background-image: url('../images/1breathe3.gif');
  }
  100% {
    background-image: url('../images/1breathe3.gif');
  }
}

@keyframes breatheTwo {
  0% {
    background-image: url('../images/2breathe1.gif');
  }
  33% {
    background-image: url('../images/2breathe2.gif');
  }
  66% {
    background-image: url('../images/2breathe3.gif');
  }
  100% {
    background-image: url('../images/2breathe3.gif');
  }
}

@keyframes chopOne {
  0% {
    background-image: url('../images/1chop1.gif');
  }
  90% {
    background-image: url('../images/1chop2.gif');
  }
  100% {
    background-image: url('../images/1chop3.gif');
  }
}

@keyframes chopTwo {
  0% {
    background-image: url('../images/2chop1.gif');
  }
  90% {
    background-image: url('../images/2chop2.gif');
  }
  100% {
    background-image: url('../images/2chop3.gif');
  }
}

@keyframes blink {
  0% {
    color: white;
  }
  50% {
    color: red;
  }
  100% {
    color: white;
  }
}

@keyframes fadeblack {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-357px);
  }
}

@keyframes winOne {
  0% {
    background-image: url('../images/1win1.gif');
  }
  90% {
    background-image: url('../images/1win1.gif');
  }
  100% {
    background-image: url('../images/1win2.gif');
  }
}

@keyframes winOne {
  0% {
    background-image: url('../images/2win1.gif');
  }
  90% {
    background-image: url('../images/2win1.gif');
  }
  100% {
    background-image: url('../images/2win2.gif');
  }
}

/*Placeholders*/

#placeholder1 { background: url(../images/1breathe1.gif) no-repeat -9999px -9999px }
#placeholder2 { background: url(../images/1breathe2.gif) no-repeat -9999px -9999px }
#placeholder3 { background: url(../images/1breathe3.gif) no-repeat -9999px -9999px }
#placeholder4 { background: url(../images/1chop1.gif) no-repeat -9999px -9999px }
#placeholder5 { background: url(../images/1chop2.gif) no-repeat -9999px -9999px }
#placeholder6 { background: url(../images/1chop3.gif) no-repeat -9999px -9999px }
#placeholder7 { background: url(../images/1win1.gif) no-repeat -9999px -9999px }
#placeholder8 { background: url(../images/1win2.gif) no-repeat -9999px -9999px }
#placeholder9 { background: url(../images/2breathe1.gif) no-repeat -9999px -9999px }
#placeholder10 { background: url(../images/2breathe2.gif) no-repeat -9999px -9999px }
#placeholder11 { background: url(../images/2breathe3.gif) no-repeat -9999px -9999px }
#placeholder12 { background: url(../images/2chop1.gif) no-repeat -9999px -9999px }
#placeholder13 { background: url(../images/2chop2.gif) no-repeat -9999px -9999px }
#placeholder14 { background: url(../images/2chop3.gif) no-repeat -9999px -9999px }
#placeholder15 { background: url(../images/2win1.gif) no-repeat -9999px -9999px }
#placeholder16 { background: url(../images/2win2.gif) no-repeat -9999px -9999px }
#placeholder17 { background: url(../images/1whole.png) no-repeat -9999px -9999px }
#placeholder18 { background: url(../images/1broken.png) no-repeat -9999px -9999px }
#placeholder19 { background: url(../images/2whole.png) no-repeat -9999px -9999px }
#placeholder20 { background: url(../images/2broken.png) no-repeat -9999px -9999px }
#placeholder21 { background: url(../images/3whole.png) no-repeat -9999px -9999px }
#placeholder22 { background: url(../images/3broken.png) no-repeat -9999px -9999px }
#placeholder23 { background: url(../images/4whole.png) no-repeat -9999px -9999px }
#placeholder24 { background: url(../images/4broken.png) no-repeat -9999px -9999px }
#placeholder25 { background: url(../images/5whole.png) no-repeat -9999px -9999px }
#placeholder26 { background: url(../images/5broken.png) no-repeat -9999px -9999px }