/* ==========================================================================
Variables
========================================================================== */

:root {
  --grid-color: cyan;
  --line-height: 26px;
  --bg-color: #262114;
  --fg-color: #ffffff;
  --color-1: #2a3740;
  --color-2: navy;
  --color-3: orangered;
  --color-4: #d7d9d8;
  --color-5: mistyrose;
}





/* ==========================================================================
Resets
========================================================================== */

a {
  color: var(--color-3);
  text-decoration: none;
}

a:hover{
    text-shadow:var(--color-3) 3px 0 5px;
}

a:hover img {
    filter: drop-shadow(0px 0px 20px var(--color-3));
}





/* ==========================================================================
helpers
========================================================================== */

.baseline {
  background-attachment: local;
  background-size: 100% var(--line-height);
  background-position: 0 -1px;
  background-image: linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}





/* ==========================================================================
Fonts
========================================================================== */

@font-face {
  font-family: 'DINdong';
  src: url('../fonts/DINdong.woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CirrusCumulus';
  src: url('../fonts/CirrusCumulus.woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CutiveMono';
  src: url('../fonts/CutiveMono-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}



body {
    font-family: "DINdong";
    /*background: repeating-conic-gradient(#CCF 76deg 23%, white 0deg 45%, #EAEAEA 21deg 42%);*/
    font-size: var(--font-size);
    line-height: var(--line-height);
    background-size: 40px 40px;
}

#toc {
    text-align: center;
    border-bottom: 3px solid black;
    margin-bottom: var(--line-height);
    margin-top: -1px;
}
.toc_item {
    border-top: 0 !important;
    margin-bottom: calc(0.5*var(--line-height));
    margin: 0 !important;
}
.toc_item a { 
    border-top: 1px solid black;
    display: inline-block;
    background: radial-gradient(white, transparent);

}
#menu {
    padding: var(--line-height);
}
article {
    background: linear-gradient(-90deg, white 70%, transparent 100%);
    padding: 1.25em;
    font-size: 1.25em;
}
.article {
    padding-bottom: calc(15 * var(--line-height)) !important;
}

.headerlink {
    color: blue;
    font-weight: normal;
}

h1 {
    font-size: 2em;
    color: var(--color-2);
    clear: both;
    margin-bottom: calc(2 * var(--line-height));
}
h1:not(:first-child) {
    margin-top: calc(2 * var(--line-height));
}
h2 {
  color: var(--color-2);
    text-transform: uppercase;
  padding-top: calc(2 * var(--line-height));
  margin-bottom: var(--line-height);
    border-bottom: 2px solid var(--color-3);
    position: relative;
    clear: both;
}
h2:after {
    content: "";
    background-image: linear-gradient(0deg, transparent, white);
    height: 400px;
    display: block;
    width: 100%;
    position: absolute;
    top: -0.5em;
    z-index: -1000;
    float: left;
}

h3 {
  color: var(--color-2);
    text-transform: uppercase;
    /*text-decoration: underline;*/
    display: table;
    border-bottom: 2px solid var(--color-3);
    padding-bottom: calc(0.5 * var(--line-height)) ;
    margin-top: calc(4 * var(--line-height));
    margin-bottom: var(--line-height);
    clear: both;
}
h4, h5, h6 {
    border-bottom: 2px solid var(--color-2);
    padding-bottom: calc(0.5 * var(--line-height)) ;
    display: table;
    margin-top: calc(2 * var(--line-height));
    margin-bottom: calc(1 * var(--line-height)) ;
    clear: both;
}
header h1 {
    font-size: 1em;
    color: var(--bg-color);
    margin-top: 5px;
    margin-bottom: 0;
}

em {
    font-style: italic;
}

p {
    max-width: 40em;
    font-variant-ligatures: common-ligatures;
}

table {
    margin: var(--line-height) 0;
}
th, td {
    outline: 1px solid var(--color-1);
    padding: calc(0.5 * var(--line-height));
}
th {
    /*color: var(--color-3);*/
    text-transform: uppercase;
}
figure {
    float: left;
    padding-top: var(--line-height);
    padding-bottom: var(--line-height);
    max-width: 25% !important;
}
figcaption {
    clear: both;
    text-align: center;
}

figure + figure {
    margin-left: var(--line-height);
}

img {
    margin-top: var(--line-height);
    margin-bottom: var(--line-height);
    margin-left: auto;
    margin-right: auto;
    max-height: 13em;
}

figure a {
    display: flex;
}

figure + h1,
figure + h2,
figure + h3,
figure + h4,
figure + h5,
figure + h6,
figure + dl,
figure + dt,
figure + p {
    padding-top: var(--line-height);
    clear: both;
}

details {
    margin-bottom: var(--line-height);
    background-color: white;
    padding: var(--line-height);
}

.clear {
    clear: both;
    height: 0;
    line-height: 0;
    padding-top: var(--line-height);
}

code {
    font-family: CutiveMono;
    position: relative;
    top: -1px;
    line-height: 0;
    font-size: 1em;
}
pre {
    font-family: CutiveMono;
    font-size: 1em;
    margin: calc(2 * var(--line-height)) 0;
    background-color: var(--color-5);
    padding: var(--line-height);
    white-space: pre-wrap;
}
pre span {
    display: none;
}

hr {
    clear: both;
    border: 0;
    height: 0;
    display: none;
}
hr + hr {
    clear: both;
    height: var(--line-height);
    border-top: 1px solid var(--color-1);
    display: block;
}

.article__content h1:first-child {
    margin-top: 0;
}

blockquote {
    border: 2px solid var(--color-1);
    padding: calc(1.5 * var(--line-height));
    margin: calc(2 * var(--line-height)) calc(3 * var(--line-height)) !important;
    clear: both;
}

blockquote footer {
    font-style: normal;
    color: var(--color-2);
}
blockquote footer:before {
    content: "💏💏💏💏💏";
    display: block;
}

details {
    clear: both;
    margin-top: calc(2 * var(--line-height));
}

summary::marker {
    color: var(--color-3);
}
summary {
    text-transform: uppercase;
    color: var(--color-3);
    letter-spacing: 3px;
}
details p {
    margin-left: calc(2 * var(--line-height));
}

dt {
    margin-top: var(--line-height);
}
dt:before {
    content: '• ';
    color: var(--color-3);
}
dd:before {
    margin-left: var(--line-height);
    content: '→ ';
}

iframe {
    margin-top: calc(2 * var(--line-height));
    margin-bottom: calc(2 * var(--line-height));
    margin-left: auto;
    margin-right: auto;
    display: flex;
    
}

video {
    margin-top: calc(2 * var(--line-height));
    margin-bottom: calc(2 * var(--line-height));
}

iframe.website {
    width: 900px;
    height: 600px;
}
.instagram-media {
   float: left;
   margin-right: var(--line-height) !important;
   margin-bottom: var(--line-height) !important;
   height: 466px;
}

.videowrapper.youtube iframe {
    width: 600px;
    height: 400px;
}


/* ==========================================================================
Layout
========================================================================== */

/* .page { display: flex; } */

/* .page__sidebar { flex-basis: 400px; } */

/* .page__main { border-right: 1px solid; } */

/* .main__header, */
/* .main__content { */
/*   max-width: 800px; */
/*   position: relative; */
/* } */

.page__main {
  display: flex;
  gap: 1rem;
}

.page__treenav {
  align-self: flex-start;
  position: sticky;
  top: 0;
}

/* .page__treenav { width: 500px; } */

.article {
  /* display: flex; */
  /* gap: 1rem; */
  padding: 1rem;
}

.article__header {
  /* flex-grow: 1; */
  /* min-width: 40%; */
}
.article ul {
    margin-top: var(--line-height);
    margin-bottom: var(--line-height);
}
.article ul li:before {
    content: "– ";
}






/* ==========================================================================
General
========================================================================== */

:root {
    --font-size: 21px;
    font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--bg-color);
}

body {
  font-variant-ligatures: common-ligatures;
  scroll-behavior: smooth;
}






/* ==========================================================================
header
========================================================================== */

.header {
  text-align: center;
  font-size: 2.5rem;
  display: flex;
  width: 100%;
  border-bottom: 4px solid;
  margin-bottom: 0;
}

.header__title {
  padding: 1rem;
  flex-grow: 1;
  line-height: 0.8;
  text-align: left;
  /* transform: skewY(-5deg); */
}

.header__title a {
  margin-right: 0.5em;
  letter-spacing: -4px;
}

.header__menu { display: flex; }

.header__section {
  width: 50%;
  padding: 1rem;
  border-left: 4px solid;
}


/* .header { */
/*   background-color: var(--bg-color); */
/*   color: white; */
/*   font-size: calc(var(--line-height) * 2); */
/*   line-height: calc(var(--line-height) * 2); */
/*   text-align-last: justify; */
/*   text-transform: uppercase; */
/*   padding: 1em; */
/* } */

/* .menu { color: white; } */

/* .menu li { */
/*   display: block; */
/*   padding: 0.25em; */
/*   background-color: var(--bg-color); */
/*   text-transform: uppercase; */
/*   text-align: center; */
/* } */

/* .menu li.active { */
/*   background-color: white; */
/*   color: var(--bg-color); */
/* } */

/* .menu li img { */
/*   display: block; */
/*   width: 200px; */
/*   margin: auto; */
/*   margin-bottom: 1em; */
/*   filter: grayscale(100%); */
/* } */

/* .menu li { font-size: 1.4rem; } */

/* .menu li li { */
/*   font-size: 1rem; */
/*   letter-spacing: 0.2em; */
/* } */

/* .menu li li li { letter-spacing: 0em; } */


/* .menu li li ul li { width: 50%; } */





/* .main { */
/*   /1* overflow-y: auto; *1/ */
/*   padding: 1em; */
/*   box-sizing: border-box; */
/*   column-gap: calc(var(--line-height) * 2); */
/*   hyphens: auto; */
/*   text-align: justify; */
/*   hyphenate-limit-chars: 5 3 2; */
/* } */

/* .main__header { */
/*   padding-bottom: 1rem; */
/*   margin-bottom: 1rem; */
/*   border-bottom: 1px solid; */
/* } */

/* body { */
/*     color: var(--color-3); */
/*     background-color: var(--color-1); */
/* } */

/* header { */
/*     text-align: center; */
/*     font-size: 3rem; */
/*     line-height: 1.5; */
/*     color: var(--color-4); */
/*     background-color: var(--color-3); */
/* } */

/* header ul { */
/*     display: flex; */
/* } */

/* header li { */
/*     flex-grow: 1; */
/* } */

/* header h1, */
/* header li { */
/*     outline: 4px solid var(--color-1); */
/*     outline-offset: -2px; */
/* } */

/* header li + li { */
/*     color: var(--color-3); */
/*     background-color: var(--color-1); */
/* } */





/* ==========================================================================
TOC
========================================================================== */

.toc__menu {
  display: flex;
  height: 4rem;
  align-items: stretch;
  gap: 10px;
}

.toc__link {
  background-color: var(--color-1);
  color: var(--color-4);
  width: 7rem;
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  height: 100%;
}

.toc__link:hover {
  background-color: var(--color-5);
  color: var(--color-2);
}

/* .toc__entry + .toc__entry::before { */
/*     content: "→"; */
/*     display: inline-block; */
/*     font-size: 2rem; */
/* } */


.toc { display: none; }

.toc2 {
  /* margin-top: 2rem; */
  /* margin-bottom: 2rem; */
  border: 4px solid;
  counter-reset: toc;
}

.toc2__entry {
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.toc2__entry + .toc2__entry { border-top: 4px solid; }

.toc2__entry:before {
  content: counter(toc);
  counter-increment: toc;
  display: inline-block;
  padding: .5rem;
}

.toc2__link {
  border-left: 4px solid;
  display: inline-block;
  padding: .5rem;
}





/* ==========================================================================
Treenav
========================================================================== */

/* :root { --tree-width: 10px; } */

/* .treenav { */
/*   font-size: 1.2rem; */
/*   background-color: var(--color-1); */
/*   color: var(--color-4); */
/* } */

/* .treenav ul { margin-left: var(--tree-width); } */

/* .treenav li { */
/*   list-style-type: none; */
/*   margin: 5px 0 5px 10px; */
/*   position: relative; */
/* } */

/* .treenav li:before { */
/*   content: ""; */
/*   position: absolute; */
/*   top: -10px; */
/*   left: calc(var(--tree-width) * -1); */
/*   border-left: 4px solid; */
/*   border-bottom: 4px solid; */
/*   width: var(--tree-width); */
/*   height: 15px; */
/* } */

/* .treenav li:after { */
/*   position: absolute; */
/*   content: ""; */
/*   top: 5px; */
/*   left: calc(var(--tree-width) * -1); */
/*   border-left: 4px solid; */
/*   border-top: 4px solid; */
/*   width: var(--tree-width); */
/*   height: 100%; */
/* } */

/* .treenav li:last-child:after { display: none; } */

/* .treenav li a, */
/* .treenav li span { */
/*   display: inline-block; */
/*   border: 4px solid; */
/*   /1* border-radius: 10px; *1/ */
/*   padding: 5px; */
/*   text-decoration: none; */
/*   background-color: var(--color-3); */
/*   color: var(--color-2); */
/*   max-width: 25em; */
/*   text-overflow: ellipsis; */
/*   overflow: hidden; */
/*   /1* height: 1em; *1/ */
/*   white-space: nowrap; */
/*   position: relative; */
/*   z-index: 1; */
/* } */

/* .treenav li:nth-child(2n) a { transform: skewY(-2deg); } */

/* .treenav li:nth-child(3n) a { transform: skewY(1deg); } */

/* .treenav li:nth-child(4n) a { transform: skewY(-1deg); } */

.treenav {
  /* margin: 1rem; */
  /* outline: 4px solid; */
  counter-reset: level1 level2 level3 level4 level5;
}

.treenav li {
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.treenav li {
    /*border-top: 1px solid;*/
    margin-bottom: var(--line-height);
}
.treenav li {
  overflow: hidden;
  text-wrap: nowrap;
  /* animation: marquee 4s linear; */
  /* animation-play-state: running; */
}
.treenav li ul {
    margin-top: var(--line-height);
}
.treenav li li {
    line-height: 2em;
    display: inline-block;
    float: left;
    outline: 1px solid;
    border-top: 0;
    margin-bottom: 4px;
    margin-right: 4px;
    background: rgba(255, 255, 255, 0.6);
}

.treenav li:before {
  /*content: counter(level1, upper-roman) ". "; [> by specifying the upper-roman as style the output would be in roman numbers <]*/

  counter-increment: level1;
  display: inline-block;
  padding: .6rem;
  width: 1rem;
  text-align: right;
}

.treenav li li:before {
  /*content: counter(level2, upper-latin) ". "; [> by specifying the upper-roman as style the output would be in roman numbers <]*/
  counter-increment: level2;
  display: none;
}

.treenav li li li:before {
  content: counter(level3); /* by specifying the upper-roman as style the output would be in roman numbers */
  counter-increment: level3;
}

.treenav li li li li:before {
  content: counter(level4, lower-latin); /* by specifying the upper-roman as style the output would be in roman numbers */
  counter-increment: level4;
}

.treenav li li li li li:before {
  content: counter(level5); /* by specifying the upper-roman as style the output would be in roman numbers */
  counter-increment: level5;
}

.treenav ul ul { margin-left: calc(3rem - 9px); }

.treenav a {
  /*border-left: 4px solid;*/
  /* display: inline-block; */
  padding: .6rem;
}

.treenav { width: 600px; }


.treenav a { text-overflow: ellipsis; }

li.active { background-color: var(--color-5); }

.treenav ul { color: navy; }

.treenav ul ul { color: blue; }

.treenav ul ul ul { color: green; }

.treenav ul ul ul ul { color: black; }

@keyframes marquee {
  0% { transform: translateX(-100%); }

  100% { transform: translateX(0); }
}





/* ==========================================================================
Content
========================================================================== */

.article__title {
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  letter-spacing: -.025em;
  margin-bottom: 1rem;
}

.article__prompt {
  font-size: 1.3em;
  line-height: 1.15em;
  text-align: left;
  margin-bottom: var(--line-height);
}

.article__poster img { width: 100%; }


.article__content p + p { 
    /*text-indent: var(--line-height); */
    margin-top: var(--line-height);
}

.article__content blockquote {
  margin-left: calc(var(--line-height) * 2);
  margin-top: var(--line-height);
  margin-bottom: var(--line-height);
}

.article__content a { text-decoration-thickness: from-font; }

.article__content span {
  color: inherit;
  text-decoration: none;
  border: 1px solid;
  padding: 0px 5px;
  /* vertical-align: 2px; */
  border-image: linear-gradient(transparent 40%, red 40%);
  border-image-slice: 1;
  /* line-height: 0; */
}

.article__content span[property="notion"] { border-image: linear-gradient(transparent 40%, yellow 40%); }

.article__content span[property="years"] { border-image: linear-gradient(transparent 40%, blue 40%); }

.article__content figure,
.article__content img { max-width: 100%; }

.article__content figcaption { font-size: smaller; }





/* ==========================================================================
Admonition
========================================================================== */

.admonition {
  /*font-size: 16px;*/
  /*line-height: 20px;*/
  border: 2px solid;
  padding: 12px;
  margin-bottom: 16px;
  margin-top: 16px;
}





/* ==========================================================================
References
========================================================================== */

.references {
  font-size: smaller;
  margin-top: var(--line-height);
  padding-top: var(--line-height);
  border-top: 1px solid;
}

.references ul { margin-left: calc(var(--line-height) * 2); }

.references li { text-indent: calc(var(--line-height) * -2); }