:root {
  --col-window-bg: var(--col-content-bg);

  --window-title-bars: 7;
  --window-border: 2px solid var(--col-page-fg);
}

content-window {
  display: block;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  border: var(--window-border);
  background: var(--col-window-bg);
  box-shadow: 0.5em 0.5em var(--col-shadow);

  &>title-bar {
    display: block flex;
    place-content: center;
    background: repeating-linear-gradient(var(--col-window-bg) 0 calc(100% / var(--window-title-bars)),
        var(--col-page-fg) calc(100% / var(--window-title-bars)) calc(200% / var(--window-title-bars)));
    border-bottom: var(--window-border);

    &>h2 {
      font: inherit;
      padding: 0.25rem;
      background: var(--col-window-bg);
    }
  }

  &>window-content {
    display: block;
    padding: 0.25rem;
  }
}