[data-demo] {
  padding: 1em 2em;
}

section,
#dark {
  display: flex;
  flex-flow: row wrap;
  gap: 16px;
}

#dark {
  padding: 1em 2em;
  margin-inline: -2em;
  margin-block: 1em;
}

#dark h2 {
  width: 100%;
}

section :is(p, h2,h3,h4,h5,h6) {
  width: 100%;
}

section.grid {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  margin-top: 0;
  margin-left: 0;
}

section.grid :is(h2,h3,h4,h5,h6) {
  grid-column: 1/-1;
}

.resize {
  resize: horizontal;
  overflow: auto;
  display: flex;
  width: 180px;
  flex-flow: row nowrap;
  border: 1px solid #dddddd;
  padding: 10px;
}

json-viewer {
  --json-viewer-background: white;
  --json-viewer-boolean-color: #f76707;
  --json-viewer-color: black;
  --json-viewer-key-color: #f76707;
  --json-viewer-null-color: Light #e03131;
  --json-viewer-number-color: #0ca678;
  --json-viewer-string-color: #0c8599;
}