/* Base */

.termlike {
  /* Typography */
  --font-size:   16px;
  --font-stack:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --line-height: 1.25;

  font-family: var(--font-stack);
  font-size: var(--font-size);
  line-height: var(--line-height);

  /* ----------
   * Colors
   * ---------- */
  --color-bg:        hsl(220, 13%, 9%);
  --color-bg-muted:  hsl(220, 13%, 18%);
  --color-bg-strong: hsl(220, 13%, 28%);

  --color-fg:        hsl(222, 14%, 71%);
  --color-fg-muted:  hsl(222, 9%, 48%);
  --color-fg-strong: hsl(222, 14%, 96%);

  --color-link:      hsl(233, 100%, 70%);
  --color-primary:   hsl(171, 100%, 41%);

  --color-info:      hsl(198, 100%, 70%);
  --color-success:   hsl(153, 53%, 53%);
  --color-warning:   hsl(42, 100%, 53%);
  --color-danger:   hsl(348, 100%, 70%);

  background-color: var(--color-bg);
  color: var(--color-fg);

  /* Spacings */
  --space-x: 1ch;
  --space-y: calc(var(--font-size) * var(--line-height));

  --space-1:   calc(var(--font-size) * var(--line-height));
  --space-1-2: calc(var(--space-1) / 2);
  --space-1-4: calc(var(--space-1) / 4);
  --space-1-8: calc(var(--space-1) / 8);

  /* ----------
   * Sizes
   * ---------- */
  --size-1:   calc(var(--font-size) * var(--line-height));
  --size-1-2: calc(var(--size-1) * 0.50);
  --size-1-4: calc(var(--size-1) * 0.25);
  --size-3-4: calc(var(--size-1) * 0.75);

  /* Other */
  --container-width: 70ch;
}

.termlike * {
  margin: 0;
}

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

.termlike ::-webkit-scrollbar {
  background: var(--color-bg);
}

.termlike ::-webkit-scrollbar-track {
  background: var(--color-bg);
}

.termlike ::-webkit-scrollbar-thumb {
  background: var(--color-bg-muted);
}

.termlike ::-webkit-scrollbar-thumb:hover {
  background: var(--color-bg-strong);
}

::-webkit-scrollbar-corner {
  background: var(--color-bg);
}

.termlike img,
.termlike picture,
.termlike video,
.termlike canvas,
.termlike svg {
  display: block;
  max-width: 100%;
}

.termlike input,
.termlike button,
.termlike textarea,
.termlike select {
  font: inherit;
}

.termlike p,
.termlike h1,
.termlike h2,
.termlike h3,
.termlike h4,
.termlike h5,
.termlike h6 {
  overflow-wrap: break-word;
}

.termlike p {
  text-wrap: pretty;
}

.termlike h1,
.termlike h2,
.termlike h3,
.termlike h4,
.termlike h5,
.termlike h6 {
  text-wrap: balance;
}

.termlike a {
  color: inherit;
  text-decoration: none;
} 

.termlike a:visited {
  color: inherit;
}

/* Components */
.termlike .container {
  width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-y) var(--space-x);
}

@media (max-width: 70ch) {
  .termlike .container {
    width: 100%;
  }
}

.termlike .box {

}

.termlike .placeholder {
  margin: 0 0 var(--space-y) 0;
}

.termlike .placeholder .placeholder-line {
  background: var(--color-bg-strong);
  border-radius: 2px;
  height: var(--font-size);
  width: 100%;
  margin: 0 0 calc((var(--line-height) - 1.0) * var(--font-size)) 0;
}

.termlike .placeholder .placeholder-line.short {
  width: 70%;
}

.termlike .placeholder .placeholder-line.shorter {
  width: 40%;
}

.termlike .title,
.termlike .content h1,
.termlike .content h2,
.termlike .content h3,
.termlike .content h4,
.termlike .content h5,
.termlike .content h6 {
  color: var(--color-fg-strong);
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
}

.termlike .content h1,
.termlike .content h2,
.termlike .content h3,
.termlike .content h4,
.termlike .content h5,
.termlike .content h6 {
  margin: 0 0 var(--space-y) 0;
}

