@font-face {
  font-family: 'Game';
  src: url('../fonts/prstart.ttf');
}

@font-face {
  font-family: 'DOS';
  src: url('../fonts/LessPerfectDOSVGA.ttf');
}

/* Global styles */

body {
  margin: 0;
  background-color: #000;
  overflow: hidden;
}

.invisible {
  visibility: hidden;
}

.flex-container {
  display: flex;
}

.justify-space-around {
  justify-content: space-around;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.game {
  font-family: 'Game';
}

.dos {
  font-family: 'DOS';
}

.auto-center {
  margin: 0 auto;
}

.green-text {
  color: #00ff00;
}

/* End Global, Begin header styles */

.life-box {
  height: 100px;
  font-family: 'Game';
  font-size: 24px;
  color: #fff;

  margin-bottom: 20px;
}

#life-bar {
  color: #ff0000;

}

.dead-text {
  color: #f00;
  animation-name: dead-text-anim;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes dead-text-anim {
  0% {color: #f00;}
  50% {color: #fff;}
  100% {color: #f00;}

}


/* End header */

/* Begin left container

/* End left container */

/* Begin right container */

/* End right container */

/* Begin middle console */

.game-console {
  font-family: 'DOS';
  font-size: 1.5em;
  color: #fff;
  transition: all 0.3s;
}


#console-button-row {
  margin-top: 2em;
}

.first-button {
  border: 1px solid #f00;
  color: #f00;
  background-color: #222;
  border-radius: 5px;
  font-family: 'Game';
  margin: 1em auto;
}

.first-button:hover {
  background-color: #444;
}

.first-button:active {
  background-color: #666;
}

/* End middle styles */

/* Styles for EVENTS */

.boss-shield {
  font-size: 4em;
}

/* End event styles */

/* Begin dialogue box */

#dialogue-box {
  width: 80%;
  position: absolute;
  border: 3px solid #f00;
  border-radius: 20px;
  top: 30%;
  color: #fff;
  transition: .3s all;
  padding: 10px;
  box-shadow: 3px 3px 3px #f33;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 15;
}

.hide-dialogue {

  transform: translate(-105%, -50%);
}

.show-dialogue {
  transform: translate(5%, -50%);
}

.dialogue-button {
  font-family: 'DOS';
  align-self: center;

}

/* End dialogue box */

/* begin blacken box. this is used to hide the console when dialogue is posted */

.blacken-box {
  width: 90%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  top: 75px;
  z-index: -1;
  height: 100vh;
  transition: all 1.5s;
}

.blacken {
  background-color: rgba(0, 0, 0, 1);
  z-index: 10;
}

/* end blacken box */

/* begin inventory */

.inventory-box {
  width: 80%;
  z-index: 3;
  background-color: #000;
  border: 2px solid yellow;
  color: #fff;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 30vh;
  left: 10%;
  transition: 0.25s all;
  padding: 20px;
  opacity: 0.9;
}

.hide-inventory {
  transform: translateX(115%);
  display: none;
}

#skillList { /* The skill list from the command menu, located in script.js */
  width: 100%;
}

.skill-list {
  border-top: 1px solid #444;
}

.skill-cancel-button {
  margin-top: 20px;
}

/* End inventory */

/* begin status window*/

#status-box {
  width: 100%;
  height: 100%;
  border: 1px solid #00ff00;
  position: absolute;
  left: 0;
  z-index: 4;
  transition: 0.5s all;
  background-color: #112211;
  color: #fff;
}

#status-left-box, #status-right-box {
  flex-direction: column;
  align-items: center;
}

.show-status {
  top: 0;

}

.hide-status {
  top: -100%;
}

/* end status window */

/* behin lookin cool joker! */

.joker-box {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
  transition: 0.25s all;
  z-index: 10;
}

.jokerpic {
   width: 100%;
}

.hide-joker {
  transform: translate(100%, -50%);
  display: none;
}

.done-joker {
  transform: translate(-100%, -50%);
}

.no-transition {
  transition: 0s all;
}

/* End joker looking cool */

/* Begin battle box */

.battle-box {
  width: 80%;
  height: 90vh;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 10%;
  transition: 0.5s all;
  border: 1px solid #fff;
  background-color: #222;
}

.result-box {
  width: 80%;
  height: 90vh;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 10%;
  transition: 0.5s all;
  border: 1px solid #fff;
  background-color: #222;
}

.result-top {
  height: 70vh;
  width: 100%;
  flex-direction: column;
  color: #fff;
}

.result-bottom {
  height: 20vh;
  width: 100%;

}

.hide-battle {
  left: -80%;
}



.party-member-box {
  height: 25vh;
  color: #fff;
  border: 1px solid #fff;
  padding: 5px;
}

.enemy-container {
  height: 40vh;
  color: #fff;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

.enemy-container p {
  margin: 0;
}

.current-turn-border {
  border: 4px dotted #ffff00;
}

.action-box, .description-box {
  height: 23vh;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 5%;
}

.action-box {
  padding-top: 10px;
}

.description-box {
  color: #fff;
  padding-top: 5px;
}

.action-row {
  height: calc(23vh/4);
  color: #fff;

}

.arrow-box {
  height: calc(23vh/4);
  width: 50px;
  float: left;
}

.attack-target-box {
  border: 2px dotted dodgerblue;
  padding: 5px;
}

.game-over-text {
  color: #fff;
}

.battle-over-button {
  height: 50px;
  padding: 10px;
  color: #000;
}

/* icon styles */

.wind-icon {
  color: #186d27;
}

.lightning-icon {
  color: #fcf937;
 }

.fire-icon {
  color: #f47d42;
 }

.ice-icon {
  color: #013896;
}

.darkness-icon {
  color: #555555;
 }

.physical-icon {
  color: #a30000;
 }

 .heal-icon {
  color: #76f400;
 }