@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

.charsheet {
    font-family: 'Fredoka One', cursive;
    background-color: #ececec;
}

.grid-upper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 4px;
  grid-template-areas:
    "info info abilities stats";
}

.header {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 4px;
  grid-template-areas:
    "header-logo header-text header-gm";
}

.header-logo { grid-area: header-logo; }
.header-text { grid-area: header-text; }
.header-gm { grid-area: header-gm; }

.info {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 5fr;
  gap: 0px 4px;
  grid-template-areas:
    "info-title info-title info-title"
    "info-character-name-title info-character-name ."
    "info-species-title info-species ."
    "info-gender-title info-gender ."
    "info-appearance-title info-appearance ."
    "info-demeanor-title info-demeanor ."
    "info-notes-title info-notes-title ."
    "info-notes info-notes .";
  grid-area: info;
}

.info-title { grid-area: info-title; }
.info-character-name-title { grid-area: info-character-name-title; }
.info-character-name { grid-area: info-character-name; }
.info-species-title { grid-area: info-species-title; }
.info-species { grid-area: info-species; }
.info-gender-title { grid-area: info-gender-title; }
.info-gender { grid-area: info-gender; }
.info-appearance-title { grid-area: info-appearance-title; }
.info-appearance { grid-area: info-appearance; }
.info-demeanor-title { grid-area: info-demeanor-title; }
.info-demeanor { grid-area: info-demeanor; }
.info-notes-title { grid-area: info-notes-title; }
.info-notes { grid-area: info-notes; }

.abilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 4px;
  grid-template-areas:
    "abilities-title abilities-title"
    "abilities-bdy-title abilities-bdy"
    "abilities-ref-title abilities-ref"
    "abilities-spr-title abilities-spr"
    "abilities-mnd-title abilities-mnd"
    "dmg-mod-title dmg-mod-title"
    "dmg-mod-melee-title dmg-mod-melee"
    "dmg-mod-ranged-title dmg-mod-ranged"
    "action-order-title action-order-title"
    "action-order action-order";
  grid-area: abilities;
}

.abilities-title { grid-area: abilities-title; }
.abilities-bdy-title { grid-area: abilities-bdy-title; }
.abilities-bdy { grid-area: abilities-bdy; }
.abilities-ref-title { grid-area: abilities-ref-title; }
.abilities-ref { grid-area: abilities-ref; }
.abilities-spr-title { grid-area: abilities-spr-title; }
.abilities-spr { grid-area: abilities-spr; }
.abilities-mnd-title { grid-area: abilities-mnd-title; }
.abilities-mnd { grid-area: abilities-mnd; }

.dmg-mod-title { grid-area: dmg-mod-title; }
.dmg-mod-melee-title { grid-area: dmg-mod-melee-title; }
.dmg-mod-melee { grid-area: dmg-mod-melee; }
.dmg-mod-ranged-title { grid-area: dmg-mod-ranged-title; }
.dmg-mod-ranged { grid-area: dmg-mod-ranged; }

.action-order-title { grid-area: action-order-title; }
.action-order { grid-area: action-order; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 4px;
  grid-template-areas:
    "stats-title stats-title"
    "stats-hp-current-title stats-hp-current"
    "stats-hp-total-title stats-hp-total"
    "stats-ag-title stats-ag"
    "stats-mov-title stats-mov"
    "stats-xp-title stats-xp"
    "stats-xp-total-title stats-xp-total"
    "stats-penalty-title stats-penalty";
  grid-area: stats;
}

.stats-title { grid-area: stats-title; }
.stats-hp-current-title { grid-area: stats-hp-current-title; }
.stats-hp-current { grid-area: stats-hp-current; }
.stats-hp-total-title { grid-area: stats-hp-total-title; }
.stats-hp-total { grid-area: stats-hp-total; }
.stats-ag-title { grid-area: stats-ag-title; }
.stats-ag { grid-area: stats-ag; }
.stats-mov-title { grid-area: stats-mov-title; }
.stats-mov { grid-area: stats-mov; }
.stats-xp-title { grid-area: stats-xp-title; }
.stats-xp { grid-area: stats-xp; }
.stats-xp-total-title { grid-area: stats-xp-total-title; }
.stats-xp-total { grid-area: stats-xp-total; }
.stats-penalty-title { grid-area: stats-penalty-title; }
.stats-penalty { grid-area: stats-penalty; }

