/* fight page */
#healthBar, #enhealthBar {width:200px;height:20px;border:1px solid grey;border-radius:5px;padding:1px;text-align:left;background-color: white;}
#healthInner, #enhealthInner {height:100%;width:100%;border-radius:5px;background-color: red;}
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'menu header right'
    'menu main right'
    'menu footer right';
  grid-gap: 10px;
  background-color: #c4c4c4;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: -75px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
#battlebg {background-image:url('https://www.stockvault.net/data/2016/05/21/199268/preview16.jpg');background-position:center;background-size:cover;height:360px;text-align:center;padding-top:15px;border:0px dashed white;border-radius:10px;}
#aah {width:500px;padding:10px;margin-right:auto;margin-left:auto;background-color:white;border:1px solid grey;border-radius:10px; text-align:center;}
	#ignorebtn {height:30px;width:100px;margin:5px;background-color:#d3f9c2;border:1px solid #447c2b;transition:0.3s;}
	#ignorebtn:hover {cursor:pointer;background-color:#8dce71;transition:0.3s;}
	#fightbtn {height:30px;width:100px;margin:5px;background-color:#f9ac9d;border:1px solid #7c2a1a;transition:0.3s;}
	#fightbtn:hover {cursor:pointer;background-color:#f7674a;transition:0.3s;}
#imgholder {border:none;height:180px;margin:100px 20px 30px 20px;}
#griffimg { width:300px;border:none; display:inline-block;margin:20px 70px 0px 0px;}
#enemyimg { width:300px;border:none; display:inline-block;margin:20px 0px 0px 70px;}
/* under the sprites */
#namebars {width: 770px;height:50px;border:none;margin:auto;}
#griffname {width:200px;height:40px;border:2px solid white;padding:4px;background-color:rgba(255,255,255,0.7);display:inline-block;margin:0px 120px  0px 0px;border-bottom:none;}
#enemyname {width:200px;height:40px;border:2px solid white;padding:4px;background-color:rgba(255,255,255,0.7);display:inline-block;margin:0px 0px 0px 120px;border-bottom:none;}
/* box where each round is written */
#reports {width:400px;height:100px;padding:10px;margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;border:2px solid black;border-radius:4px;background-color:white; overflow:auto;}
/* clear enough */
#statsbars {width: 780px;height:210px;border:none;margin:auto;}
#griffstats {width:300px;height:200px;border:2px solid white;padding:5px;background-color:rgba(255,255,255,0.7);margin:0px 70px 0px 0px; display:inline-block;border-top:none;vertical-align:top;}
#enemystats {width:300px;height:200px;border:2px solid white;padding:5px;background-color:rgba(255,255,255,0.7);margin:0px 0px 0px 70px; display:inline-block;border-top:none;vertical-align:top;}
/* box where move btns are */
#actionbox {width:750px;min-height:120px;padding:10px;margin-top:15px;margin-left:auto;margin-right:auto;border:2px solid white;background-color:rgba(255,255,255,0.7);}
/* result boxes. these are hidden and appear at end of battle, fixed in centre of screen */
.endbox {padding:10px;border:1px solid grey;border-radius:10px;width:400px;min-height:100px;max-height:400px;background-image:url(https://orig00.deviantart.net/7246/f/2018/122/f/1/perchbg2_by_bronzehalo-dcagnjo.png);background-repeat:no-repeat; background-position:center; position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-150px;display:none;
-webkit-box-shadow: 1px 2px 41px 20px rgba(255,255,255,1);
-moz-box-shadow: 1px 2px 41px 20px rgba(255,255,255,1);
box-shadow: 1px 2px 41px 20px rgba(255,255,255,1);}