@font-face {
    font-family: "FiraMonoNerdMed";
    src: url("/fonts/FiraMonoNerdFontMono-Medium.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FiraMonoNerdReg";
    src: url("/fonts/FiraMonoNerdFontMono-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

html, body, pre {
    background: #282C34;
    color: transparent;
    user-select: none;
    pointer-events: none;
    font-family: 'FiraMonoNerdMed', monospace;
    padding: 2rem;
    margin: 0;
}

html {
    padding-top: 0;
}

body {
    position: relative;
    padding: 0;
}

code {
    font-family: 'FiraMonoNerdReg', monospace;
}

div.highlight *:not(.shown) {
    background-color: #282C34!important;
    color: transparent!important;
}

img:not(.shown) {
  visibility: hidden;
}

p {
  margin: 1rem 0;
  white-space: pre-wrap;
  display: block;
}

a {
  text-decoration: none;
  color: transparent;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  white-space: pre;
  display: block;
  font-size: 1em;
  margin: 1rem 0 0 0; 
}

h3, h4 {

  white-space: pre-wrap;
}

h1 + h2 { 
  margin-top: 0; 
}

h2:has(+ p) { 
  margin-right: 0.25rem; 
}

h2 + p { 
  margin-left: 0; 
  margin-top: 0; 
}

nav {
  margin-top: 1rem;
}

nav a {
  display: block;
  margin-left: 1rem;
  margin-bottom: 0.25rem;
}

#visual-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.caret::after {
  content: '█';
  display: inline;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

.header-wrapper { 
  color: #56B6C2; 
}

.header-link { 
  text-decoration: none; 
  margin: 0 0.25rem; 
}

.shown {
    user-select: text;
    pointer-events: auto;
}

p.shown, li.shown {
    color: #DCDFE4;
}

pre.shown {
    color: #E06C75; 
}

p>code.shown {
    color: #A6E22E;
}

pre>code.shown {
    color: #A6E22E;
}

blockquote p.shown {
    color: #CA72E4
}

a.shown {
    color: #D99A5E;
}

h1.shown { 
    color: #98C379;
}

h2.shown { 
    color: #E5C07B; 
}

h3.shown { 
    color: #CA72E4; 
}

h4.shown { 
    color: #E06C75; 
}