.termlike .text,
.termlike .content p {
  font-size: 1em;
  font-weight: normal;
  margin: 0 0 var(--space-y) 0;
}

.termlike .link,
.termlike a.link:visited,
.termlike .content a,
.termlike .content a:visited {
  color: var(--color-link);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-link);
}

.termlike .link:focus-visible,
.termlike .content a:focus-visible {
  outline: 1px solid var(--color-primary);
  outline-offset: 2px;
}

.termlike .code,
.termlike .content code {
  color: var(--color-fg-strong);
}

.termlike .code,
.termlike .content code::before {
  content: '`';
}

.termlike .code,
.termlike .content code::after {
  content: '`';
}

/* Lists */
.termlike ul.list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.termlike .content ul,
.termlike .content ol {
  margin: 0 0 var(--space-y) 3ch;
  padding: 0;
}

.termlike ul.list li,
.termlike ol.list li {
  margin: 0;
  padding: 0;
}


.termlike .content ul li,
.termlike .content ol li {
  margin: 0 0 var(--space-y) 0;
  padding: 0;
}

.termlike .content ul li:last-child,
.termlike ul.list li:last-child {
  /*margin: 0px;*/
}

/* Code */
.termlike pre {
  /*margin-top: var(--space-y);*/
  margin-bottom: calc(var(--space-y) * 2);
  margin-left: 0;
  margin-right: 2ch;
  border: 1px solid var(--color-bg-strong);
  padding: var(--space-y) 2ch;
  box-shadow: 2ch 2ch 0 0 var(--color-bg-strong);
}

.termlike code {
  font-family: var(--font-stack);
  font-size: var(--font-size);
}

/* ----------
 * Button
 * ---------- */
