body {
    background-color: grey;
}
#wholebox {
    border:20px solid transparent;
    border-image: url('../project3/images/fullborder.png') round;
    border-image-slice: 20;
}
#title {
    text-align: center;
    background-image: linear-gradient(to bottom right, red, yellow);
    width: 25%;
    position: relative;
    left: 38%;
}
#hero_box {
    min-width: 50%;
    background-image: url("../project3/images/herobackground.png");
    background-size: 100%;
}
#hero {
    color: white;
    font-size: xx-large;
    font-weight: bolder;
}
#hero_level,#hero_attack {
    max-width: 50%;
    background-color: darkred;
    font-size: x-large;
}
#hero_exp,#hero_equipment {
    max-width: 50%;
    background-color: teal;
    font-size: x-large;
}
#hero_image {
    max-height: 300px;
    max-width: 260px;
}
#hero_image:hover {
    border:2px white solid;
}
.flex-container {
    display: flex;
border: red solid 5px;
min-height: 500px;
}

#enemy,#inv_select {
    min-width: 49.75%;
    font-size: x-large;
}
#aux_display {
    display: flex;
}
#history {
    min-height: 200px;
    max-height: 200px;
    min-width: 48%;
    background-color: white;
    overflow: auto;
    border:20px solid transparent;
    border-image: url('../project3/images/border.png') round;
    border-image-slice: 10;
}
#partition {
    min-height: 100%;
    min-width: 5px;
    background: black;
}
#hiddentext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;    
        position: absolute;
        z-index: 1;
}
#hpbar:hover #hiddentext {
        visibility: visible;  
}
#mpbar:hover #hiddentext {
    visibility: visible;
}
#headers {
    display: flex;
}
#historytitle{
    min-width: 50%;
}
#monsterimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    padding-top: 50px;
}
#monsterimage:hover {
    border: 2px white solid;
}
#hp_flash {
     position: relative;
     text-shadow: 2px 2px black;
     display: none;
     font-size: 300%;
     color: red;
     font-weight: bolder;
     right: 25%;
     top: 100px;
}
  #in_ehpbar {
      display: none;
      min-width: 200px;
      max-height: 18px;
    background-color: white;
    border: black solid 5px;
    border-radius: 25px;
    position: relative;
    top: 10px;
    right: 30%;
  }
  
  #ehpbar {
    width: 100%;
    height: 100%;
    background-color: green;
  }
  #hp_heal {
      display: none;
  position: relative;
  text-shadow: 2px 2px black;
  font-size: 300%;
  color: green;
  font-weight: bolder;
  right: 93%;
  top: 67px;
  max-height: 50px;
  }
  #attack_pin_image,#heal_pin_image,#hurt_pin_image {
      max-height: 60px;
      max-width: 60px;
  }

#attack_pin_image:hover {
    border: whitesmoke solid 2px;
    border-radius: 100%;
}
#heal_pin:hover {
    border: whitesmoke solid 2px;
    border-radius: 100%;
}

#hurt_pin_image:hover {
    border: whitesmoke solid 2px;
    border-radius: 100%;
}
#attack_pin:hover #hiddentext {
    visibility: visible;
}
#heal_pin:hover #hiddentext {
    visibility: visible;
}
#hurt_pin:hover #hiddentext {
    visibility: visible;
}
#deletebutton {

        transition-duration: 0.4s;
}
      
 #deletebutton:hover {
        background-color: red;
        color: white;
}