roll20-character-sheets/TheWell/TheWell.css

.main {
  display: grid;
  width: 800px;
  height: 1200px;
  grid-gap: 4px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 3fr 10fr 3fr 20px;
  grid-template-areas:"head head"
                      "skill  personal"
                      "notes  notes"
                      "footer footer";
}

.header {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 3fr 2fr 2fr 2fr 2fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:"generator headline headline headline pool"
                      "logo name name name pool"
                      "logo stress resilience assets pool";
}

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

textarea {
  width: 90%;
  height: 85%;
  background-color: lightgray;
}

.section {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 11px;
  padding-right: 11px;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 5px 12px 5px 5px;
  box-shadow: inset 0 0 0 10px gray;
}
.section-right {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 11px;
  padding-right: 11px;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 12px 5px 5px 5px;
  box-shadow: inset 0 0 0 10px gray;
}
.subsection {
  padding-top: 15px;
  border-style: solid;
  border-color: gray;
  border-width: 12px 0px 0px 0px;
  border-radius: 0px 12px 0px 0px;
}
.subsection-right {
  padding-top: 15px;
  border-style: solid;
  border-color: gray;
  border-width: 12px 0px 0px 0px;
  border-radius: 12px 0px 0px 0px;
}

.flex-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  flex-grow: 0;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.flex-col-stretch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-row-stretch {
  display: flex;
  flex-flow: row wrap;
  justify-content: stretch;
}

.flex-center {
  display: flex;
  justify-content: center;
  margin: auto;
}

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

.header {
  grid-area: head;
}

.generator {
  grid-area: generator;
}

.b-generator {
  display: none;
}

.headline {
  grid-area: headline;
}

.pool {
  grid-area: pool;
}

.pool > img{
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

.logo {
  grid-area: logo;
}

.logo > img{
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

.name {
  grid-area: name;
}

.stress {
  grid-area: stress;
}

.resilience {
  grid-area: resilience;
}

.assets {
  grid-area: assets;
}

.skill {
  grid-area: skill;
}

.personal {
  grid-area: personal;
}

.notes {
  grid-area: notes;
}

.footer {
  grid-area: footer;
  background-color: gray;
}

.popup-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
  background-color: black;
}

.popup {
  position: absolute;
  width: 300px;
  height: auto;
  background-color: white;
  border: 2px solid #555;
  border-radius: 8px;
  margin: auto;
  left: calc(50% - 150px);
  top: calc(50% - 100px);
}

.popup-header {
  height: 50px;
  padding-left: 16px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
  background-color: #555;
  color: white;
}

.popup-content {
  padding: 8px 16px;
  font-size: 16px;
}

.hideifzero[value="0"] + div,
.hideifzero[value="0"] + button,
.hideifzero[value="0"] + span {
  display: none;
}