@charset "UTF-8";
/* == reset == */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* == above the fold (mobile first) == */
* {
  font-family: "Helvetica", sans-serif;
  hyphens: auto;
}
html {
  font-size: 200%; /* default font size = 16px * 2 => 1rem = 32px */
  scroll-behavior: smooth;
  overflow-y: scroll;
}

:root {
  --BWfg:               #000;
  --BWbg:               #FFF;
  --accent-color:       #63CF00;
  --text-shadow-color:  rgba(0,0,0,.2);
  --box-shadow-color:   rgba(0,0,0,.2);
  --header-height:      1.5rem;
  --header-back-color:  var(--accent-color);
  --header-text-color:  var(--BWfg);
  --text-color:         #333;
  --main-text-color:    var(--text-color);
  --main-back-color:    var(--BWbg);
  --footer-back-color:  #F0F0F0;
  --menu-text-color:    var(--text-color);
  --menu-back-color:    var(--BWbg);
  --menu-margin-bottom: 0rem;
  --menu-margin-right:  1rem;
  --menu-width-max:     10rem;
  --menu-width:         min(calc(100vw - var(--menu-margin-right)), var(--menu-width-max));
  --menu-height:        calc(calc(100vh - var(--header-height)) - var(--menu-margin-bottom));
  --margin-normal:      .5rem;
  --margin-narrow:      .25rem;
  --margin-thin:        .125rem;
  --article-margin-v:   var(--margin-normal);
  --article-margin-h:   var(--margin-normal);
  --figcaption-back:    var(--BWfg);
  --figcaption-text:    var(--BWbg);
  --carusell-button-back: var(--BWfg);
  --carusell-button-text: var(--BWbg);
}
@media (prefers-color-scheme: dark) {
  :root {
    --BWfg:               #FFF;
    --BWbg:               #000;
    --text-color:         #DDD;
    --text-shadow-color:  rgba(255,255,255,.2);
    --box-shadow-color:   rgba(255,255,255,.2);
    --figcaption-back:    #888;
    --figcaption-text:    var(--BWfg);
    --carusell-button-back: #888;
    --carusell-button-text: var(--BWbg);
    --footer-back-color:  #101010;
  }
}
html {
  scroll-padding-top: calc(var(--header-height) + var(--article-margin-v));
  background: var(--main-back-color);
}

body {
  font-size: .5625rem; /* 18px*/
}
header {
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: var(--header-back-color);
  box-shadow: 0 .125rem .25rem var(--box-shadow-color);
}
header>h1 {
  font-size: 1rem;
  line-height: var(--header-height);
  text-align: center;
  color: var(--header-text-color);
  text-shadow: .0625rem .0625rem 0 var(--BWbg);
  position: relative;
}

/* - nav (opener and hiding-part)- */
#navOpener {
  background-color: var(--BWbg);
  color: var(--BWfg);
}
#navOpener, #navToggle, #navToggleClose {
  display: block;
  border-radius: .125rem;
  position: fixed;
  top: .125rem;
  left: .125rem;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}
#navToggle, #navToggleClose {
  opacity: 0;
}
#navToggleClose {
  display: none;
}
nav {
  position: absolute;
  top: var(--header-height);
  left: -100%;
  width: var(--menu-width);
  height: var(--menu-height);
  opacity: 0;
}

/* - text-content - */
main {
  color: var(--main-text-color);
  padding-top: var(--header-height);
  padding-bottom: var(--margin-normal);
}
main ::selection {
  background-color: var(--accent-color);
}
main, nav {
  text-shadow: .12em .12em .12em var(--text-shadow-color);
}
article {
  margin: var(--article-margin-v) var(--article-margin-h);
}
multi-col,
fig-group {
  display: block;
}
article>*,
multi-col>* {
  margin: var(--article-margin-v) 0;
  margin: var(--article-margin-v) 0;
}
article li {
  margin-left: .875rem;
  padding-left: var(--margin-narrow);
  list-style-type: "➤";
  list-style-position: outside;
}
article+article::before {
  content: "";
  display: block;
  height: .125rem;
  background-color: var(--text-shadow-color);
  background-image: linear-gradient(90deg, var(--main-back-color) 0%, var(--text-shadow-color) 50%, var(--main-back-color) 100%);
  width: 75%;
  margin: 1.5rem auto 1.5rem;
}

h2 { line-height: 1.125rem; }
h3 { line-height: .875rem;  }
h4 { line-height: .75rem; }
main h2, main h3, main h4 {
  margin-bottom: var(--margin-thin);
}
main h2+*, main h3+*, main h4+* {
  margin-top: var(--margin-thin);
}

main p {
  text-align: justify;
}
main li,
main p {
  line-height: 0.75rem;
}

main a,
footer a {
  color: var(--BWfg);
  text-decoration: underline;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: .15em;
}
a[href^=http] {
  text-decoration-color: blue;
}