.termlike button,
.tl-button {
  border: none;
  appearance: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.termlike button:focus-visible,
.tl-button:focus-visible {
  outline: 1px solid var(--color-primary);
  /*outline-offset: 2px;*/
}

.termlike button:disabled,
.tl-button:disabled {
  color: var(--color-fg-muted);
}

/* ----------
 * Input
 * ---------- */
.termlike input,
.tl-input {
  border: none;
  appearance: none;
  background: none;
  color: inherit;
  padding: 0 var(--space-1-4);
  margin: 0;
  font: inherit;
}

.termlike input:focus,
.tl-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.termlike input:focus-visible,
.tl-input:focus-visible {
  outline: 1px solid var(--color-primary);
  border: none;
  box-shadow: none;
}

.termlike input::placeholder,
.tl-input::placeholder {
  font: inherit;
  color: var(--color-fg-muted);
}

/* Card component */
.card {
  margin-top: 0;
  margin-bottom: 3.5ch;
  margin-left: 0;
  margin-right: 1.5ch;

  padding: 2ch;

  border: 1px solid var(--color-bg-strong);
  border-radius: 2px;
  box-shadow: 1.5ch 1.5ch 0 var(--color-bg-strong);
}

.card code {
  background: none !important;
}

/* ----------
 * Textarea
 * ----------*/
.termlike textarea {
  border: none;
  color: var(--color-fg);
  background-color: var(--color-bg);
  padding: 0 var(--space-1-2);
}

/* ----------
 * Spacings
 * ---------- */
.termlike .m-0   { margin: 0; }
.termlike .m-1   { margin: var(--space-1); }
.termlike .m-1-2 { margin: var(--space-1-2); }
.termlike .m-1-4 { margin: var(--space-1-4); }

.termlike .mx-0   { margin-left: 0; margin-right: 0; }
.termlike .mx-1   { margin-left: var(--space-1); margin-right: var(--space-1); }
.termlike .mx-1-2 { margin-left: var(--space-1-2); margin-right: var(--space-1-2); }
.termlike .mx-1-4 { margin-left: var(--space-1-4); margin-right: var(--space-1-4); }

.termlike .my-0   { margin-top: 0; margin-bottom: 0; }
.termlike .my-1   { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.termlike .my-1-2 { margin-top: var(--space-1-2); margin-bottom: var(--space-1-2); }
.termlike .my-1-4 { margin-top: var(--space-1-4); margin-bottom: var(--space-1-4); }

.termlike .mt-0   { margin-top: 0; }
.termlike .mt-1   { margin-top: var(--space-1); }
.termlike .mt-1-2 { margin-top: var(--space-1-2); }
.termlike .mt-1-4 { margin-top: var(--space-1-4); }

.termlike .mb-0   { margin-bottom: 0; }
.termlike .mb-1   { margin-bottom: var(--space-1); }
.termlike .mb-1-2 { margin-bottom: var(--space-1-2); }
.termlike .mb-1-4 { margin-bottom: var(--space-1-4); }

.termlike .ml-0   { margin-left: 0; }
.termlike .ml-1   { margin-left: var(--space-1); }
.termlike .ml-1-2 { margin-left: var(--space-1-2); }
.termlike .ml-1-4 { margin-left: var(--space-1-4); }

.termlike .mr-0   { margin-right: 0; }
.termlike .mr-1   { margin-right: var(--space-1); }
.termlike .mr-1-2 { margin-right: var(--space-1-2); }
.termlike .mr-1-4 { margin-right: var(--space-1-4); }

.termlike .p-0   { padding: 0; }
.termlike .p-1   { padding: var(--space-1); }
.termlike .p-1-2 { padding: var(--space-1-2); }
.termlike .p-1-4 { padding: var(--space-1-4); }
.termlike .p-1-8 { padding: var(--space-1-8); }

.termlike .px-0   { padding-left: 0; padding-right: 0; }
.termlike .px-1   { padding-left: var(--space-1); padding-right: var(--space-1); }
.termlike .px-1-2 { padding-left: var(--space-1-2); padding-right: var(--space-1-2); }
.termlike .px-1-4 { padding-left: var(--space-1-4); padding-right: var(--space-1-4); }

.termlike .py-0   { padding-top: 0; padding-bottom: 0; }
.termlike .py-1   { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.termlike .py-1-2 { padding-top: var(--space-1-2); padding-bottom: var(--space-1-2); }
.termlike .py-1-4 { padding-top: var(--space-1-4); padding-bottom: var(--space-1-4); }

.termlike .pt-0   { padding-top: 0; }
.termlike .pt-1   { padding-top: var(--space-1); }
.termlike .pt-1-2 { padding-top: var(--space-1-2); }
.termlike .pt-1-4 { padding-top: var(--space-1-4); }

.termlike .pb-0   { padding-bottom: 0 !important; }
.termlike .pb-1   { padding-bottom: var(--space-1) !important; }
.termlike .pb-1-2 { padding-bottom: var(--space-1-2) !important; }
.termlike .pb-1-4 { padding-bottom: var(--space-1-4) !important; }

.termlike .pl-0   { padding-left: 0; }
.termlike .pl-1   { padding-left: var(--space-1); }
.termlike .pl-1-2 { padding-left: var(--space-1-2); }
.termlike .pl-1-4 { padding-left: var(--space-1-4); }

.termlike .pr-0   { padding-right: 0; }
.termlike .pr-1   { padding-right: var(--space-1); }
.termlike .pr-1-2 { padding-right: var(--space-1-2); }
.termlike .pr-1-4 { padding-right: var(--space-1-4); }

/* ---------
 * Text utilities
 * --------- */
.termlike .text-default { color: var(--color-fg); }
.termlike .text-invert  { color: var(--color-bg); }
.termlike .text-muted   { color: var(--color-fg-muted); }
.termlike .text-strong  { color: var(--color-fg-strong); }
.termlike .text-primary { color: var(--color-primary); }
.termlike .text-info    { color: var(--color-info); }
.termlike .text-link    { color: var(--color-link); }


.termlike .text-left   { text-align: left; }
.termlike .text-center { text-align: center; }
.termlike .text-right  { text-align: right; }

.termlike .capitalize    { text-transform: capitalize; }
.termlike .lowercase     { text-transform: lowercase; }
.termlike .uppercase     { text-transform: uppercase; }
.termlike .no-decoration { text-decoration: none; }

.termlike .font-normal { font-weight: 400; }
.termlike .font-bold   { font-weight: 700; }

/* ----------
 * Size utilities
 * ---------- */
.termlike .w-1    { width: var(--size-1); }
.termlike .w-1-2  { width: var(--size-1-2); }
.termlike .w-1-4  { width: var(--size-1-4); }
.termlike .w-3-4  { width: var(--size-3-4); }
.termlike .w-full { width: 100%; }

.termlike .h-1    { height: var(--size-1); }
.termlike .h-1-2  { height: var(--size-1-2); }
.termlike .h-1-4  { height: var(--size-1-4); }
.termlike .h-3-4  { height: var(--size-3-4); }
.termlike .h-full { height: 100%; }

.termlike .size-1   { width: var(--size-1); height: var(--size-1); }
.termlike .size-1-2 { width: var(--size-1-2); height: var(--size-1-2); }
.termlike .size-1-4 { width: var(--size-1-4); height: var(--size-1-4); }
.termlike .size-3-4 { width: var(--size-3-4); height: var(--size-3-4); }

/* ----------
 * Flexbox utilities
 * ---------- */
.termlike .flex-1              { flex: 1 1 0%; }
.termlike .flex                { display: flex; }

.termlike .flex.row            { flex-direction: row; }
.termlike .flex.col            { flex-direction: column; }

.termlike .flex.justify-start   { justify-content: flex-start; }
.termlike .flex.justify-end     { justify-content: flex-end; }
.termlike .flex.justify-center  { justify-content: center; }
.termlike .flex.justify-between { justify-content: space-between; }
.termlike .flex.justify-around  { justify-content: space-around; }
.termlike .flex.justify-evenly  { justify-content: space-evenly; }

.termlike .flex.items-start    { align-items: flex-start; }
.termlike .flex-items-end      { align-items: flex-end; }
.termlike .flex.items-center   { align-items: center; }
.termlike .flex.items-baseline { align-items: baseline; }
.termlike .flex.items-stretch  { align-items: stretch; }

.termlike .flex.content-start   { align-content: flex-start; }
.termlike .flex.content-end     { align-content: flex-end; }
.termlike .flex.content-center  { align-content: center; }
.termlike .flex.content-between { align-content: space-between; }
.termlike .flex.content-around  { align-content: space-around; }
.termlike .flex.content-stretch { align-content: stretch; }

.termlike .flex.wrap           { flex-wrap: wrap; }
.termlike .flex-nowrap         { flex-wrap: nowrap; }
.termlike .flex.wrap-reverse   { flex-wrap: reverse; }

.termlike .gap-1   { gap: var(--space-1); }
.termlike .gap-1-2 { gap: var(--space-1-2); }
.termlike .gap-1-4 { gap: var(--space-1-4); }

.termlike .grow     { flex-grow: 1; }
.termlike .grow-0   { flex-grow: 0; }
.termlike .grow-1   { flex-grow: 1; }
.termlike .shrink   { flex-shrink: 1; }
.termlike .shrink-0 { flex-shrink: 0; }
.termlike .shrink-1 { flex-shrink: 1; }

.termlike .basis-1    { flex-basis: 100%; }
.termlike .basis-1-2  { flex-basis: 50%; }
.termlike .basis-1-3  { flex-basis: 33.333%; }
.termlike .basis-1-4  { flex-basis: 25%; }
.termlike .basis-1-5  { flex-basis: 20%; }
.termlike .basis-1-8  { flex-basis: 12.5%; }
.termlike .basis-1-16 { flex-basis: 6.25%; }

/* ----------
 * Misc utilities
 * ---------- */
.termlike .bg-default { background-color: var(--color-bg); }
.termlike .bg-invert  { background-color: var(--color-fg); }
.termlike .bg-primary { background-color: var(--color-primary); }
.termlike .bg-success { background-color: var(--color-success); }
.termlike .bg-warning { background-color: var(--color-warning); }
.termlike .bg-danger  { background-color: var(--color-danger); }

.termlike .hidden       { display: none; }
.termlike .block        { display: block; }
.termlike .inline       { display: inline; }
.termlike .inline-block { display: inline-block; }

.termlike .relative     { position: relative; }
.termlike .absolute     { position: absolute; }

.termlike .resize-none { resize: none; }
.termlike .resize-both { resize: both; }

.termlike .border-b    { border-bottom: 1px solid var(--color-bg-strong); }
.termlike .border-none { border: none; }
.termlike .divide-y:not(:last-child) { border-bottom: 1px solid var(--color-bg-strong); }

/* Addons */
.termlike .add-prompt {

}

.termlike .prompt::before {
  content: '> ';
  /*margin-left: calc(var(--space-x) * 2 * -1);*/
}

.termlike .hashtag::before {
  color: var(--color-link);
  content: '# ';
  /*margin-left: calc(var(--space-x) * 2 * -1);*/
}

/* Rouge Dark Theme (GitHub Dark Style) */

.termlike .language-c:before,
.termlike .language-cpp:before,
.termlike .language-ruby:before,
.termlike .language-js:before,
.termlike .language-html:before,
.termlike .language-css:before {
  background-color: var(--color-bg-strong);
  padding: 2px 6px;
}

.termlike .language-c:before { content: 'C'; }
.termlike .language-cpp:before { content: 'C++'; }
.termlike .language-ruby:before { content: 'Ruby'; }
.termlike .language-js:before { content: 'JavaScript' }
.termlike .language-html:before { content: 'HTML' }
.termlike .language-css:before { content: 'CSS' }

.termlike .highlight { overflow-x: auto; }
.termlike .highlight pre { white-space: pre-wrap; }

.termlike .highlight .c { color: #8b949e; font-style: italic; }
.termlike .highlight .err { color: #f85149; background-color: #0d1117; }
.termlike .highlight .k { color: var(--color-primary); }
.termlike .highlight .o { color: var(--color-fg); }
.termlike .highlight .cm,
.termlike .highlight .cp,
.termlike .highlight .c1,
.termlike .highlight .cs { color: var(--color-fg-muted); }
.termlike .highlight .gd { color: #ffa198; background-color: #490202; }
.termlike .highlight .gh { color: #79c0ff; font-weight: bold; }
.termlike .highlight .gi { color: #56d364; background-color: #0d1117; }
.termlike .highlight .go { color: #8b949e; }
.termlike .highlight .gp { color: #8b949e; font-weight: bold; }
.termlike .highlight .gs { font-weight: bold; }
.termlike .highlight .gu { color: #79c0ff; }
.termlike .highlight .kc,
.termlike .highlight .kd,
.termlike .highlight .kn,
.termlike .highlight .kp,
.termlike .highlight .kr,
.termlike .highlight .kt { color: var(--color-primary); }
.termlike .highlight .m { color: #79c0ff; }
.termlike .highlight .s { color: var(--color-info); }
.termlike .highlight .n { color: var(--color-warning); }
.termlike .highlight .na { color: #d2a8ff; }
.termlike .highlight .nb { color: #c9d1d9; }
.termlike .highlight .nc { color: #ffa657; font-weight: bold; }
.termlike .highlight .no { color: #79c0ff; }
.termlike .highlight .nd { color: #d2a8ff; }
.termlike .highlight .ni { color: #ffa657; }
.termlike .highlight .ne { color: #f85149; font-weight: bold; }
.termlike .highlight .nf { color: var(--color-warning); }
.termlike .highlight .nl { color: var(--color-primary); }
.termlike .highlight .nn { color: #ff7b72; }
.termlike .highlight .nt { color: #7ee787; }
.termlike .highlight .nv { color: #79c0ff; }
.termlike .highlight .ow { color: #ff7b72; }
.termlike .highlight .p { color: var(--color-fg); }
.termlike .highlight .py { color: #79c0ff; }
.termlike .highlight .sb,
.termlike .highlight .sc,
.termlike .highlight .sd,
.termlike .highlight .s2,
.termlike .highlight .se,
.termlike .highlight .sh,
.termlike .highlight .si,
.termlike .highlight .sx,
.termlike .highlight .sr,
.termlike .highlight .ss { color: #a5d6ff; }
.termlike .highlight .bp { color: #c9d1d9; }
.termlike .highlight .vc,
.termlike .highlight .vg,
.termlike .highlight .vi { color: #79c0ff; }
.termlike .highlight .w { color: #c9d1d9; }
.termlike .highlight .cpf { color: var(--color-info); }