Magical Kitties Roll20 sheet

Kitties.css

/* General Styling */

@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');

.sheet-container {
  background-image: url("https://raw.githubusercontent.com/brocktopus/roll20-character-sheets/heart/Heart-the-City-Beneath-mk2/Heart-bg.png");
  background-size: cover;
}

.sheet-container div {
	padding: 2px;
	margin: 2px;
	vertical-align: top;
}

.sheet-score label {
    text-align: center;
}


.sheet-defenses > div {
    flex: 1 1 50%;
    
    display: flex;
    padding: 0.5em 0;
    
    text-align: center;
}

.sheet-defenses > div > div {
    flex: 1 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 1em;
}


.sheet-defenses .sheet-score {
    margin-right: 0;
    border: 2px solid gray;
    min-height: 8.3em;
    min-width: 8em;
}

.sheet-defenses .sheet-score {
    margin-right: 0;
    border: 2px solid gray;
    min-height: 8.3em;
    min-width: 8em;
}

.sheet-defenses .sheet-components {
    margin: 1.7em;
    margin-left: -2px;
    min-height: 7em;
    border: 2px solid gray;
    border-left: 0;
}


button[type="roll"] {
  width: 80%;
  height: 50%;
}

img {
  margin-bottom: 1em;
}


p {
  padding: .5em;
}


/* Inputs, textarea */

.sheet-score input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 6em;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 2em !important; /* required due to overly specific Roll20 defaults */
}

.sheet-other .sheet-score input {
    font-size: 5em;
}

.sheet-hitpoints .sheet-score:not(:last-child) input {
    border-right: 1px solid black;
}

input[type="text"] {
  margin-top: .01;
  line-height: 1.2;
  margin-right: 0;
  padding-right: 0;
  max-width: 100%;
}

textarea {
  width: 100%;
  line-height: 32px;
  
}

input[type="text"], select, textarea {
  vertical-align: top;
}

input[type="text"].sheet-input-large{
   font-size: 24pt; 
}
input[type="text"].sheet-input-medium{
   font-size: 18pt; 
}


/* Adjusting repeating-item button placement */


/* Font & text color-related formatting */

h1, h2, h3, h4, h5, h6, .sheet-redtext, .sheet-pinktext, .sheet-whiteonredtext {
  text-transform: uppercase;
  font-family: 'Staatliches', cursive;
}


.sheet-redtext {
  font-weight: bold;
  color: #a00a03;
}

span.sheet-redtext {
  font-size: 2.2em;
}