/* - figures - */
:root {
  --fig-padding: 0.125rem;
  --fig-border: 0.03125rem; /*1px*/
}
figure {
  max-width: 100%;
  break-inside: avoid;
  overflow: hidden;
  border: var(--fig-border) solid var(--BWfg);
  -border-radius: var(--fig-padding);
  box-shadow: .125rem .125rem .125rem var(--box-shadow-color);
  --fig-caption-height: .875rem;
  padding: var(--fig-padding);
}
figure img {
  width: 100%;
/*  max-width: 100%;*/
  height: auto;
  display: block;
/*  aspect-ratio: 4/3;*/
}
figcaption {
  background: var(--figcaption-back);
  color: var(--figcaption-text);
  text-shadow: none;
  font-size: .5rem;
  
  line-height: var(--fig-caption-height);
  padding: 0 .375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
figcaption a {
  color: var(--figcaption-text);
}
fig-group figure+figure {
  margin-top: var(--margin-normal);
}


/* == below the fold == */

/* - nav-toggle - */
#navOpener {
  transition: background-color .5s, transform .5s;
}
#navToggle:focus ~ nav {
  left: 0;
  opacity: 1;
  transition: left .5s, top .5s, opacity .5s;
}

#navToggle:focus ~ #navOpener {
  display: block;
  background-color: var(--BWfg);
  color: var(--BWbg);
  transform: rotate(-180deg);
}
#navToggle:focus ~ #navToggleClose {
  display: block;
}

/* - nav inside style - */
nav {
  background-color: var(--menu-back-color);
  color: var(--menu-text-color);
  box-shadow: .125rem 0 .25rem var(--box-shadow-color);
  height: var(--menu-height);
  transition: left .5s .2s, top .5s .2s, opacity .5s .2s;
  z-index: 20;
  overflow: auto;
}
nav h2 {
  font-size: .875rem;
}
nav>* {
  margin: var(--margin-narrow) var(--margin-normal);
}
nav li {
  list-style-type: "⚬";
  margin: 0 0 0 .25rem;
  padding-left: .25rem;
  line-height: .75rem;
}
nav li a {
  margin: var(--margin-thin) 0;
  display: block;
  text-decoration: none;
  color: var(--menu-text-color);
}
nav li a:hover {
  color: var(--BWfg);
  text-decoration: underline;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: .15em;
}

/* == timeline == */
dl {
  --dl-left-column: 50%;
  --capper-size:   0.5625rem; /*18px*/
  --capper-space:  1.0rem;
  --dot-size:      0.4375rem; /*14px*/
  --dot-size-ml:   0.5rem;    /*16px*/
  --dot-ml-border: 0.125rem;
  --bar-width:     0.1875rem; /* 6px */
  --item-space-normal: var(--margin-normal);
  --item-space-ml: calc(2 * var(--item-space-normal));
  --item-space-br: var(--margin-narrow);
  --item-gap:      var(--margin-normal);
  --line-height:   0.75rem;
  --item-space:    var(--item-space-normal);
}
dl::before, dl::after{
  content:"";
  display:block;
  width:var(--capper-size); height:var(--capper-size);
  border-radius:50%;
  background: var(--accent-color);
  border:calc(var(--capper-size) / 2) solid var(--accent-color);
  clear:both;
  margin-left: calc(var(--dl-left-column) - calc(var(--capper-size) / 2));
}
dl>* {
  position:relative;
  line-height:var(--line-height);
  padding: 0 var(--item-gap);
  margin-top: var(--item-space);
  width: var(--dl-left-column);
}
dt {
  float:left;
  clear:left;
  text-align:right;
  width: var(--dl-left-column);
}
dd {
  display: inline-block;
  float: left;
  width: calc(100% - var(--dl-left-column));
}
dl>*::before,
dd::after {
  position:absolute;
  content:""
}
dd::after {
  width:  var(--dot-size);
  height: var(--dot-size);
  top:calc(var(--line-height) / 2);left:0;
  border-radius:50%;
  transform: translate(-50%, -50%);

  background: var(--accent-color);
  border:calc(var(--dot-size) / 2) solid var(--accent-color);
}
dl>*::before {
  border-left: var(--bar-width) solid var(--accent-color);
  height: calc(100% + calc(calc(var(--capper-space) + calc(var(--capper-size) / 2))) + var(--item-space));
  top: calc(var(--line-height) / -2);
}
dt::before {
  right:0;transform:translateX(50%);
}
dd::before {
  left:0;transform:translateX(-50%);
}
dt:first-of-type::before {
  top: calc(calc(var(--capper-space) * -1) + calc(var(--capper-size) / -2));
}
dl>*:first-of-type {
  margin-top: var(--capper-space);
}
dl>*:last-of-type {
  margin-bottom: var(--capper-space);
  --item-space: calc(var(--line-height) / 2);
}
dd+dt.milestone,
dd+dt.milestone+dd {
  --item-space: var(--item-space-ml) !important;
}
dl>dt.milestone+dd::after {
  --dot-size:var(--dot-size-ml);
  border:var(--dot-ml-border) solid var(--accent-color);
  background: var(--main-back-color);
}
dl.br-space dd br {
  content: "";
  display: block;
  height: var(--item-space-br);
}

/* == footer == */
footer {
  padding: var(--margin-normal);
  box-shadow: inset 0 .25rem .25rem -0.25rem #888; 
  background-color: var(--footer-back-color);
  color: var(--BWfg);
}
footer p+p {
  margin-top: var(--margin-narrow);
}
footer p i {
  display: inline-block;
  text-align: center;
  width: 1rem;
  font-style: normal;
}
.no-mobile {
  display: none;
}