:root {
  /* frift-prozent*/
  --friftp-med: 2rem;
  --friftp-max: 16pt;
  --frift-klein: calc(var(--frift-normal) * 0.75);
  --frift-normal: clamp(1rem, var(--friftp-med), var(--friftp-max));
  --frift-gross: calc(var(--frift-normal) * 1.15);
  --frift-extra: calc(var(--frift-normal) * 1.30);
  --frift-max: calc(var(--frift-normal) * 1.50);
  /*
   * Kolor Kodz
   * 
   * ligth(er) theme > lt > l
   * dark(er) theme > dt > d
   *
   * background > bg > b
   * foreground > fg > f
   */
  
  --lb-1: grey;
  --lf-1: black;

  --db-1: black;
  --db-2: #111;
  --db-3: #333;
  --db-4: #1b1b1b;
  --df-1: #bbb;
  --df-2: #00aa00; /* #114499 */
  --df-h: #00f000; /* z.b. überschriften */
  --df-a: #339033; /* z.b. navi #339933 */
  --df-a-hov: magenta;
  --df-a-foc: #33ff33; /* purple */
  --df-a-foc-b: purple;
  --df-a-vis: maroon;

  --bor-rad: 0.75rem;

  --pad-max: 0.50rem;
  --pad-min: 0.25rem;
  --pad-nih: 0.05rem;

  --mar-max: 0.50rem;
  --mar-min: 0.25rem;
  --mar-nih: 0.05rem;

  --maxwid: 80%;
}
@font-face {
  font-family: 'aegyptus-r';
  src: url('../fnt/aegyptus.woff') format('woff');
}
@font-face {
  font-family: 'nilus';
  src: url('../fnt/nilus.woff') format('woff');
}
@font-face {
  font-family: 'ocra-web';
  src: url('../fnt/OCRA.woff') format('woff');
}
@keyframes html-grenzen {
  0% {border-style: dashed; border-top-style: dotted;}
  20% {border-style: dashed; border-right-style: dotted;}
  40% {border-style: dashed; border-bottom-style: dotted;}
  60% {border-style: dashed; border-left-style: dotted;}
  80% {border-style: dashed; border-bottom-style: dotted;}
  100% {border-style: dashed; border-right-style: dotted;}
}
/* ++++++++ */
.glyphsub {
  font-family: 'Aegyptus',
  'NewGardiner',
  'JSeshFont',
  'Noto Sans Egyptian Hieroglyphs',
  'Segoe UI Historic',
  'aegyptus-r', sans-serif;
}
html {
  background-color: black;
/*  animation: html-grenzen 2s linear infinite;*/
}
body {
  font-size: inherit;
  font-family: monospace;
  height: 100%;
  background-color: black;
  color: #ddd;
  /* flex */
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
* {
  padding: 0;
  margin: 0;
  font-size: var(--frift-normal);
  line-height: 1.5;
/*  width: fit-content;*/
  max-width: max(900px, 94vw);
}
details, header, footer {
  grid-column: 1 / -1;
}
footer {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
details nav {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  width: fit-content;
}
details img,
details section,
details p,
details code,
details ul,
details ol, {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
details * {
  line-height: 1.5;
}
details:nth-child(1) {
  margin-top: 2rem;
}
summary {
  padding: 0.5rem;
  margin: 0.5rem;
}
summary::after {
  content: "#"attr(id);
  width: 2px;
  height: 100%;
  color: #777;
  margin-left: 0.5rem;
}
a {
  color: #eee;
  padding: 0.5rem;
  margin: 0.5rem;
  background-color: #222;
}
a:focus, summary:focus {
  outline: none;
}
a:focus, a:hover, summary:focus, summary:hover {
  --col-highlight: orange;
  --col-support: white;
  transition: 0.6s;
  color: var(--col-highlight);
  background-color: #333;
  box-shadow: 1px 0 var(--col-highlight);
}
code, pre {
  width: fit-content;
  background-color: #111;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  padding: 0.4rem;
  margin-top: 1.5rem;
  font-size: var(--frift-klein);
}
code, section, li {
  color: #ddd;
}
ul, ol, section, pre, code {
  margin-left: 1rem;
  text-align: justify;
  text-justify: inter-word;
  max-width: max(900px, 80%);
}

li a,
section a {
  line-height: 2;
  margin: 0;
  padding: 0;
}
/* nicht-normale friftgrößen */
header {
  font-size: var(--frift-max);
}
h1, h2 {
  font-size: var(--frift-extra);
}
h3, h4 {
  font-size: var(--frift-gross);
}

/* alle anderen müssen ihre größe ja (er)erben?! */
img {
  max-width: 99vw;
  min-width: 50%;
  z-index: 99;
}

/* simuliere texteditor ... farben */
@media screen {
/*farben span etc.*/
.emph {
  color: #eee;
}
/* vgl usepackage(soul) so, ul, hl, etc.*/
.hl {
  color: yellowgreen;
}
.it {
  font-style: italic;
}
.pyimport {
  color: violet;
}
.pyfunc {
  color: hsl(180, 36%, 54%);
}
.pyint, .pyoperator {
  color: orange;
  color: hsl(32, 93%, 66%);
}
.pystr {
  color: palegreen;
}
.pycomment {
  color: hsl(221, 12%, 69%);
}

.emph, .hl, .it,
.pyimport, .pyfunc, .pyint, .pyoperator, .pystr, .pycomment {
  padding:0;
  font-size: inherit;
}
}


/* hover text indikator */
@media screen {
  .hovtex-indikator {
    tabindex: 0;
  }
  .hovtex-indikator::after {
    content: "*";
    color: orange;
    padding-right:0;
    padding-right:0.25rem;
    font-size: var(--frift-klein);
  }
  .hovtex-indikator:focus::after {
    content: attr(title);
    color: orange;
    padding-left:0.25rem;
    font-size: var(--frift-klein);
  }
}

/* 540px 979px */
/* (orientation: portrait) */
@media screen and (min-width: 901px) and (orientation: portrait) {
  a {
    padding: 0.75rem;
    margin: 1rem;
  }
}
@media screen and (max-width: 540px) {
  details nav,
  details img {
    display: flex;
    flex-direction: column;
  }
  a {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    margin: 1rem;
  }
}