src/pages/rules-reference/rules-reference.css
.rules {
  --red: var(--nord-11);
  --blue: var(--nord-9);
}

html[data-theme="light"] .rules {
  --blue: var(--nord-10);
}

.rules .row {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  max-width: 80ch;
  margin: 0 auto;
}

.rules .col-md-4 {
  background: var(--palette-point-five);
  border-radius: var(--rounded);
  padding: 0.5rem;
  border: 1px solid var(--palette-1);
  position: relative;
}

.rules #rop {
  font-size: var(--text-xl);
}

.rules .rop {
  margin-top: 0.5rem;
}

.rules .rop * + * {
  margin-top: 0.5rem;
}

.rules .rop ul {
  list-style-type: disc;
  padding-left: 0.5rem;
  margin-left: 1rem;
}

.rules #rop-nav {
  background: var(--palette-0);
  text-align: center;
  position: sticky;
  top: 0;
  padding: 0.25rem;
  display: flex;
  flex-flow: row wrap;
  gap: 0.375rem;
}

.rules #rop-nav .button {
  display: inline-flex;
  gap: 0.125rem;
  background: var(--palette-1);
  padding: 0.1875rem 0.375rem;
  border-radius: var(--rounded);
  border: 1px solid var(--palette-2);
  font-size: var(--text-base);
  text-decoration: none;
}

#rules > div > * + * {
  margin-top: 1rem;
}

#rules .green {
  background: var(--nord-14);
  color: var(--nord-0);
}

#rules .red {
  background: var(--nord-11);
  color: var(--nord-0);
}

#rules a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-style: dotted;
}

#rules .chart th,
#rules .chart td {
  padding: 0.375rem;
}

#rules .chart th {
  background-color: var(--palette-1);
}

@media screen and (min-width: 55rem) {
  .rules .main {
    padding-inline: 2rem;
  }

  .rules .row {
    flex-flow: row nowrap;
    gap: 2rem;
    max-width: 140ch;
    margin: 0 auto;
  }

  .rules .col-md-4 {
    flex: 0 0 33.3333%;
    max-height: 80dvh;
    overflow: auto;
    position: sticky;
    top: 0.25rem;
  }

  .rules .col-md-8 {
    flex: 0 0 calc(66.6667% - 2rem);
  }

  .rules #rop-nav {
    text-align: left;
  }
}
