.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; }