:root {
  --main-color: #492376;
  --main-high: #612f9d;
  --focus: #6b9d2f;
  --gray-20: hsl(201, 15%, 20%);
  --sp: 1.125rem;
}
body {
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  margin: 0 auto;
  padding: calc(2 * var(--sp));
  background: #fff;
  color: var(--gray-20);
  max-width: 1450px;
  font-size: clamp(0.85em, 0.4167vw + 0.78em, 1em);
  line-height: 1.6875;
}
a { color: var(--main-high); text-decoration-thickness: 1px; }
a:hover, a:focus { text-decoration-thickness: 3px; }
a:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 2em; font-weight: normal; }
h2 { font-size: 1.6em; font-weight: normal; margin-top: calc(2.5 * var(--sp)); border-bottom: 1px solid var(--main-color); padding-bottom: 0.3rem; color: var(--main-color); }
h3 { font-size: 1.2em; font-weight: normal; margin-top: calc(2 * var(--sp)); color: var(--main-color); }
hr { border: none; border-top: 1px solid #ddd; margin: calc(2 * var(--sp)) 0; }
table { border-collapse: collapse; width: 100%; margin: var(--sp) 0; }
th, td { text-align: left; padding: 0.45rem 0.75rem; border: 1px solid #ddd; }
th { background: var(--main-color); color: #fff; font-weight: normal; }
tr:nth-child(even) { background: #f7f5fa; }
td:first-child { font-weight: bold; }
code { background: #f0ecf5; color: var(--main-color); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.9em; }
pre { background: var(--gray-20); color: #f0ecf5; padding: var(--sp); overflow-x: auto; border-radius: 3px; font-size: 0.85em; line-height: 1.5; }
pre code { background: none; color: inherit; padding: 0; border-radius: 0; font-size: inherit; }
blockquote { border-left: 3px solid var(--main-color); margin: var(--sp) 0; padding: 0.3rem calc(1.5 * var(--sp)); color: #555; }
strong { color: var(--main-color); }