.ak-enemydata {
box-sizing:border-box;
display:inline-grid;
width:410px;
min-height:410px;
color:#FFF;
/*linear gradient not supported, defined inline*/
margin:0 5px 5px 0;
padding:10px;
grid-template-columns: repeat(4,90px);
grid-template-rows: 100px minmax(88px,max-content) 90px min-content;
grid-gap: 10px;
grid-template-areas:
"aed-topsec aed-topsec aed-topsec aed-topsec"
"aed-desc aed-desc aed-desc aed-desc"
"aed-hp aed-atk aed-def aed-ares"
"aed-rmk aed-rmk aed-rmk aed-rmk";
}
.ak-enemydata div {
box-sizing:border-box;
}
.ak-enemydata>.ak-enemydata-top-section {
display:flex;
}
.ak-enemydata>.ak-enemydata-top-section>div {
flex:0 0;
}
.ak-enemydata>.ak-enemydata-top-section .ak-enemydata-id {
height:40px;
min-width:40px;
border:1px solid #FFF;
margin:30px 0;
padding:20px 2px;
text-align:center;
line-height:0;
font-size:20px;
font-weight:bold;
font-family:sans-serif;
white-space:nowrap;
}
.ak-enemydata>.ak-enemydata-top-section .ak-enemydata-name {
flex:1 0;
padding:10px;
font-size:1.25em;
}
.ak-enemydata>.ak-enemydata-top-section .ak-enemydata-name>.ak-enemydata-type {
font-size:0.8em;
color:#008080;
}
.ak-enemydata>.ak-enemydata-top-section .ak-enemydata-spmark {
padding:10px 10px 0 0;
}
.ak-enemydata>.ak-letterdata {
border:1px solid #888;
text-align:center;
}
.ak-enemydata>.ak-letterdata>.ak-dataletter {
font-weight:bold;
font-size:2.5em;
}