:root {
    --bg-0:  #fffcf5;
    --fg-0:  #282828;
    --url:   #c29b76;

    --code-bg-0:     #fdfdf9;    
    --code-fg-0:     #504945;     
    --code-macro:    #5c4a9e;     
    --code-builtin:  #3c3836;     
    --code-keyword:  #b57614;  
    --code-string:   #9d515a;   
    --code-comment:  #928374;     
    --code-type:     #af7a3f;    
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-0:  #282828; 
        --fg-0:  #fffcf5;
        --url:   #c29b76;

        --code-bg-0: #303030;
        --code-fg-0: #d4be98;
        --code-macro: #efe9ff;
        --code-builtin: #f3f3f3; 
        --code-keyword: #ffd787; 
        --code-string: #d3869b; 
        --code-comment: #999999; 
        --code-type: #ffd7ae; 
    }
}

@font-face {
    font-family: "EB Garamond";
    src:         url("EBGaramond-VariableFont_wght.ttf");
    font-style:  normal;
    font-weight: normal;
}

@font-face {
    font-family: "EB Garamond";
    src:         url("EBGaramond-Italic-VariableFont_wght.ttf");
    font-style:  italic;
    font-weight: normal;
}

html {
    font-family: "EB Garamond";
    font-size:   18px;

    background-color: var(--bg-0);
    color:            var(--fg-0);
    width:  100%;
}

header ul {
    display: flex;
    margin: 1em 0 0 0;
    padding: 0;
}

header ul > li {
    margin-left: 1em;
    list-style-type: none;
}

li {

}

a, a:visited {
    color: var(--url);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p {
    margin: auto;
    text-align: justify;
    text-justify: inter-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

    font-size:   1.1rem;
    line-height: 1.5rem;
}

main {
  width: 60%;
}

body {
  width:        87.5%;
  padding-left: 12.5%;
  max-width:    1200px;

  counter-reset: note-counter;
}

.note {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  font-size: 0.9em;

  line-height: 1rem;
}

.note:before {
    content: counter(note-counter);
    position: relative;
    vertical-align: baseline;
    bottom: 0.5em;
    font-size: 0.8em;
    color: var(--url);
}

.note-number {
    counter-increment: note-counter;
    font-size: 0.6em;
    color: var(--url);
}

label.note-number {
    margin-left: -0.1em;
    display: inline-block;
    max-height: 2em;
}

.note-number:before, .note-number:after {
    position: relative;
    vertical-align: baseline;
    bottom: 0.35em;
    margin-left: 0.15em;
}

.note-number:before {
    content: counter(note-counter);
    cursor:  pointer;
    margin-right: -0.3em;
}

.note-toggle {
    display: none;
}

@media only screen and (max-width: 1200px) {
  body {
    width:         84%;
    padding-left:  8%;
    padding-right: 8%;
  }
  main {
    width: 100%;
  }

  .note {
      display: none;
      float: none;
      width: 90%;
      margin: 1rem 1rem;
      line-height: 1rem;
  }

  .note-toggle:checked + .note {
      display: block;
  }

  ul ul {
      padding-left: 0.5rem;
  }
}

code {
    font-size: 0.8em;
}

/* Code highlighting */
code.hljs {
    margin: auto;
    width: 87.5%;

    box-shadow: 0px 0px 5px rgba(0%, 0%, 0%, 10%);
}

.hljs {
    font-family: monospace;
    color:      var(--code-fg-0);
    background: var(--code-bg-0);
    padding: 0.5em;
    display: block;
    white-space: pre;
    overflow-x: auto;
}

.hljs-meta{
    color: var(--code-macro);
    font-weight: 700;
}

.hljs-builtin
{
    color: var(--code-builtin);
}

.hljs-keyword
{
    color: var(--code-keyword);
    font-weight: 800;
}

.hljs-type
{
    color: var(--code-type);
    font-weight: bold;
}

.hljs-string {
    color: var(--code-string);
}

.hljs-comment {
    color: var(--code-comment);
}