roll20-character-sheets/OnePiece_d20/sheet.css

.sheet-main {
  display: grid;
  width: 100%;
  height: auto;
  background-color: lightgray;
  /*grid-gap: 4px;*/
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 100px 450px 300px 1fr 2fr 2fr;
  grid-template-areas:"header  header  header  header"
                      "common  common  common  common"
                      "attr    stat    stat    resistance"
                      "items   items   armor   armor"
                      "skill   skill   skill   skill"
                      "attack   attack  feats  feats";
}

/*----------------- GENERAL CSS ------------------*/

textarea {
  width: 90%;
  height: 85%;
  margin: 1px;
}

input[type="text"] {
    width: 90%;
}

.sheet-mediumNumber {
    width: 4em !important;
}

.sheet-bigNumber {
    width: 8em !important;
}

select {
    width: 90%;
}

.sheet-bumper {
    margin: 5px 0px;
}

.sheet-max-width-input {
    width: 95%;
}

.sheet-section {
    padding: 5px;
    border-style: solid;
}

.sheet-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.repcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.sheet-flex-col {
  display: flex;
  flex-direction: column;
  /*justify-content: flex-start;*/
}

div.sheet-skill div.repcontainer div.repitem,
div.sheet-feats div.repcontainer div.repitem {
    width: 50%;
}

.sheet-flex-center {
  align-items: center;
  justify-content: center;
}

.sheet-flex-around {
    display:flex;
  align-items: center;
  justify-content: space-around;
}

.sheet-half {
    width: 50%;
}

.sheet-one-third {
    width: 33%;
}

.sheet-fullWidth {
    width: 100%;
}

.sheet-modBox {
    border-radius: 20%;
    border: 2px solid black;
    padding: 4px 8px;
    font-size: 1.2em;
}

/*------------- Section-specific CSS -------------*/

.sheet-header {
  grid-area: header;
}

.sheet-logo {
    max-height: 100%;
}

.sheet-attr {
  grid-area: attr;
}

.sheet-common {
  grid-area: common;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.sheet-power {
  grid-area: power;
}

.sheet-attack {
  grid-area: attack;
}

.sheet-block {
    display: flex;
    flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-bottom: 1px black dashed;
  margin: 5px 0px;
  padding: 10px 0px;
}

.sheet-resistance {
    grid-area: resistance;
}

.sheet-feats {
    grid-area: feats;
}
.sheet-skill {
  grid-area: skill;
}

.sheet-stat {
  grid-area: stat;
}

.sheet-items {
  grid-area: items;
}

.sheet-armor {
    grid-area: armor;
}

.sheet-bordered {
    border: 2px solid black;
}

/*------------- Roll Templates -------------*/

.sheet-rolltemplate-attack .sheet-attack-roll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 2px black solid;
    padding: 4px;
    
}

.sheet-rolltemplate-attack .sheet-attack-roll span {
    display: flex;
    justify-content: center;
    align-items:center;
}

.sheet-rolltemplate-attack h3 {
    margin: 0px 3px;
}

.sheet-rolltemplate-skill .sheet-skill-roll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 2px black solid;
    text-align: center;
    padding: 4px;
}