style.css

:root {
  --space: 2rem;
  --space-xs: calc(var(--space) / 3);
  --space-sm: calc(var(--space) / 2);
  --space-md: calc(var(--space) * 2);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  padding: 0 var(--space);
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  max-width: 1800px;
}

main {
  margin-top: 1rem;
  margin-bottom: calc(var(--space-md) * -1);
  margin-left: calc(var(--space-md) * -1);
  display: flex;
  flex-wrap: wrap;
}

main > * {
  margin-bottom: var(--space-md);
  margin-left: var(--space-md);
}

article > * + * {
  margin-top: var(--space);
}

article {
  min-width: 60%;
  max-width: 80%;
}

.sidebar {
  --offset: var(--space);
  background-color: #fff;
  align-self: start;
  position: sticky;
  top: var(--offset);
}

.component {
  margin-bottom: .5rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  border: 1px solid var(#ddd);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.03),
    0 16px 32px rgba(0, 0, 0, 0.02), 0 32px 64px rgba(0, 0, 0, 0.02);
}

.component img {
    width: 4rem;
    height: 4rem;
}

.character-sheet {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.character-sheet input {
    margin-bottom: 1rem;
    max-width: 4rem;
    border: 2px solid;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bolder;
    padding: 0.5rem;
    transition: background-color 0.5s ease-out;
}

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

.character-sheet .stats .stat-container {
    width: 50%;
}

.fight {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
}