body {
  background: var(--page-background);
  color: var(--text-color);
}

#root {
  padding: 2rem 0;
}

h2 {
  text-align: center;
}

.variable-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  justify-content: center;
  gap: 0.6rem;

  & > .variable-item {
    display: flex;
    flex-direction: row;
    gap: 0.6em;
    align-items: center;

    .color-box {
      flex: 0 0 30px;
      height: 30px;
    }

    .data {
      display: flex;
      flex-direction: column;
      flex: 1;

      .variable-name {
        font-weight: bold;
      }
    }
  }
}

.nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}