html *, html *::before, html *::after {
  box-sizing: border-box;
}

body, #svelte {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
body {
  background: #D3CCE3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #E9E4F0, #D3CCE3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: black;
}
body[data-mode="dark"] {
  background: #0F2027;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: white;
}

#svelte {
  display: grid;
  grid-template-rows: 1fr 90% 1fr;
  grid-template-columns: 1fr 90% 1fr;
}
#svelte > * {
  grid-column: 2;
  grid-row: 2;
}

/* Basic editor styles */
.ProseMirror > * + * {
  margin-top: 0.75em;
}
.ProseMirror pre {
  background: #0d0d0d;
  color: #fff;
  font-family: 'JetBrainsMono', monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
.ProseMirror pre code {
  color: inherit;
  padding: 0;
  background: none;
  font-size: 0.8rem;
}
.ProseMirror pre .hljs-comment, .ProseMirror pre .hljs-quote {
  color: #616161;
}
.ProseMirror pre .hljs-variable, .ProseMirror pre .hljs-template-variable, .ProseMirror pre .hljs-attribute, .ProseMirror pre .hljs-attr, .ProseMirror pre .hljs-tag, .ProseMirror pre .hljs-name, .ProseMirror pre .hljs-regexp, .ProseMirror pre .hljs-link, .ProseMirror pre .hljs-name, .ProseMirror pre .hljs-selector-id, .ProseMirror pre .hljs-selector-class {
  color: #f98181;
}
.ProseMirror pre .hljs-number, .ProseMirror pre .hljs-meta, .ProseMirror pre .hljs-built_in, .ProseMirror pre .hljs-builtin-name, .ProseMirror pre .hljs-literal, .ProseMirror pre .hljs-type, .ProseMirror pre .hljs-params {
  color: #fbbc88;
}
.ProseMirror pre .hljs-string, .ProseMirror pre .hljs-symbol, .ProseMirror pre .hljs-bullet {
  color: #b9f18d;
}
.ProseMirror pre .hljs-title, .ProseMirror pre .hljs-section {
  color: #faf594;
}
.ProseMirror pre .hljs-keyword, .ProseMirror pre .hljs-selector-tag {
  color: #70cff8;
}
.ProseMirror pre .hljs-addition {
  color: #b7f3cb;
  background: #18833b;
}
.ProseMirror pre .hljs-deletion {
  color: #f1c3bc;
  background: #a3402e;
}
.ProseMirror pre .hljs-emphasis {
  font-style: italic;
}
.ProseMirror pre .hljs-strong {
  font-weight: 700;
}