.skills {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 5fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 4px;
  grid-template-areas:
    "skill-name-title skill-level-title skill-ability-title skill-mod-title skill-notes-title skill-roll-title"
    "skill-name skill-level skill-ability skill-mod skill-notes skill-roll";
}

.skill-name-title { grid-area: skill-name-title; }
.skill-level-title { grid-area: skill-level-title; }
.skill-ability-title { grid-area: skill-ability-title; }
.skill-mod-title { grid-area: skill-mod-title; }
.skill-notes-title { grid-area: skill-notes-title; }
.skill-roll-title { grid-area: skill-roll-title; }
.skill-name { grid-area: skill-name; }
.skill-level { grid-area: skill-level; }
.skill-ability { grid-area: skill-ability; }
.skill-mod { grid-area: skill-mod; }
.skill-notes { grid-area: skill-notes; }
.skill-roll { grid-area: skill-roll; }

.weapons{
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 3fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 4px;
  grid-template-areas:
    "weapon-name-title weapon-hands-title weapon-range-title weapon-ammo-title weapon-penetration-title weapon-damage-title weapon-damage-title weapon-damage-title weapon-type-title weapon-type-title weapon-mod-title weapon-notes-title weapon-roll-title"
    "weapon-name weapon-hands weapon-range weapon-ammo weapon-penetration weapon-damage-dice weapon-damage-d10 weapon-damage-mod weapon-type-melee weapon-type-ranged weapon-mod weapon-notes weapon-roll";
}

.weapon-name-title { grid-area: weapon-name-title; }
.weapon-hands-title { grid-area: weapon-hands-title; }
.weapon-range-title { grid-area: weapon-range-title; }
.weapon-ammo-title { grid-area: weapon-ammo-title; }
.weapon-penetration-title { grid-area: weapon-penetration-title; }
.weapon-damage-title { grid-area: weapon-damage-title; }
.weapon-type-title { grid-area: weapon-type-title; }
.weapon-mod-title { grid-area: weapon-mod-title; }
.weapon-notes-title { grid-area: weapon-notes-title; }
.weapon-roll-title { grid-area: weapon-roll-title; }
.weapon-name { grid-area: weapon-name; }
.weapon-hands { grid-area: weapon-hands; }
.weapon-range { grid-area: weapon-range; }
.weapon-ammo { grid-area: weapon-ammo; }
.weapon-penetration { grid-area: weapon-penetration; }
.weapon-damage-dice { grid-area: weapon-damage-dice; }
.weapon-damage-d10 { grid-area: weapon-damage-d10; }
.weapon-damage-mod { grid-area: weapon-damage-mod; }
.weapon-type-melee { grid-area: weapon-type-melee; }
.weapon-type-ranged { grid-area: weapon-type-ranged; }
.weapon-mod { grid-area: weapon-mod; }
.weapon-notes { grid-area: weapon-notes; }
.weapon-roll { grid-area: weapon-roll; }

.grid-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 4px;
  grid-template-areas:
    "benefits-area flaws-area"
    "powers-area gear-area";
}

.benefits-area {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr;
  grid-template-rows: 1fr 9fr;
  gap: 4px 4px;
  grid-template-areas:
    "benefits-title benefits-title benefits-title"
    "benefits benefits .";
  grid-area: benefits-area;
}

.benefits-title { grid-area: benefits-title; }
.benefits { grid-area: benefits; }

.flaws-area {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr;
  grid-template-rows: 1fr 9fr;
  gap: 4px 4px;
  grid-template-areas:
    "flaws-title flaws-title flaws-title"
    "flaws flaws .";
  grid-area: flaws-area;
}

.flaws-title { grid-area: flaws-title; }
.flaws { grid-area: flaws; }

.powers-area {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr;
  grid-template-rows: 1fr 9fr;
  gap: 4px 4px;
  grid-template-areas:
    "powers-title powers-title powers-title"
    "powers powers .";
  grid-area: powers-area;
}

.powers-title { grid-area: powers-title; }
.powers { grid-area: powers; }

.gear-area {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr;
  grid-template-rows: 1fr 9fr;
  gap: 4px 4px;
  grid-template-areas:
    "gear-title gear-title gear-title"
    "gear gear .";
  grid-area: gear-area;
}

.gear-title { grid-area: gear-title; }
.gear { grid-area: gear; }