#characters-page {
  display: flex;
  flex-direction: column;
  margin: var(--spacing-medium); }

#characters {
  display: flex;
  gap: var(--spacing-medium); }

#characters a {
  flex: 1;
  text-decoration: none; }

.character-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 2em);
  background-color: var(--primary-color);
  color: var(--white);
  text-align: center; }

.add-character-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--primary-color);
  color: var(--white);
  flex: 1; }

.character-image {
  background-color: var(--secondary-color);
  flex: 12;
  object-fit: cover;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); }

.character-name {
  padding: .25em; }

.character-class {
  text-transform: uppercase;
  font-size: .75em; }

.character-level {
  font-size: 2em;
  margin: .25em; }