#character-sheet {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--spacing-medium);
  padding: var(--spacing-medium); }

#character-info {
  grid-column: 1 / 8;
  grid-row: 1;
  display: flex;
  align-items: center; }

#settings {
  grid-column: 9 / 10;
  grid-row: 1; }

#stat-blocks {
  grid-column: 1 / 2;
  grid-row: 2 / 6;
  display: flex;
  flex-direction: column;
  margin-top: 1.5em; }

#inspiration {
  grid-column: 8 / 9;
  grid-row: 1; }

#proficiency-bonus {
  grid-column: 2 / 4;
  grid-row: 3; }

#saving-throws {
  grid-column: 2 / 4;
  grid-row: 4; }

#skills {
  grid-column: 2 / 4;
  grid-row: 5; }

#passive-perception {
  grid-column: 1 / 4;
  grid-row: 6; }

#other-proficiencies-and-languages {
  grid-column: 1 / 4;
  grid-row: 7; }

#armor-class {
  grid-column: 4 / 5;
  grid-row: 2; }

#initiative {
  grid-column: 5 / 6;
  grid-row: 2; }

#speed {
  grid-column: 6 / 7;
  grid-row: 2; }

#hit-points {
  grid-column: 4 / 7;
  grid-row: 3; }

#hit-dice {
  grid-column: 4 / 5;
  grid-row: 4; }

#death-saving-throws {
  grid-column: 6 / 7;
  grid-row: 4; }

#attacks-and-spellcasting {
  grid-column: 4 / 7;
  grid-row: 5; }

#money {
  grid-column: 4 / 5;
  grid-row: 6; }

#equipment {
  grid-column: 5 / 7;
  grid-row: 6; }

#character-details {
  grid-column: 7 / 10;
  grid-row: 2 / 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }

#features-traits {
  grid-column: 7 / 10;
  grid-row: 7; }

.stats {
  width: 10em; }

.stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%);
  padding: var(--spacing-large);
  margin: -1.5em 0; }

.strength {
  background-color: var(--strength-color); }

.strength-text {
  color: var(--strength-color); }

.dexterity {
  background-color: var(--dexterity-color); }

.dexterity-text {
  color: var(--dexterity-color); }

.constitution {
  background-color: var(--constitution-color); }

.constitution-text {
  color: var(--constitution-color); }

.intelligence {
  background-color: var(--intelligence-color); }

.intelligence-text {
  color: var(--intelligence-color); }

.wisdom {
  background-color: var(--wisdom-color); }

.wisdom-text {
  color: var(--wisdom-color); }

.charisma {
  background-color: var(--charisma-color); }

.charisma-text {
  color: var(--charisma-color); }

.stat-name {
  font-size: var(--spacing-medium);
  transform: rotate(15deg);
  text-transform: uppercase; }

.stat-value {
  font-size: 2em; }

.stat-modifier {
  font-size: .8em; }

.text-block {
  padding: .5em; }

.single-value {
  display: flex;
  align-items: center; }

.card {
  padding: .5em; }