html{
    background-color: black;
    cursor:crosshair;
}
.cardcontainer{
    background-color: orange;
    position:relative;
    height:460px;
    width:320px;
    left:400px;
    border-radius: 20px;
}
.card{
    position: relative;
    left:5%;
    top:5%;
    background-color: #1679AB;
    height: 90%;
    width:90%;
}
.flexhead{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width:90%;
    top:-10px;
    font-size:12px;
    text-decoration: underline;
    text-decoration-color:gold ;
    text-underline-position: below;
    text-underline-offset: 50%;

}

.monster{
    position: relative;
    width: 80%;
    height: 40%;
    top:7%;
    left:7%;
    border:10px solid gold;
}
.liver{
    width:40px;
    height:40px;
    background-color: gray;
    position: absolute;
    left:2%;
    top:12%
}
.card h2{
    position: absolute;
    top:0%;
    left:0%;
}
#description {
    position: relative;
    margin:20px;
    top:3%;
    width: 250px; 
    background: linear-gradient(to right, goldenrod,yellow,goldenrod);
    font-size: 10px;
    font-style: italic;
    font-weight: 600;
    text-align: center;
  }
.ability{
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-left:8px;
    margin-top: 1px;
    border-bottom:3px solid gold;
    width:90%;
    top:-3%;
}
.ability .labeltxt{
    font-size:13px;
    font-weight: 400;
}
.ability .label{
    font-weight: 700;
    font-size: 14px;
}
.ability .imagecontainer{
    position:relative;
    display:inline-grid;
    grid-template-columns: 25px 25px;
}
.ability .imagecontainer img{
    width:25px;
    height:25x;
}
.ability h3{
    text-align: right;
    font-weight: 9000;
    font-size:20px;
    color:aqua;    
}
.abilitydesc{
    display:block;
    text-align: left;
}
.hp{
    left:70%;
    color:red;
    position:absolute;
    top:1%;
    width:fit-content;
}