html {
  font-size: clamp(16px, 0.9vw + 0.9rem, 20px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  --line-height: 1.5rem;
  background-color: #21222C;
  padding: 0;
  margin: 0;
  font-family: monospace;
  color: #F8F8F2;
  line-height: 1.5rem;
}

*::selection {
  color: #44475A;
  background-color: #F8F8F2;
}

html {
  padding: 0;
  margin: 0;
}

#wrap {
  width: 100%;
  resize: horizontal;
  overflow: auto;
  box-sizing: border-box;
  min-height: 100vh;
}

.page {
  padding: var(--line-height) 4ch var(--line-height) 4ch;
}

#main {
  padding-right: 1ch;
}

p {
  margin: 1.5rem 0px 1.5rem 0px;
  font-size: 1rem;
}

a {
  color: #8BE9FD;
  text-decoration: underline;
  line-height: 1.5rem;
  cursor: none;
  position: relative;
  display: inline-block;
}

a:hover {
  font-weight: bold;
}

hr {
  height: calc(1.5rem * 0.2);
  border: none;
  background-color: #44475A;
  margin-top: calc((1.5rem * 0.4));
  margin-bottom: calc((1.5rem * 0.4));
  width: 100%;
  cursor: none;
}

/*
a::before,
a::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

a::before {
  content: '>';
  left: 0;
  transform: translateX(-1ch);
}

a::after {
  content: '<';
  right: 0;
  transform: translateX(1ch);
}

a:hover::before,
a:hover::after {
  opacity: 1;
}
*/

b, strong {
  color: #FF5555;
}

h1, h2, h3, h4 {
  color: #6272A4;
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 1.5rem 0px 0px 0px;
}

img {
max-width: 100%;
}
svg {
height: auto;
max-width: 100%;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
code{white-space: pre-wrap;}

pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
/* background-color: #232629;*/
color: #7a7c7d;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #7a7c7d; padding-left: 4px; }
div.sourceCode
{ color: #cfcfc2; background-color: #333; padding: 10px; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span { color: #cfcfc2; } 
code span.al { color: #95da4c; background-color: #4d1f24; font-weight: bold; } 
code span.an { color: #3f8058; } 
code span.at { color: #2980b9; } 
code span.bn { color: #f67400; } 
code span.bu { color: #7f8c8d; } 
code span.cf { color: #fdbc4b; font-weight: bold; } 
code span.ch { color: #3daee9; } 
code span.cn { color: #27aeae; font-weight: bold; } 
code span.co { color: #7a7c7d; } 
code span.cv { color: #7f8c8d; } 
code span.do { color: #a43340; } 
code span.dt { color: #2980b9; } 
code span.dv { color: #f67400; } 
code span.er { color: #da4453; text-decoration: underline; } 
code span.ex { color: #0099ff; font-weight: bold; } 
code span.fl { color: #f67400; } 
code span.fu { color: #8e44ad; } 
code span.im { color: #27ae60; } 
code span.in { color: #c45b00; } 
code span.kw { color: #cfcfc2; font-weight: bold; } 
code span.op { color: #cfcfc2; } 
code span.ot { color: #27ae60; } 
code span.pp { color: #27ae60; } 
code span.re { color: #2980b9; background-color: #153042; } 
code span.sc { color: #3daee9; } 
code span.ss { color: #da4453; } 
code span.st { color: #f44f4f; } 
code span.va { color: #27aeae; } 
code span.vs { color: #da4453; } 
code span.wa { color: #da4453; }