body {
  margin: 1em;
  /* font-size: 16px; */
}

p, ul, ol, nav, footer {
  line-height: 1.5;
}

p {
  text-align: justify;

  /* https://clagnut.com/blog/2395/ */
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;

  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 1em;
}

#content-html {
    flex: 1;
    width: 50%;
    max-width: 65ch;
    border: 0;
}

#content-md {
    flex: 1;
    width: 50%;
    overflow: hidden;
    resize: none;
    border: 0;
}

/* code { */
/*   padding: 0.1em; */
/* } */

textarea {
  color: gray;
  resize: none;
  overflow-y: scroll;
  font-family: monospace !important;
}

textarea:not([rows]) {
  min-height: 10em;
}

/* TODO: https://www.reasonable.work/colors/#colors */
* {
  --white: #ffffff;
  --gray: #fefefe;
  --black: #000000;
}

/*
https://www.joshwcomeau.com/css/custom-css-reset/
https://piccalil.li/blog/a-more-modern-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}
#root, #__next {
  isolation: isolate;
}
img, picture, video {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
input, button, select {
  font: inherit;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
}