body {
  background-color: rgb(228, 237, 255);
  color: rgb(28, 40, 59);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  max-width: 750px;
  margin: auto;
}

a {
  color: rgb(106, 140, 191);
}

x3d-canvas {
  width: 768px;
  height: 432px;
}

/* Viewer */
@media (prefers-color-scheme: dark) {

  html:not([data-mode]),
  html[data-mode=dark] {
    --list-color: rgba(0, 0, 0, 0.1);
  }

  html[data-mode=light] {
    --list-color: rgba(0, 0, 0, 0.02);
  }
}

@media (prefers-color-scheme: light) {
  html[data-mode=dark] {
    --list-color: rgba(0, 0, 0, 0.1);
  }

  html:not([data-mode]),
  html[data-mode=light] {
    --list-color: rgba(0, 0, 0, 0.02);
  }
}

.viewer-row {
  display: flex;
  height: 80dvh;
}

.viewer-column1 {
  position: relative;
  flex: 80%;
  /* width: 80%; */
  height: 100%;
}

.viewer-column2 {
  flex: 20%;
  width: 20%;
  height: 100%;
  overflow-y: scroll;
  background-color: var(--list-color);
  padding: 1rem;
}

x3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}