.sheet-redtext input[type="text"] {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sheet-pinktext {
  color: #c33d37;
}

.sheet-whiteonredtext {
  color: white;
  background-color: #a00a03;
  padding: .2em;
}

.sheet-rightalign {
  text-align: right;
}

.sheet-small-text p {
  font-size: xxx-large;
}


/* Flex displays */

.sheet-flex {
  display: flex;
}

.sheet-flex-align-start {
  align-items: flex-start;
}

.sheet-flex-around {
  justify-content: space-around;
}

.sheet-flex-between {
  justify-content: space-between;
}

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

.sheet-flex-end {
  justify-content: flex-end;
}

.sheet-flex-even {
  justify-content: space-evenly;
}

.sheet-flex-start {
  justify-content: flex-start;
}

.sheet-flex-grow-2 {
  flex-grow: 2;
}

textarea.sheet-flex-grow-2 {
  height: 15px;
}


/* Width-related formatting */

.sheet-width100 {
  width: 100px;
  max-width: 100px;
}

.sheet-twentywide {
  display: inline-block;
  max-width: 18%;
  width: 18%;
}

.sheet-quarterwide {
  display: inline-block;
  max-width: 23%;
  width: 23%;
}

.sheet-thirdwide {
  display: inline-block;
  max-width: 33%;
  width: 33%;
}

.sheet-fortywide {
  display: inline-block;
  max-width: 37%;
  width: 37%;
}

.sheet-halfwide {
  display: inline-block;
  max-width: 46%;
  width: 46%;
}

.sheet-threequarterswide {
  display: inline-block;
  max-width: 80%;
  width: 80%;
}

.sheet-fullwide {
  display: inline-block;
  max-width: 96%;
  width: 96%;
}


/* Miscellaneous formatting */

.sheet-inline-block {
  display: inline-block;
}

.sheet-no-display {
  display: none;
}

Kitties.html

<div class="container">
 <div class="quarterwidth flex flex-between">
   <p style="font-size: 100pt">Magical Kitties</p>
 </div>

 <div class="quarterwidth flex flex-between">
   <p style="font-size: 30pt">Save the Day!</p>
 </div>

 <div class="threequarterswide flex flex-center">
    <h2 class="whiteonredtext">Kitty Name</h2>
    <div class="flex flex-between">
      <span class="redtext width100">Kitty</span> <input type="text" class="flex-grow-2 input-large" name="attr_character_name">
    </div>
 </div>



 <div class="fullwide flex flex-even">

   <div class="thirdwide flex flex-center">
     <h2 class="whiteonredtext">Trackables</h2>
     <div class="flex flex-between">
       <span class="redtext">Owies</span> <input type="number" class="input-large" value="0" min="0" max="6" name="attr_owies"/>
     </div>
     <div class="flex flex-between">
       <span class="redtext">Treats</span> <input type="number" class="input-large" value="0" min="0" max="5" name="attr_treats"/>
     </div>
     <div class="flex flex-between">
       <span class="redtext">Injuries</span> <input type="number" class="input-large" value="0" min="0" max="4" name="attr_injuries"/>
     </div>
     <div class="flex flex-between">
       <span class="redtext">Level</span> <input type="number" class="input-large" value="0" min="0" max="10" name="attr_level"/>
     </div>
     <div class="flex flex-between">
       <span class="redtext">Current XP</span> <input type="number" class="input-large" value="0" min="0" max="100" name="attr_xp"/>
     </div>
   </div>

   <div class="twentywide flex flex-start">

     <h2 class="whiteonredtext">Maximums</h2>
     <div>
       <input type="number"class="input-large" placeholder="0" min="0" max="5" name="attr_owies_max"/>
     </div>
     <div>
       <input type="number"class="input-large" placeholder="0" min="0" max="5" name="attr_treats_max"/>
     </div>
   </div>

   <div class="thirdwide">

      <div>
        <h2><span class="whiteonredtext">Kitty Description</span></h2>
        <textarea style="min-height:150px; font-size: 18pt" name="attr_k_desc" spellcheck="true"></textarea>
      </div>
   </div>


   </div>

   <div class="threequarterswide flex flex-end">
     <h2 class="whiteonredtext">Attributes</h2>
      <div class="section stats">
      <div class="defenses">
         <div class="guard">
            <div class="score">
               <label for="attr_cute_score">Cute</label>
               <input type="number"  placeholder="1" name="attr_cute_score">
            </div>
            <div class="score">
               <label for="attr_cunning_score">Cunning</label>
               <input type="number"  placeholder="1" name="attr_cunning_score">
               </div>
            <div class="score">
               <label for="attr_fierce_score">Fierce</label>
               <input type="number"  placeholder="1" name="attr_fierce_score">
            </div>
         </div>
      </div>
    </div>

   </div>

 </div>


  <div class="threequarterswide">
      <div>
        <h2><span class="whiteonredtext">Kitty Description</span></h2>
        <textarea class="input-large" name="attr_k_desc" spellcheck="true"></textarea>
      </div>

      <br>

      <h2><span class="whiteonredtext">Talents</span></h2>
      <fieldset class="repeating_Abilities">
        <div>
          <h4 class="redtext"><input type="text" name="attr_TalentsTitle" class="talenttitle input-medium" placeholder="Talent Name" /></h4>
          <textarea class="input-medium" name="attr_TalentsDetails"></textarea>
        </div>
      </fieldset>

      <br>

      <h2><span class="whiteonredtext">Magical Powers</span></h2>
      <fieldset class="repeating_Abilities">
        <div>
          <h4 class="redtext"><input type="text" name="attr_MagicalTitle" class="magicaltitle input-medium" placeholder="Magical Power Name" /></h4>
          <textarea class="input-medium" name="attr_MagicalDetails"></textarea>
        </div>
      </fieldset>

      <br>

      <h2><span class="whiteonredtext">Flaws</span></h2>
      <fieldset class="repeating_Abilities">
        <div>
          <h4 class="redtext"><input type="text" name="attr_FlawsTitle" class="flawstitle input-medium" placeholder="Flaw Name" /></h4>
          <textarea class="input-medium" name="attr_FlawsDetails"></textarea>
        </div>
      </fieldset>

      <br>

      <h2><span class="whiteonredtext">Notes</h2>
        <fieldset class="repeating_notes">
          <textarea class="input-medium"  name="attr_notes"></textarea>
        </fieldset>
      </div>

      <br>

      <div class="threequarterswide">
        <h2><span class="whiteonredtext">Your Human's Details</span></h2>
        <textarea class="input-medium" name="attr_h_desc" spellcheck="true"></textarea>

        <br>

        <h2><span class="whiteonredtext">Problems Facing Kitty</span></h2>
        <fieldset class="repeating_Problems">
          <div>
            <h4 class="redtext"><input type="text" name="attr_ProblemsTitle" class="problemstitle input-medium" placeholder="Problem Name" /></h4>
            <textarea class="input-medium" name="attr_ProblemDetails"></textarea>
          </div>
        </fieldset>
      </div>
  </div>

 </div>