/*******************************************************************
Table of Content:

(on vim, simply press "#" in normal mode to jump to section)

colors
TYPEFACES
MAIN_GEOMETRY
STRUCTURE
BASIC_ELEMENTS
MEDIA_ELEMENTS
SPECIAL_ELEMENTS
TABLE
ARTICLE_LIST
CODE_HIGHLIGHTING
FORMS
HEADER
ARTICLE_HEADER
FOOTER
DECORATIONS
SUMMARY_DETAILS
FRAMES
LAYOUTS
PAGE_SPECIFICS
  home_page
  subcategory_page
  txt_page
  wiki_page
  art_page
  now_page
  links_page
  error_pages
  schlavagosIT
  thunderstorms
RESPONSIVE
PRINT

*******************************************************************/

/******************************************************************/
/*                      colors                                   */
/******************************************************************/

:root {
  /* base palette */
  --lightest: #f9f9f9;
  --lighter:  #e1e1e1;
  --light:    #c8c8c8;
  --middle:   #a6a6a6;
  --dark:     #656565;
  --darker:   #4c4c4c;
  --darkest:  #333333;

  /* main components */
  --text: var(--darkest);
  --background: var(--lightest);
  --accent:       #9b6767;

  /* additional colors */
  --red: #f84545;
  --redorange: #ff7070;
  --orange: #ffb370;
  --yellow: #e8d152;
  --green: #32cc8a;
  --flat-green: #88b4a8;
  --blue: #5057ba;
  --lila: #ffe3ff;
  --flash-purple: #db84db;
  --purple: #7d517d;

  --light-orange: #fde1b5;
  --light-red: #fff1ed;
  --light-green: #d6f2e6;
  --light-blue: #f0f1ff;

  /* highlighter-linke colors */
  --highlight-pink:   #ff70ac78;
  --highlight-yellow: #f7ff0078;
  --highlight-green:  #00ff5878;
  --highlight-blue:   #a5c7fd78;
}

.red {
  color: var(--red);
}

/******************************************************************/
/*                      TYPEFACES                                 */
/******************************************************************/
/* inconsolata variable */
@font-face {font-family: 'Inconsolata-var'; src: url('/webfonts/inconsolata/inconsolata_variable.ttf'); font-display: fallback;}

/* inconsolata-200 - latin-ext_latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200;
  src: url('/webfonts/inconsolata/200/inconsolata_200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/webfonts/inconsolata/200/inconsolata_200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/webfonts/inconsolata/200/inconsolata_200.woff2') format('woff2'), /* Super Modern Browsers */
       url('/webfonts/inconsolata/200/inconsolata_200.woff') format('woff'), /* Modern Browsers */
       url('/webfonts/inconsolata/200/inconsolata_200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/webfonts/inconsolata/200/inconsolata_200.svg#Inconsolata') format('svg'); /* Legacy iOS */
  font-display: fallback;
}

/* inconsolata-regular - latin-ext_latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: url('/webfonts/inconsolata/400/inconsolata_400.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/webfonts/inconsolata/400/inconsolata_400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/webfonts/inconsolata/400/inconsolata_400.woff2') format('woff2'), /* Super Modern Browsers */
       url('/webfonts/inconsolata/400/inconsolata_400.woff') format('woff'), /* Modern Browsers */
       url('/webfonts/inconsolata/400/inconsolata_400.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/webfonts/inconsolata/400/inconsolata_400.svg#Inconsolata') format('svg'); /* Legacy iOS */
  font-display: fallback;
}

/* inconsolata-700 - latin-ext_latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 700;
  src: url('/webfonts/inconsolata/700/inconsolata_700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/webfonts/inconsolata/700/inconsolata_700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/webfonts/inconsolata/700/inconsolata_700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/webfonts/inconsolata/700/inconsolata_700.woff') format('woff'), /* Modern Browsers */
       url('/webfonts/inconsolata/700/inconsolata_700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/webfonts/inconsolata/700/inconsolata_700.svg#Inconsolata') format('svg'); /* Legacy iOS */
  font-display: fallback;
}

/* inconsolata-900 - latin-ext_latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 900;
  src: url('/webfonts/inconsolata/900/inconsolata_900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/webfonts/inconsolata/900/inconsolata_900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/webfonts/inconsolata/900/inconsolata_900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/webfonts/inconsolata/900/inconsolata_900.woff') format('woff'), /* Modern Browsers */
       url('/webfonts/inconsolata/900/inconsolata_900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/webfonts/inconsolata/900/inconsolata_900.svg#Inconsolata') format('svg'); /* Legacy iOS */
  font-display: fallback;
}

/* major-mono-display-regular - latin-ext_latin */
@font-face {
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
  src: url('/webfonts/major-mono-display/400/major-mono-display_400.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/webfonts/major-mono-display/400/major-mono-display_400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/webfonts/major-mono-display/400/major-mono-display_400.woff2') format('woff2'), /* Super Modern Browsers */
       url('/webfonts/major-mono-display/400/major-mono-display_400.woff') format('woff'), /* Modern Browsers */
       url('/webfonts/major-mono-display/400/major-mono-display_400.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/webfonts/major-mono-display/400/major-mono-display_400.svg#MajorMonoDisplay') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/******************************************************************/
/*                      MAIN_GEOMETRY                             */
/******************************************************************/

html {
  /* legacy as of 2023.08.29, to delete if ok
  /* background-color: var(--lightest);
  background-image: radial-gradient(var(--middle) 7%, var(--background) 2%);
  background-position: 0px; 0px;
  background-size: 1em 1em; */
  background-image: radial-gradient(var(--middle) 1.2px, var(--background) 1.2px);
  background-size: 1rem 1rem;
  background-color: rgba(0, 0, 0, 0);

  box-sizing: border-box;
  color: var(--text);
  font-family: Inconsolata, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 18px;
  line-height: 2;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

@supports (font-variation-settings: normal) {
	html {
    font-family: Inconsolata-var, Consolas, "DejaVu Sans Mono", monospace;
	}
}

body {
  margin: 1em;
}

    @media only screen and (max-width: 800px) {
      body {
        margin-top: 1em;
      }
    }

body.bare{
  margin: 0;
}

main > * {
  margin-top: 1rem;
  max-width: 100ch;
  background-color: var(--background);
}

::selection
{
  color: var(--background);
  background: var(--text);
}

*, *:before, *:after {
  box-sizing: border-box;
}

/******************************************************************/
/*                      STRUCTURE                                 */
/******************************************************************/


main {
  display: grid;
  grid-template-columns: 1fr min(50ch, 50%) min(50ch, 50%) 1fr;
}

    main .section {
      display: grid;
    }

        main .section > * {
          grid-column: 1 / 3;
        }

    main.full-width { grid-template-columns: 1fr;}

        main.full-width > * {
        grid-column: 1/5;
          max-width: initial;
        }

        main.per80-width > * {
          grid-column: 1/5;
          max-width: initial;
        }

        main.per80-width {
          margin: 0 10vw;
        }
    
    main > * {
      grid-column: 2 / 4;
    }
    
    .full-bleed {
      grid-column: 1 / 5;
      max-width: initial;
    }

    main.txt > * {
      grid-column: 1 / 5;
      max-width: unset;
      background-color: unset;
    }
    
    main.txt > :not(.section) {
      background-color: var(--background);
      grid-column: 2 / 4;
      max-width: 104ch;
    }
        main.txt > :not(.section):not(h1) {
          padding-left: 2ch;
          padding-right: 2ch;
        }
    
    main.txt > .section {
      display: grid;
      grid-template-columns: 1fr min(50ch, 50%) min(50ch, 50%) 1fr;
      column-gap: 10px;
    }
        @media only screen and (max-width: 800px) {
          main.txt > .section {
            column-gap: initial;
          }
        }
    
      main.txt > .section > *:not(pre) {
        background-color: var(--background);
        padding: 0 .5em;
      }
          @media only screen and (max-width: 800px) {
            main.txt > .section > *:not(pre) {
              padding: 0;
            }
          }

          main.txt > .section > p {
            padding-bottom: 1.5em;
          }
      
      main.txt > .section > * {
        grid-column: 2 / 4;
      }
      
      /* default class from ReStructuredText parsing */
      main.txt .align-center {
        grid-column: 2 / 4;
        text-align: center;
      }
      
  @media only screen and (max-width: 800px) {
    .align-right {
      text-align: center;
      padding: 10px;
    }

  main.txt .on-left    , main.projects .on-left     {grid-column: 1 / 5; text-align:center}
  main.txt .over-left  , main.projects .over-left   {grid-column: 1 / 5; text-align:right}                 main.txt > .section > .over-left + *  , main.projects > .section > .over-left + *    {grid-column: 1 / 5;}
  main.txt .float-left , main.projects .float-left  {grid-column: 1 / 5; text-align:center;}               main.txt > .section > .float-left + * , main.projects > .section > .float-left + *   {grid-column: 1 / 5;}
                                                                                                                                                                                    
  main.txt .center     , main.projects .center      {grid-column: 1 / 5; text-align: center;}                                                                                       
  main.txt .full-center, main.projects .full-center {grid-column: 1 / 5; text-align: center;}                                                                                                           
                                                                                                                                                                                    
  main.txt .float-right, main.projects .float-right {grid-column: 1 / 5; text-align:center;}               main.txt > .section > .float-right + *, main.projects > .section > .float-right + *   {grid-column: 1 / 5;}
  main.txt .over-right , main.projects .over-right  {grid-column: 1 / 5; text-align:left;}                 main.txt > .section > .over-right + * , main.projects > .section > .over-right + *    {grid-column: 1 / 5;}
  main.txt .on-right   , main.projects .on-right    {grid-column: 1 / 5; text-align:center;}
}

@media only screen and (min-width: 800px) and (max-width: 1600px) {
  .align-right {
    float: right;
    text-align: center;
    padding: 20px;
  }

  main.txt .on-left    , main.projects .on-left     {grid-column: 1 / 3; text-align:right}                 
  main.txt .over-left  , main.projects .over-left   {grid-column: 1 / 3; text-align:right}                 
  main.txt .float-left , main.projects .float-left  {grid-column: 2 / 3; text-align:center;}               
                                                                                                           
  main.txt .center     , main.projects .center      {grid-column: 2 / 4; text-align: center;}              
  main.txt .full-center, main.projects .full-center {grid-column: 1 / 5; text-align: center;}              
                                                                                                           
  main.txt .float-right, main.projects .float-right {grid-column: 3 / 4; text-align:center;}               
  main.txt .over-right , main.projects .over-right  {grid-column: 3 / 5; text-align:left;}                 
  main.txt .on-right   , main.projects .on-right    {grid-column: 3 / 5; text-align:left;}                 
}

@media only screen and (min-width: 1600px) {
  .align-right {
    grid-column: 4 / 5;
    text-align: center;
    padding: 20px;
  }

  main.txt .on-left     , main.projects .on-left     {grid-column: 1 / 2; text-align:center; height: 10px}
  main.txt .over-left   , main.projects .over-left   {grid-column: 1 / 3; text-align:right}               
  main.txt .float-left  , main.projects .float-left  {grid-column: 2 / 3; text-align:center;}             
                                                                                                          
  main.txt .center      , main.projects .center      {grid-column: 2 / 4; text-align: center;}            
  main.txt .full-center , main.projects .full-center {grid-column: 1 / 5; text-align: center;}            
                                                                                                          
  main.txt .float-right , main.projects .float-right {grid-column: 3 / 4; text-align:center;}             
  main.txt .over-right  , main.projects .over-right  {grid-column: 3 / 5; text-align:left;}               
  main.txt .on-right    , main.projects .on-right    {grid-column: 4 / 5; text-align:center; height: 10px}

  /* h3 subgrid bypass */
  main.txt > .section .section .on-left  {position: absolute; width: 400px;  left: 3rem;}
  main.txt > .section .section .on-right {position: absolute; width: 400px; right: 3rem;}
}


@media only screen and (max-width: 800px) {
  .align-left {
    text-align: center;
    padding: 10px;
  }
}

@media only screen and (min-width: 800px) and (max-width: 1600px) {
  .align-left {
    float: left;
    text-align: center;
    padding: 20px;
  }
}

@media only screen and (min-width: 1600px) {
  .align-left {
    grid-column: 4 / 5;
    text-align: center;
    padding: 20px;
  }
}

/******************************************************************/
/*                      BASIC_ELEMENTS                            */
/******************************************************************/

h1, h2, h3, h4, h5, h6 {

}

h1 {
    font-size: 4em;
    text-align: center;
}
    body > h1 {
        font-size: 10em;
    }

    main > h1, header.naked h1 {
      color: var(--orange);
      font-size: 5em;
      font-family: "Major Mono Display", Consolas, "DejaVu Sans Mono", monospace;
      margin: 0;
      text-transform: lowercase;
    }

        @media only screen and (max-width: 800px) {
          main > h1, header.naked h1 {
            font-size: 3em;
            word-wrap: anywhere;
          }
        }
    .semantic-h1 {
      display: none;
    }

h2 {
  background-color: var(--highlight-green);
  background: var(--lila);
  color: var(--blue);
  font-family: "Major Mono Display", Consolas, "DejaVu Sans Mono", monospace;
  font-size: 1.5rem;
  line-height: 1;
  margin: 0.5rem 0;
  max-width: 100ch;
  padding: 0.5rem 0.5rem;
  text-transform: lowercase;
  width: fit-content;
}

main h3 {
  background-color: var(--highlight-blue);
  border-right: 0.25em solid var(--highlight-blue);
  color: var(--blue);
  font-size: 1.25em;
  line-height: 1;
  margin: 1rem 0 0;
  padding: 0 0.125em;
  width: fit-content;
}

h3 {
}

h4 {
}

h5 {
}

h6 {
}

p {
  margin-bottom: 0;
  margin-top: 0;
  padding: 0 0.5rem;
}
    p + p, .footnote + p {
      padding-top: 1.5em;
    }

    @media only screen and (max-width: 800px) {
      p {
        padding: 0 0.125em;
      }
    }

    p.caption {
      background-color: var(--text);
      color: var(--background);
      font-style: italic;
      line-height: 1;
      margin: auto;
      padding: 0.125rem;
      text-shadow: -1px -1px 0px #fff7, 1px 1px 0px #0007;
      width: fit-content;
    }

strong {
  font-weight: 900;
}

li::before {
  content: ">";
  color: var(--blue);
  padding-right: 0.5rem;
  font-weight: 900;
}

li {
  line-height: 2;
  list-style: none;
}

ul, ol {
  line-height: 1.5;
  margin-top: 0;
}

    /* p followed by ul or ol should have no gap */
    main.txt > .section p:has(+ ul), main.wiki > .section p:has(+ ul), main.txt > .section p:has(+ ol), main.wiki > .section p:has(+ ol) {
      padding-bottom: 0;
    }

ol > li {
  list-style: decimal-leading-zero;
}
    ol > li:before {
      content: none;
    }

    ol > li::marker {
      color: var(--green);
    }

mark{
  background-color: var(--yellow);
}

a {
  border-bottom: 0.1em solid  var(--red);
  color: #333;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}
    a:has(img) {
      border-bottom: none;
    }

    a:active {
    }
    
    a:visited {
      border-bottom: 1.5px dotted var(--text);
    }
    
    a:hover:not(:has(img)) {
      color: var(--background);
      /*background: var(--text);*/
      box-shadow: inset 0 -1.3em var(--text);
    }
    
    a[href^='http']:not([href*='localhost:8000']):not([href*='aligot-death.space']):after {
      color: var(--redorange);
      content: "🡕";
      font-size:0.75em;
      font-weight: 900;
      padding-left: 2px;
    }

    a.image-reference::after {
      content: none !important;
    }

nav > a {
  border-bottom: none;
}

nav > span {
  background-color: #333;
  background-color: var(--text);
  border-radius: 2px;
  color: #f8f8f8;
  color: var(--background);
  margin-right: 10px;
  padding: 2px;
}

/******************************************************************/
/*                      MEDIA_ELEMENTS                            */
/******************************************************************/

.align-center {
  text-align: center;
}

main video {
  width: 100%;
}

.on-left.figure img, .on-right.figure img {
  border: 1rem solid white;
}

/******************************************************************/
/*                      SPECIAL_ELEMENTS                          */
/******************************************************************/

.category, .subcategory {
  border-bottom: none;
  font-weight: 900;
}

a.tag {
  border-bottom: none;
  color: grey;
  font-weight: initial;
}
    a.tag:before {
      content: "#";
    }

a.button:hover {
  cursor: pointer;
}
div#content {
  height: fit-content;
  margin: 0 2rem;
  padding: 1rem;
}

    div#content .topic-title {
      padding-top: 0;
      color: var(--redorange);
      font-size: 2em;
      font-weight: 700;

    }

    div#content a {
      border: none;
    }

@media only screen and (min-width: 800px) {
  div#content {
    grid-column: 1 / 2;
    grid-row: span 3;
  }
  
  div#content .topic-title {
    padding-top: 0;
    color: var(--redorange);
  }
}

.headerlink {
  border-bottom: none;
  color: var(--flat-green);
  font-weight: 400;
}

a.image-link { 
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border: none;
  border-radius: 0.5em;
  display: flex;
  height: 300px;
  margin: 0.5em 0;
  padding: 0 0.5em;
  object-fit: cover;
  overflow: hidden; 
}

    a.image-link:hover {
      color: initial;
      box-shadow: none;
    }

    a.image-link > h2, a.image-link > h3 {
      align-self: flex-end;
      background-color: white;
      border: none;
      color: var(--text);
      display: flex;
      font-size: 2em;
      font-weight: 400;
      line-height: 1;
      margin: 0.25em 0;
      padding: 0.125rem 0.25rem;
      text-transform: uppercase;
    }

    a.image-link h3::before {
      content: none;
    }

main.txt .footnote, main.wiki .footnote {
  font-size: 0.9em;
  text-align: left;
  color: var(--dark);
  padding: 10px;
  display: block;
  margin: 0.5rem 3rem;
  background-color: white !important;
  padding: 0.25rem 0.25rem !important;
  line-height: 1.1;
  border: 2px solid var(--light-blue);
}

    @media only screen and (min-width: 1600px) {
      main.txt .footnote, main.wiki .footnote {
        grid-column: 4 / 5;
        height: fit-content;
        place-self: center end;
      }
    }

/********************** blockquote *********************************/

blockquote {
  background-color: white;
  border-left: 0.125rem solid var(--blue);
  color: var(--blue);
  font-style: italic;
  margin: 1rem;
  padding: 0rem 1rem 1rem 1rem;
}

    blockquote > p:last-child {
      padding-bottom: initial;
    }

    blockquote::before {
      content: "«»\A";
      color: #999dce;
      line-height: 0.5;
      font-style: initial;
      white-space: pre;
    }
    
blockquote.pull-quote + p {
  padding-left: 3rem;
}

blockquote.pull-quote + p::before {
  content: "—";
  padding-right: 0.5rem;
}

.speech-synth * {
  color: var(--middle) !important;
}

/********************** translations *********************************/

span.lang {
  margin-right: 0.5rem;
}

main span.lang.fr {
  color: var(--blue);
}

main span.lang.en {
  color: var(--red);
}

main span.lang.de {
  color: var(--green);
}


main.txt span.lang {
  color: initial;
}
    span.lang:before {
      content: "[";
    }

    span.lang:after {
      content: "]";
    }
/******************************************************************/
/*                      TABLE                                     */
/******************************************************************/

table {
  border-collapse: collapse;
  text-align: center;
}

table thead {
  background-color: var(--red);
  color: var(--background);
}

table tbody tr:nth-child(even) {
  background-color: var(--lighter);
  color: var(--color);
}


/******************************************************************/
/*                      ARTICLE_LIST                              */
/******************************************************************/

.article-list {
  padding-bottom: 1.5em;
}

    .article-list h2 {
      margin-top: 0;
      margin-bottom: 0;
    }

    .article-list > h2 ~ p {
      color: var(--middle);
    }
    
    .article-list ul {
      margin: 0;
    }

    .article-list li {
      list-style: decimal-leading-zero;
    }

        .article-list li::marker {
          color: var(--light);
        }

    .article-list article {
      display: inline;
    }

    .article-list a {
      border-bottom: none;
      color: var(--redorange);
      font-size: 1em;
      font-weight: 700;
    }
    

.article-list-title {
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid var(--lila);
  padding: 1rem;
}

    .article-list-title .hatched {
      display: flex;
      justify-content: space-between;
    }
    
        .article-list-title .hatched > * {
          background-color: white;
          padding-left: 0.5em;
          padding-right: 0.5em;
        }
    
    .article-list-title h1 {
      font-size: 2rem;
      font-weight: 700;
      margin: 0;
      text-align: left;
      
      font-family: "Major Mono Display", Consolas, "DejaVu Sans Mono", monospace;
      line-height: 1.2;
      text-transform: lowercase;
    }
    
    .article-list-title a:hover {
      color: var(--redorange);
    }

/******************************************************************/
/*                      CODE_HIGHLIGHTING                         */
/******************************************************************/

.literal {
  padding: 0.125rem 0.25rem;
  background-color: var(--light-blue);
  color: var(--blue);
  border-radius: 0.125rem;
}

/* p followed by a pre should have no gap */
main.txt > .section p:has(+ pre), main.wiki > .section p:has(+ pre) {
  padding-bottom: 0;
}

pre {
  background-color: var(--text);
  border-radius: 2px;
  border-left: 0.25rem solid var(--orange);
  color: var(--background);
  font-size: 0.8em;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 5px;
  white-space: pre-wrap;
}

    main pre.code.literal-block {
      background-color: var(--text);
    }
    main pre.code.literal-block::selection, main.txt pre.code *::selection {
      background-color: var(--red);
      color: white;
    }

    pre.python:before {
      content: "python";
      display:block;
      background-color: var(--blue);
      color: white;
      font-weight: 900;
      padding: 0px 2px;
      border-radius: 1px;
      margin-bottom: 0.5rem;
      width: fit-content;
    }

    pre.apache:before {
      content: "apache";
      display:block;
      background-color: var(--red);
      color: white;
      font-weight: 900;
      padding: 0px 2px;
      border-radius: 1px;
      margin-bottom: 0.5rem;
      width: fit-content;
    }

    pre.bash:before {
      content: "bash";
      display:block;
      background-color: var(--red);
      color: white;
      font-weight: 900;
      padding: 0px 2px;
      border-radius: 1px;
      margin-bottom: 0.5rem;
      width: fit-content;
    }

    pre.html:before {
      content: "html";
      display:block;
      background-color: white;
      color: var(--darkest);
      font-weight: 900;
      padding: 0px 2px;
      border-radius: 1px;
      margin-bottom: 0.5rem;
      width: fit-content;
    }

/* line numbers */
pre > .ln {
  color: #6E6A86;
  display: inline-block;
  font-weight: 400;
  padding-left: 5px;
  user-select: none;
}

.ln:first-child {
  border-radius: 2px 2px 0 0;
}

.ln:last-child {
  border-radius: 0 0 2px 2px;
}

.ln:only-child {
  border-radius: 2px;
}

pre:hover > .ln {
  visibility: hidden;
}


main pre.code.literal-block {
    /* based on "Rosé Pine" https://rosepinetheme.com/palette/ingredients/ */
  
  --rose-pine-base: #191724;
  --rose-pine-rose: #ebbcba;
  --rose-pine-love: #eb6f92;
  --rose-pine-iris: #c4a7e7;
  --rose-pine-pine: #31748f;
  --rose-pine-foam: #9ccfd8;
  --rose-pine-gold: #f6c177;
  
  --code-background: var(--rose-pine-base);
  --code-comment: var(--rose-pine-rose);
  --code-error: var(--rose-pine-love);
  --code-keyword: var(--rose-pine-iris);
  --code-literal: var(--rose-pine-love);
  --code-preproc: vaar(--rose-pine-iris);
  --code-generic-deleted: var(--rose-pine-pine);
  --code-generic: var(--rose-pine-foam);
  --code-generic-inserted: var(--rose-pine-foam);
  --code-generic-ouput: var(--rose-pine-foam);
  --code-generic-subheading: var(--rose-pine-foam);
  --code-generic-traceback: var(--rose-pine-foam);
  --code-keyword-type: var(--rose-pine-foam);
  --code-literal-string: var(--rose-pine-gold);
  --code-name-attribute: var(--rose-pine-foam);
  --code-name: var(--rose-pine-gold);
  --code-name-constant: var(--rose-pine-love);
  --code-decorator-operator: var(--rose-pine-iris);
  --code-name-entity: var(--rose-pine-rose);
  --code-name-exception: var(--rose-pine-love);
  --code-name-label: var(--rose-pine-foam);
  --code-name-variable: var(--rose-pine-foam);
  --code-whitespace: var(--rose-pine-iris);
  --code-literal-string-escape: var(--rose-pine-rose);
  --code-literal-string-special: var(--rose-pine-rose);
}

/* https://docutils.sourceforge.io/sandbox/stylesheets/pygments-default.css */
/* generated with ``pygmentize -S default -f html -a main pre.code.literal-block >`` */
main pre.code.literal-block > .hll { background-color: var(--code-background); }
main pre.code.literal-block    { background: var(--code-background);}
main pre.code.literal-block > .c { color: var(--code-comment); font-style: italic } /* Comment */
main pre.code.literal-block > .err { border: 1px solid var(--code-error) } /* Error */
main pre.code.literal-block > .k { color: var(--code-keyword); font-weight: bold } /* Keyword */
main pre.code.literal-block > .o { color: var(--code-literal) } /* Operator */
main pre.code.literal-block > .cm { color: var(--code-comment); font-style: italic } /* Comment.Multiline */
main pre.code.literal-block > .cp { color: var(--code-preproc) } /* Comment.Preproc */
main pre.code.literal-block > .c1 { color: var(--code-comment); font-style: italic } /* Comment.Single */
main pre.code.literal-block > .cs { color: var(--code-comment); font-style: italic } /* Comment.Special */
main pre.code.literal-block > .gd { color: var(--code-generic-deleted) } /* Generic.Deleted */
main pre.code.literal-block > .ge { font-style: italic } /* Generic.Emph */
main pre.code.literal-block > .gr { color: var(--code-error) } /* Generic.Error */
main pre.code.literal-block > .gh { color: var(--code-generic); font-weight: bold } /* Generic.Heading */
main pre.code.literal-block > .gi { color: var(--code-generic-inserted) } /* Generic.Inserted */
main pre.code.literal-block > .go { color: var(--code-generic-ouput) } /* Generic.Output */
main pre.code.literal-block > .gp { color: var(--code-generic); font-weight: bold } /* Generic.Prompt */
main pre.code.literal-block > .gs { font-weight: bold } /* Generic.Strong */
main pre.code.literal-block > .gu { color: var(--code-generic-subheading); font-weight: bold } /* Generic.Subheading */
main pre.code.literal-block > .gt { color: var(--code-generic-traceback) } /* Generic.Traceback */
main pre.code.literal-block > .kc { color: var(--code-keyword); font-weight: bold } /* Keyword.Constant */
main pre.code.literal-block > .kd { color: var(--code-keyword); font-weight: bold } /* Keyword.Declaration */
main pre.code.literal-block > .kn { color: var(--code-keyword); font-weight: bold } /* Keyword.Namespace */
main pre.code.literal-block > .kp { color: var(--code-keyword) } /* Keyword.Pseudo */
main pre.code.literal-block > .kr { color: var(--code-keyword); font-weight: bold } /* Keyword.Reserved */
main pre.code.literal-block > .kt { color: var(--code-keyword-type) } /* Keyword.Type */
main pre.code.literal-block > .m { color: var(--code-literal) } /* Literal.Number */
main pre.code.literal-block > .s { color: var(--code-literal-string) } /* Literal.String */
main pre.code.literal-block > .na { color: var(--code-name-attribute) } /* Name.Attribute */
main pre.code.literal-block > .nb { color: var(--code-keyword) } /* Name.Builtin */
main pre.code.literal-block > .nc { color: var(--code-name); font-weight: bold } /* Name.Class */
main pre.code.literal-block > .no { color: var(--code-name-constant) } /* Name.Constant */
main pre.code.literal-block > .nd { color: var(--code-decorator-operator) } /* Name.Decorator */
main pre.code.literal-block > .ni { color: var(--code-name-entity); font-weight: bold } /* Name.Entity */
main pre.code.literal-block > .ne { color: var(--code-name-exception); font-weight: bold } /* Name.Exception */
main pre.code.literal-block > .nf { color: var(--code-name) } /* Name.Function */
main pre.code.literal-block > .nl { color: var(--code-name-label) } /* Name.Label */
main pre.code.literal-block > .nn { color: var(--code-name); font-weight: bold } /* Name.Namespace */
main pre.code.literal-block > .nt { color: var(--code-keyword); font-weight: bold } /* Name.Tag */
main pre.code.literal-block > .nv { color: var(--code-name-variable) } /* Name.Variable */
main pre.code.literal-block > .ow { color: var(--code-decorator-operator); font-weight: bold } /* Operator.Word */
main pre.code.literal-block > .w { color: var(--code-whitespace) } /* Text.Whitespace */
main pre.code.literal-block > .mf { color: var(--code-literal) } /* Literal.Number.Float */
main pre.code.literal-block > .mh { color: var(--code-literal) } /* Literal.Number.Hex */
main pre.code.literal-block > .mi { color: var(--code-literal) } /* Literal.Number.Integer */
main pre.code.literal-block > .mo { color: var(--code-literal) } /* Literal.Number.Oct */
main pre.code.literal-block > .sb { color: var(--code-literal-string) } /* Literal.String.Backtick */
main pre.code.literal-block > .sc { color: var(--code-literal-string) } /* Literal.String.Char */
main pre.code.literal-block > .sd { color: var(--code-literal-string); font-style: italic } /* Literal.String.Doc */
main pre.code.literal-block > .s2 { color: var(--code-literal-string); background-color: #F6C17710; } /* Literal.String.Double */
main pre.code.literal-block > .se { color: var(--code-literal-string-escape); font-weight: bold } /* Literal.String.Escape */
main pre.code.literal-block > .sh { color: var(--code-literal-string) } /* Literal.String.Heredoc */
main pre.code.literal-block > .si { color: var(--code-literal-string-special); font-weight: bold } /* Literal.String.Interpol */
main pre.code.literal-block > .sx { color: var(--code-keyword) } /* Literal.String.Other */
main pre.code.literal-block > .sr { color: var(--code-literal-string-special) } /* Literal.String.Regex */
main pre.code.literal-block > .s1 { color: var(--code-literal-string); background-color: #EB6F9220; } /* Literal.String.Single */
main pre.code.literal-block > .ss { color: var(--code-name-variable) } /* Literal.String.Symbol */
main pre.code.literal-block > .bp { color: var(--code-keyword) } /* Name.Builtin.Pseudo */
main pre.code.literal-block > .vc { color: var(--code-name-variable) } /* Name.Variable.Class */
main pre.code.literal-block > .vg { color: var(--code-name-variable) } /* Name.Variable.Global */
main pre.code.literal-block > .vi { color: var(--code-name-variable) } /* Name.Variable.Instance */
main pre.code.literal-block > .il { color: var(--code-literal) } /* Literal.Number.Integer.Long */

tt, code {
  font-family: Inconsolata, Consolas, "DejaVu Sans Mono", monospace;
  background-color: var(--text);
  color: var(--background);
  padding: 2px;
  border-radius: 2px;
  white-space: pre-wrap;
}

    @supports (font-variation-settings: normal) {
    	tt, code {
        font-family: Inconsolata-var, Consolas, "DejaVu Sans Mono", monospace;
    	}
    }

tt::selection,
code::selection,
tt > .pre::selection,
code > .pre::selection {
  background-color: var(--red);
}

tt > .pre {
  color: var(--green);
}

pre::selection
{
  color: var(--text);
  background: var(--background);
}

/******************************************************************/
/*                      FORMS                                     */
/******************************************************************/

label {
  width: 200px;
  display: inline-block;
  text-align: right;
}

fieldset {
  border: 1.5px solid var(--lighter);
  border-radius: 4px;
}

fieldset > legend {
  color: var(--text);
  font-weight: 900;
}

input[type="text"], textarea {
  border: 1.5px solid var(--text);
  border-radius: 4px;
  padding: 4px;
}

input[type=checkbox], input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

input[type="checkbox"] + label::before {
  content: "[ ]";
  padding-right: 10px;
}

input[type="checkbox"]:hover + label::before, input[type="checkbox"] + label:hover::before {
  content: "[v]";
  color: var(--lighter);
}

input[type="checkbox"] + label::before {
  cursor: pointer;
}

input[type="checkbox"] + label {
  cursor: pointer;
}

input[type="checkbox"]:checked + label::before {
  content: "[v]";
}

input[type="radio"] + label::before {
  content: "( )";
  padding-right: 10px;
}

input[type="radio"]:hover + label::before, input[type="radio"] + label:hover::before {
  content: "(o)";
  color: var(--lighter);
}

input[type="radio"] + label::before {
  cursor: pointer;
}

input[type="radio"] + label {
  cursor: pointer;
}

input[type="radio"]:checked + label::before {
  content: "(o)";
}

/******************************************************************/
/*                      HEADER                                    */
/******************************************************************/

body > header, body > footer {
  align-content: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  max-width: 100ch;
  width: 100%;
}

    header .categories {
      align-self: flex-end;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

        header .categories a {
          margin-left: 0.5rem;
        }

    .sitename {
      font-size: 2em;
      line-height: 1;
    }
    
        .sitename > a {
          background-color: var(--text);
          border-bottom: none;
          border-radius: 2px;  
          color: var(--background);
          padding: 5px;
          padding-bottom: 0px;
        }
        
        .sitename > a:visited {
          border-bottom: none !important;
        }
    
    @media only screen and (max-width: 800px) {
      body > header, body > footer {
        justify-content: center;
        text-align: center;
      }
    }

/******************************************************************/
/*                      HEADER                                    */
/******************************************************************/

body > footer {
  background-color: var(--background);
  border: 1px solid var(--lighter);
  border-radius: 0.125rem;
  padding: 0.125rem 0.5em;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/******************************************************************/
/*                      ARTICLE_HEADER                            */
/******************************************************************/

main header {
  margin-bottom: 1rem;
  padding: 0rem 2rem 1rem 2rem;
  width: 100%;

  background-color: white;
  border: 1px solid var(--lila);
}

    main header > div:first-child, main header > div:last-child {
      display: flex;
      justify-content: space-between;
    }
    main header > div:first-child > *, main header > div:last-child > * {
      background-color: white;
      padding-left: 0.5em;
      padding-right: 0.5em;
    }
    
    main header h1 {
      color: var(--redorange);
      font-family: "Major Mono Display", Consolas, "DejaVu Sans Mono", monospace;
      font-size: 4em;
      line-height: 1.2;
      margin-bottom: 1rem;
      margin-top: 1rem;
      text-transform: lowercase;
    }

        @media only screen and (max-width: 800px) {
          main header h1 {
            font-size: 2em;
            letter-spacing: -3px;
            line-height: 1;
            text-align: center;
          }
        }

    main header .description {
      text-align: center;
      color: var(--dark);
      font-style: italic;
      padding-bottom: 1em;
    }

    main ul.metadata {
      margin: 0;
      padding: 0rem 0;
    }
    
    ul.metadata:before {
      /*content: "metadata";
      position: absolute;
      right: 0;*/
    }
    
    ul.metadata > li {
      display: grid;
      grid-template-columns: 12ch auto;
    }
        ul.metadata > li:before {
          content: none;
        }
    
        ul.metadata > li > span {
          font-weight: 900;
        }
    
        ul.metadata > li > span:before, ul.metadata > li > span:after {
          content: ":";
          font-weight: initial;
        }
    
        ul.metadata p {
          display: inline-block;
          padding: initial;
        }
    
        ul.metadata .tag + .tag {
          padding-left: 0.5rem;
        } 
/******************************************************************/
/*                      FOOTER                                    */
/******************************************************************/

.cta {
  background-image: radial-gradient(#f0ebf4 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  
  border: 1px solid rebeccapurple;
  border-radius: 0.25rem;
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
    .cta > *:not(:first-child) {
      border-left: 1px solid rebeccapurple;
    }

    .cta p {
      font-family: "Major Mono Display", Consolas, "DejaVu Sans Mono", monospace;
      font-size: 2rem;
      font-weight: 900;
      text-transform: lowercase;
    }
    
    .cta > * {
      margin: 0.5rem 0;
      text-align: center;
    }

    .cta a {
      background-color: var(--text);
      border-radius: 0.25rem;
      border-radius: 0.25rem;
      color: var(--background);
      color: var(--background);
      font-weight: 400;
      padding: 0.25rem;
      padding: 0.25rem;
      text-transform: uppercase;
      text-transform: uppercase;background-color: var(--text);
    }
    
    @media only screen and (max-width: 800px) {
      .cta {
        grid-template-columns: initial;
        grid-template-rows: 1fr 1fr 1fr;
      }
      
      .cta > :not(:first-child) {
        border-left: none;
        border-top: 1px solid rebeccapurple;
      }
    }
    
    footer nav a:not(:first-child) {
      border-left: solid var(--middle) 1.5px;
      padding-left: 0.5em;
    }

/******************************************************************/
/*                      DECORATIONS                               */
/******************************************************************/

.WIDE_CAPS {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.UPPERCASE {
  text-transform: uppercase;
}

.bracketed {
  font-weight: initial;
  border:none;
}
    .bracketed:before {
      content: "[";
      color: var(--middle);
    }

    .bracketed:after {
      content: "]" !important;
      color: var(--middle) !important;
      font-size: 1rem !important;
      font-weight: initial !important;
      padding-left: initial !important;
    }

    button.bracketed {
      background: none;
      font-family: Inconsolata, Consolas, "DejaVu Sans Mono", monospace;
      font-size: 18px;
    }

        @supports (font-variation-settings: normal) {
        	button.bracketed {
            font-family: Inconsolata-var, Consolas, "DejaVu Sans Mono", monospace;
        	}
        }

.bracketed.disabled {
  color: var(--middle);
}

.inverted-bracketed {
  font-weight: initial;
  border:none;
}
    .inverted-bracketed:before {
      content: "<";
    }

    .inverted-bracketed:after {
      content: ">" !important;
      font-size: 1rem !important;
      font-weight: initial !important;
      padding-left: initial !important;
    }

.pathed {
  font-weight: initial;
}
    .pathed:before {
      content: "/";
      color: var(--red);
      font-weight: 900
    }

.block  {
  background-color: var(--text); 
  border: 1px solid var(--text);
  color: var(--background);
  padding: 0 0.125rem;;
  border-radius: 2px
}

.inverted-block {
  border: 1px solid var(--text);
  border-radius: 2px;
  padding: 0 0.25rem;;
}

.ghost-block {
  background-color: var(--background);
  border: none;
  border-radius: 2px;
  padding: 2px;
}

.drop-cap-word {
  float: left;
  font-size: 1.5em;
  font-weight: 900;
  margin: 5px 5px 0 0;
  padding: 1px 5px 1px 5px;
  text-transform: uppercase;
}

hr {
  border: none;
  height: 1rem;
  margin: 2em 0;
  width: 100%;
}

.hatched {
  height: 1rem;
  width: 100%;
  position: relative;
}

    .hatched > * {
      z-index: 1;
    }
 
    .hatched::before {
      content: "-----------------------------------------------------------------------------------------------------------";
      color: var(--redorange);
      font-size: 1rem;
      font-weight: 400;
      height: 1rem;
      position: absolute;
      overflow: hidden;
      width: 100%;
    }

hr.hatched3 {
  margin: 0;
}
 
    .hatched3::before {
      content: "---";
      font-size: 1rem;
      font-weight: 400;
      height: 1rem;
    }

.dotgrid {
  margin: 1rem;
  height: 400px;
  
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  background-image: radial-gradient(var(--blue) 20%, #0000 40%);
}

.blink_smooth_2sec {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/******************************************************************/
/*                      SUMMARY_DETAILS                           */
/******************************************************************/

summary {
  background-color: #fff;
  border: 1.5px var(--text) solid;
  border-radius: 7px;
  cursor: pointer;
  padding: 10px;
}

details {
  border-left: 2px var(--middle) dotted;
  left: -5px;
  padding-left: 5px;
  position: relative;
}

/******************************************************************/
/*                      FRAMES                                    */
/******************************************************************/

.alert {
  background-color: white;
  background-image: radial-gradient(var(--light-red) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  border: 1px solid var(--red);
  color: var(--red);
  margin: 2rem;
  padding: 1rem !important;
}

.alert-full {
  background-color: var(--red);
  background-image: radial-gradient(var(--orange) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  color: var(--light-red);
  margin: 2rem;
  padding: 1rem !important;
}

.alert::before, .alert-full::before {
  content: "×";
  font-size: 1em;
  font-weight: 900;
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.warning {
  background-color: white !important;
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  background-image: radial-gradient(var(--light-red) 20%, #0000 40%);

  border-radius: 2px;
  border: 1px solid var(--orange);

  margin: 2rem;
  padding: 1rem !important;
}

.warning-full {
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  background-image: radial-gradient(var(--red) 20%, #0000 40%);

  background-color: var(--orange);
  border-radius: 2px;
  color: white;
  margin: 2rem;
  padding: 5px;
}

.warning:before, .warning-full:before {
  color: var(--orange);
  content: "/!\\";
  font-size: 1em;
  font-weight: 900;
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.success {
  background-color: white;
  border-radius: 2px;
  border: 1px solid var(--green);
  color: var(--green);
  margin: 2rem;
  padding: 1rem !important;
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  background-image: radial-gradient(var(--light-green) 20%, #0000 40%);
}

.success-full {
  background-color: var(--green);
  background-image: radial-gradient(var(--flat-green) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  color: var(--light-green);
  margin: 2rem;
  padding: 1rem !important;
}

.success::before, .success-full::before {
  content: "✓";
  font-size: 1em;
  font-weight: 900;
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.blue {
  background-color: white;
  background-image: radial-gradient(var(--light-blue) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  border: 1px solid var(--blue);
  color: var(--blue);
  margin: 2rem;
  padding: 1rem !important;
}

.blue-full {
  background-color: var(--blue);
  background-image: radial-gradient(var(--dark) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  color: var(--light-blue);
  margin: 2rem;
  padding: 1rem !important;
}

.blue::before, .blue-full::before {
  content: "(i)";
  font-size: 1em;
  font-weight: 900;
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.purple {
  background-color: white;
  background-image: radial-gradient(var(--light-blue) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  border: 1px solid var(--purple);
  color: var(--purple);
  margin: 2rem;
  padding: 1rem !important;
}

.purple-full {
  background-color: var(--purple);
  background-image: radial-gradient(var(--dark) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  color: white;
  margin: 2rem;
  padding: 1rem !important;
}

.dark {
  background-color: white;
  background-image: radial-gradient(var(--lightest) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  border: 1px solid var(--darkest);
  color: var(--dark);
  margin: 2rem;
  padding: 1rem !important;
}

.dark-full {
  background-color: var(--darkest);
  background-image: radial-gradient(var(--darker) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 2px;
  color: white;
  margin: 2rem;
  padding: 1rem !important;
}

/******************************************************************/
/*                      LAYOUTS                                   */
/******************************************************************/

/********************** ONE LINE FLEX CONTAINER *******************/
.flex-1line {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
 
  /*! justify-content: center; */
}

.flex-1line > * {
  flex: 1 1 0px;
  padding: 5px;
  text-align: center;
}

/********************** GRID GALLERY ******************************/

.images {
  display: grid;
  grid-auto-flow: row dense;
  grid-auto-rows: 25vh;
  grid-gap: 0.5em;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0.5em;
}

.images a {
  border: none;  
}
.images a img {
  border-radius: 5px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.images .g1x1 { grid-column-start: span 1; grid-row-start: span 1;}
.images .g2x1 { grid-column-start: span 2; grid-row-start: span 1;}
.images .g3x1 { grid-column-start: span 3; grid-row-start: span 1;}
.images .g4x1 { grid-column-start: span 4; grid-row-start: span 1;}
.images .g1x2 { grid-column-start: span 1; grid-row-start: span 2;}
.images .g2x2 { grid-column-start: span 2; grid-row-start: span 2;}
.images .g3x2 { grid-column-start: span 3; grid-row-start: span 2;}
.images .g4x2 { grid-column-start: span 4; grid-row-start: span 2;}
.images .g1x3 { grid-column-start: span 1; grid-row-start: span 3;}
.images .g2x3 { grid-column-start: span 2; grid-row-start: span 3;}
.images .g3x3 { grid-column-start: span 3; grid-row-start: span 3;}
.images .g4x3 { grid-column-start: span 4; grid-row-start: span 3;}
.images .g1x4 { grid-column-start: span 1; grid-row-start: span 4;}
.images .g2x4 { grid-column-start: span 2; grid-row-start: span 4;}
.images .g3x4 { grid-column-start: span 3; grid-row-start: span 4;}
.images .g4x4 { grid-column-start: span 4; grid-row-start: span 4;}


@media only screen and (max-width: 800px) {
  .images {
    grid-auto-rows: 25vh;
    grid-gap: 0.25em;
    grid-template-columns: 1fr 1fr;
  }

  .images .g1x1 { grid-column-start: span 1; grid-row-start: span 1;}
  .images .g2x1 { grid-column-start: span 2; grid-row-start: span 1;}
  .images .g3x1 { grid-column-start: span 2; grid-row-start: span 1;}
  .images .g4x1 { grid-column-start: span 2; grid-row-start: span 1;}
  .images .g1x2 { grid-column-start: span 1; grid-row-start: span 2;}
  .images .g2x2 { grid-column-start: span 2; grid-row-start: span 2;}
  .images .g3x2 { grid-column-start: span 2; grid-row-start: span 2;}
  .images .g4x2 { grid-column-start: span 2; grid-row-start: span 2;}
  .images .g1x3 { grid-column-start: span 1; grid-row-start: span 2;}
  .images .g2x3 { grid-column-start: span 1; grid-row-start: span 2;}
  .images .g3x3 { grid-column-start: span 2; grid-row-start: span 2;}
  .images .g4x3 { grid-column-start: span 2; grid-row-start: span 2;}
  .images .g1x4 { grid-column-start: span 1; grid-row-start: span 2;}
  .images .g2x4 { grid-column-start: span 1; grid-row-start: span 2;}
  .images .g3x4 { grid-column-start: span 2; grid-row-start: span 2;}
  .images .g4x4 { grid-column-start: span 2; grid-row-start: span 2;}
}

/******************************************************************/
/*                      PAGE_SPECIFICS                            */
/******************************************************************/

/********************** home_page *********************************/
body > header {
  max-width: initial;
  padding-top: 0;
}

.home > * {
}

main.home {
}
    @media only screen and (max-width: 800px) {
      main.home {
        grid-template-columns: 100%;
      }

      main.home > * {
        grid-column: 1 / 2;
      }
    }


    main.home section {
      margin: 2rem 0px;
      padding: 1rem;
    }

    main.home p, main.home ul {
      line-height: 1.5;
    }

    main.home .hi {
      background-color: revert;
    }
        main.home .hi h1 {
          background-color: var(--highlight-green);
          color: var(--flash-purple);
          font-size: 1rem;
          font-variation-settings: 'wght' 400, 'wdth' 400;
          line-height: 1;
          margin: 5rem auto 3rem auto;
          padding: 1em;
          white-space: pre;
          width: fit-content;
        }
            @media only screen and (max-width: 800px) {
              main.home .hi h1 {
                font-size: 6px;
              }
            }
        
        main.home .hi h2 {
          font-size: 1.5em;
          font-weight: 400;
        }
        
        main.home .hi .smoke_grenade {
          font-family: Inconsolata, Consolas, 'DejaVu Sans Mono', monospace;
          white-space: pre;
          line-height: 1;
          letter-spacing: 0;
          font-size: 0.75em;
          position: absolute;
          z-index: -1;
          top: 0;left: 50vw;
        }
    
    main.home section.summary {
      background-color: revert;
      position: relative;
    }
        main.home section.summary p {
          background-color: revert;
          text-align: center;
          font-size: 2rem;
          line-height: 1;
          font-weight: 900;
          max-width: 30ch;
          margin: 2rem auto;
        }

        main.home section.summary .summary_photo {
          width: 400px;
          position: absolute;
          z-index: -1;
          border-radius: 1rem;
          top: 9rem;
          right: 100%;
          transform: rotate(3deg);
        }

        main.home section.summary .summary_map {
          width: 800px;
          position: absolute;
          z-index: -1;
          border-radius: 2rem;
          top: 9rem;
          left: 70%;
          opacity: 30%;
        }

    main.home section.presentation {
      background-color: revert;
      margin-bottom: 0;
    }
        main.home section.presentation > * {
          max-width: 80%;
          background-color: var(--background);
          padding: 1rem;
          margin: 2rem auto;
          border-radius: 0.25rem;
          border: 1px solid var(--lighter);
        }
            main.home section.presentation p:first-child {
              background-color: white;
              border-color: var(--redorange);
            }

            main.home section.presentation .wtf img {
              float: left;
              position: absolute;
              left: -15rem;
              top: -5rem;
            }

    section.profile_picture {
      background-color: white;
      grid-column: 4 / 5;
      padding: 0.5rem 0.5rem 0.5rem 0.5rem;
      place-self: center center;
      text-align: center;
    }
        @media only screen and (max-width: 800px) {
          section.profile_picture {
            grid-column: initial;
          }
        }

        section.profile_picture div.figure {
          max-width: 300px;
          padding: revert;
        }

            .home section.profile_picture div.figure img {
              width: 100%;
            }

            .home section.profile_picture p.caption {
              background-color: white;
              text-shadow: revert;
              color: var(--text);
              font-style: initial;
            }
    
    main.home section.explore {
      border: 1px solid rebeccapurple;
      border-radius: 0.25rem;
      padding: 1rem;
    }

        main.home section h2 {
          margin-top: 0;
        }

        main.home section.explore ul {
          margin-left: 30px;
        }

            @media only screen and (max-width: 800px) {
              main.home section.explore ul {
                margin-left: 0;
              }
            }

        main.home section.explore li {
          color: var(--green);
          font-size: 2rem;
          list-style: decimal-leading-zero;
        }
            @media only screen and (max-width: 800px) {
              main.home section.explore li {
                font-size: 1.5rem;
              }
            }

            main.home section.explore li:before {
              content: none;
            }

        main.home a.interest {
          border-bottom: none;
          color: var(--orange);
          font-size: 4rem;
          font-variation-settings: 'wdth' 120;
          font-weight: 900;
          line-height: 1;
          margin: 0;
          text-transform: uppercase;
          letter-spacing: 3px;
        }
            main.home a.interest:hover {
              background-color: var(--green);
              color: var(--lila);
              box-shadow: inset 0 -1.3em var(--green);
            }
        
            main.home a.interest:before {
              display: none;
            }
            
            @media only screen and (max-width: 800px) {
              main.home a.interest {
                font-size: 2.5rem;
                letter-spacing: 1px;
              }
            }

    main.home section.dot_grid {
      grid-column: 1 / 2;
      background-color: revert;
    }
    

    main.home section.now {
      border-radius: 0.25rem;
      border: 1px solid var(--lighter);
    }
        main.home .now ul > li::before {
            content: none;
        }

        main.home .now ul > li {
          font-size: 1.5rem;
          font-weight: 300;
          line-height: 1;
          list-style: none;
          display: none;
        }
        
            main.home .now ul > li:nth-child(1) {
              display: revert;
              color: var(--text)
            }
            
            main.home .now ul > li:nth-child(2) {
              display: revert;
              color: var(--darker)
            }
            
            main.home .now ul > li:nth-child(3) {
              display: revert;
              color: var(--dark)
            }
            
            main.home .now ul > li:nth-child(4) {
              display: revert;
              color: var(--middle)
            }
            
            main.home .now ul > li:nth-child(5) {
              display: revert;
              color: var(--light)
            }
            
            main.home .now ul > li:nth-child(6) {
              display: revert;
              color: var(--lighter)
            }

    main.home section.recent {
      background-color: initial;
    }

.blink_lost_1sec {
  animation: lost 1s infinite step-start;
}

@keyframes lost {
  50% {
    color: var(--text);
  }
}

/* desktop layout */
@media only screen and (min-width: 1600px) {
  main.home section.summary {
    margin: 0;
  }
  main.home .hi h1 {
    margin: 3rem;
  }
  
  main.home section.hi .smoke_grenade {
    left: 46vw;
  }

  main.home section.summary .summary_photo {
    top: -1rem;
  }

  main.home section.summary .summary_map {
    top: -15rem;
  }
  
  main.home section.presentation .wtf{
    padding-left: 6rem;
  }

  main.home section.presentation .wtf img{
    left: -10rem;
  }

  main.home section.profile_picture {
    grid-column: revert;
  }

  main.home section.dot_grid {
    /*grid-column: revert;*/
    /* not sure why I need that */
    grid-column: 2 / 3;
  }

  main.home {
    display: grid;
    gap: 0px 0px;
    grid-template-areas:
    "hi              hi           hi      hi     "
    ".               summary      summary .      "
    "presentation    presentation now     now    "
    "presentation    presentation explore explore"
    "presentation    presentation recent  recent "
    "profile_picture .            recent  recent "
    ".               dot_grid     recent  recent ";

    grid-template-columns: 25% 25% 25% 25%; 
    grid-template-rows: repeat(auto);
  }

  main.home section.hi { grid-area: hi; }
  main.home section.summary { grid-area: summary; }
  main.home section.presentation { grid-area: presentation; }
  main.home section.profile_picture { grid-area: profile_picture; }
  main.home section.hatched { grid-area: hatched; }
  main.home section.explore { grid-area: explore; }
  main.home section.now { grid-area: now; }
  main.home section.dot_grid { grid-area: dot_grid; }
  main.home section.recent { grid-area: recent; }
}
/********************** subcategory_page *********************************/
@media only screen and (min-width: 800px) {
  main.subcategory {
    margin: 3rem;
  }
}

    main.subcategory h1 {
      font-size: 2rem;
      text-align: left;
      color: var(--blue);
      background-color: var(--highlight-green);
      width: fit-content;
      padding: 0 1rem;
    }
    main.subcategory .article-list {
      border-top: 0.125rem solid var(--lila);
      border-bottom: 0.125rem solid var(--lila);
      padding-bottom: initial;
    }

/********************** tags, tag and categories pages ********************/
@media only screen and (min-width: 800px) {
  main.tag, main.tags, main.categories {
    margin: 3rem;
  }
}

    main.tag h1, main.tags h1, main.categories h1 {
      font-size: 2rem;
      text-align: left;
      color: var(--blue);
      background-color: var(--highlight-green);
      width: fit-content;
      padding: 0 1rem;
    }

    main.tag .article-list, main.tags .article-list, main.categories .article-list {
      border-top: 0.125rem solid var(--lila);
      border-bottom: 0.125rem solid var(--lila);
      padding-bottom: initial;
    }

/************************ txt_page ********************************/
main.txt h1 {
  color: var(--text);
}

main.txt header {
}

    main.txt header h1 {
      font-size: 2rem;
      font-weight: 700;
      margin: 0;
      padding-bottom: 1rem;
      padding-top: 1rem;
      text-align: left;
    }
    
    main.txt header p.description {
      text-align: left;
    }
    
    main.txt > header:not(.section) {
      background-color: white;
    }

    main.txt .hatched::before {
      color: var(--dark)
    }


main.txt > .latest-txt {
  margin: 2rem auto;
  padding: 1rem;
  border: dashed 0.125rem var(--middle);
}
    main.txt > .latest-txt p {
      text-transform: uppercase;
      padding: 0;
    }
    main.txt > .latest-txt p:before {
      content: "::";}
    main.txt > .latest-txt p:after {
      content: "::";}

main.txt .article-list h2 {
  background-color: var(--text);
  color: var(--background);
  background-image: initial;
}

main.txt .article-list h3 {
  border: none;
  background-color: var(--text);
  color: var(--background);
}

main.txt > .section > h2 {
  background-color: var(--text);
  background-image: initial;
  border-color: var(--text);
  border-style: solid;
  border-width: 0.25rem 0.25rem 0rem 0.25rem;
  color: var(--background);
  display: block;
  font-family: revert;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  margin: 1rem 0 0 0.25rem;
  overflow-x: hidden;
  padding: 0;
  position: relative;
  text-transform: uppercase;
}

    main.txt > .section > h2 > a.headerlink {
      font-weight: 900;
      margin-left: 0.5rem;
      color: var(--orange);
    }

    main.txt > .section > h2::after {
      content: "=====================================================================================================";
      display: block;
      width: 0;
    }

main.txt > .section h3 {
  font-size: 1em;
  padding: 0;
  overflow-x: hidden;
  border-color: var(--highlight-blue);
  border-style: solid;
  border-width: 0 0.125em;
}

    main.txt > .section h3:after {
      content: "-----------------------------------------------------------------------------------";
      display: block;
      width: 0;
    }


main.txt .article-list article span {
  color: var(--middle);
}
main.txt .article-list ul {
  padding-left: 2rem;
}
    main.txt .article-list li::marker {
      color: var(--light);
    }

    main.txt .article-list li::before {
      color: var(--text);
      content: none;
    }

    main.txt .article-list li a {
      color: var(--text);
      letter-spacing: 1px;
      font-weight: initial;
    }
        main.txt .article-list li a:hover {
          color: var(--background);
        }

/********************** wiki_page *********************************/

main.wiki h1 {
  background: none;
}

.wiki-nav a {
    color: var(--redorange);
    border-bottom: none;
    font-size: 1.5em;
    font-weight: 700;
}

/********************** art_page *********************************/

.art.images {
  grid-auto-rows: 200px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

    .art.images > * {
      grid-column: initial;
    }

    .art > h1 {
      grid-column: 1 / 5;
    }
    
    .art > .image-link {
      height: initial;
      margin: 0.25em;
      max-width: initial;
    }

       art a.image-link > h2, .art a.image-link > h3 {
         font-size: 1.5rem;
         font-weight: 400;
       }

    .art > .art-highlight {
      border: dashed 0.5em var(--red);
      border-radius: 0;
      grid-column-start: span 2;
      grid-row-start: span 2;
      position: relative;
    }

        .art > .art-highlight::after {
          content: "RECENTLY UPDATED";
          font-size: 1.5rem;
          font-size: 1.5rem;
          font-size: 1.5rem;
          color: white;
          background: var(--red);
          height: fit-content;
          position: absolute;
          right: 0;
          margin: .25em;
          padding: 0 0.125em;
          line-height: 1;
        }

main.art header {
  padding: 1rem 2rem 2rem 2rem;
}

main.art header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}
main.art header p.description {
  padding: 0;
}

/********************** now_page *********************************/

main.now ul {
  padding-left: 0;
  color: var(--middle);
  line-height: 1;
}

    main.now li::before {
      content: none;
    }

    main.now li:nth-child(1) {
      color: var(--text);
    }
    
/********************** links_page *********************************/
main.links > .section {
  background-color: white;
  padding: 1rem;
  margin: 1rem 0;
}

main.links ul {
  line-height: 2;
}

main.links header {
  padding: 3rem;
  text-align: left;
}

main.links h1 {
  font-family: Inconsolata-var, "Major Mono Display", Consolas, "DejaVu Sans Mono", monospace;
  font-size: 5em;
  font-variation-settings: 'wght' 200, 'wdth' 150;
  letter-spacing: -9px;
  line-height: 1;
  text-transform: lowercase;
  text-align: left;
}

main.links h2 {
  margin-top: 0;
  background-color: initial;
  border: none;
  color: var(--blue)
}

main.links > #content {
  grid-column: 1;
  grid-row: span 3;
  height: fit-content;
  margin: 3rem auto;
  padding: 1rem;
  width: fit-content;
}
    main.links #content .topic-title {
      padding-top: 0;
    }

    @media only screen and (max-width: 800px) {
      main.links > #content {
        grid-column: 2 / 4;
      }
    }

#content        {background-color: white; border-color: var(--yellow);}
#administrative {background-color: var(--light-orange); border-color: var(--yellow);}
#medicine       {background-color: var(--light-blue); border-color: var(--blue);}

/********************** links_page *********************************/

main.canon .section
{
  background-color: white;
  padding: 1rem;
  margin: 1rem 0;
}

/********************** error_pages *********************************/

main.e404 > *, main.e403 > * {
  background-color: initial;
}

main.e404 h1 {
  color: var(--orange);
  font-size: 11rem;
  letter-spacing: -2rem;
}

main.e404 p:nth-child(2) {
  color: var(--orange);
  font-size: 3rem;
  padding: 1rem;
}

main.e404 h1::before, main.e404 h1::after {
  content: "🦺";
  letter-spacing: 0;
  font-size: 5rem;
  padding: 0 2rem;
}

main.e403 h1 {
  color: var(--red);
  font-size: 11rem;
  letter-spacing: -2rem;
}

main.e403 p:nth-child(2) {
  color: var(--red);
  font-size: 3rem;
  padding: 1rem;
}

main.e403 h1::before, main.e403 h1::after {
  content: "🚨";
  letter-spacing: 0;
  font-size: 5rem;
  padding: 0 2rem;
}

/********************** schlavagosIT *********************************/
main.schlavagosIT {
  display: initial;
}
main.schlavagosIT > * {
  max-width: 85%;
  margin: auto;
}

main.schlavagosIT header {
  background-color: white;
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  background-image: radial-gradient(var(--light-red) 20%, #0000 40%);
  border-radius: 0.5rem;
  border: 1px solid var(--orange);
  margin-bottom: 2rem;
}

    main.schlavagosIT header h1 {
      font-family: Inconsolata-var, Inconsolata, Consolas, "DejaVu Sans Mono", monospace;
      font-style: italic;
      font-variation-settings: 'wght' 100;
      font-weight: 100;
      text-transform: initial;
    }
    main.schlavagosIT header .speech-synth {
      display: none;
    }
    main.schlavagosIT header p.description {
      font-size: 2rem;
    }

main.schlavagosIT p.ethymology {
  padding: 5rem;
  font-size: 1.5rem;
  background-color: var(--highlight-blue);
  margin: 3rem 20rem;
}

main.schlavagosIT div.container > div {
  border-radius: 0.5rem;
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 0.5em;
  grid-template-columns: 1fr 1fr;
  padding: 0.5em;
  margin-bottom: 2rem;
}

main.schlavagosIT div.container > div:nth-child(odd) {
  background-color: var(--blue);
  color: var(--background);
}
main.schlavagosIT div.container > div:nth-child(even) {
  background-color: var(--background);
  color: var(--blue);
}

main.schlavagosIT div.container p {
  padding: 5rem;
  font-size: 3rem;
  font-style: italic;
  text-align: center;
}

div.container > a {
  display: block;
  margin: 3rem;
  height:400px;
  margin: auto;
}
    div.container > a > img {
      object-fit: cover;
      height: 400px;
      width: auto;
    }


@media only screen and (max-width: 800px) {
  main.schlavagosIT p.ethymology {
    margin: 2rem auto;
    padding: 1rem;
    font-size: 1rem;
  }

  main.schlavagosIT div.container {
    grid-template-columns: initial;
  }
  
  main.schlavagosIT div.container p {
    padding: 0;
    font-size: 1.5rem;
    font-style: italic;
    text-align: center;
  }
  
  main.schlavagosIT div.container img {
    width:100%
  }
}

/*..................... schlavagosIT ................................*/
/* sponsored article on sysadmin project page*/

article.schlavagos {
  padding: 1rem;
  background-color: var(--blue);
  color: var(--yellow);
  border-radius: 0.5rem;
  border: 2px solid var(--orange);
  background-image: radial-gradient(var(--highlight-pink) 20%, #0000 40%);
  background-position: 0px 0px;
  background-size: 0.25em 0.25em;
  border-radius: 0.5rem;
}
article.schlavagos h1 {
  margin: 0;
  text-align: left;
  line-height: 1;
}
article.schlavagos h2 {
  background: none;
  color: white;
  margin: 0;
}
article.schlavagos a {
  color: white;
  border-bottom-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
article.schlavagos p i {
  color: var(--yellow);
}

/*..................... thunderstorms ................................*/

div.header-container#thunderstorm-header {
  background-image: url('https://rsc.aligot-death.space/images/full/projects/thunderstorms/cumulonimbus_greyscale.png');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  grid-column: 1 / 5;
  margin-bottom: 2em;
  max-width: initial;
  object-fit: cover;
  image-rendering: pixelated;
}

  div.header-container#thunderstorm-header header h1  {
    font-family: Inconsolata-var, Inconsolata, Consolas, "DejaVu Sans Mono", monospace;
    font-size: 8em;
    font-variation-settings: "wght" 200;
    font-weight: 200;
    line-height: 1;
    margin-bottom: 0;
    margin-top: 0;
    text-transform: lowercase;
    letter-spacing: 1rem;
    color: var(--background);
    text-align: left;
  }

  div.header-container#thunderstorm-header header p  {
    font-size: 1.5em;
    text-align: left;
    color: var(--background);
  }

@media only screen and (max-width: 800px) {
  div.header-container#thunderstorm-header {
    padding: 1rem;
  }
  
  div.header-container#thunderstorm-header header h1  {
    font-size: 2rem;
    padding-top: 1rem;
    font-weight:400;
    letter-spacing: 5px;
  }
  
  div.header-container#thunderstorm-header header p  {
    font-size: 1em;
  }
}

@media only screen and (min-width: 800px) {
  div.header-container#thunderstorm-header {
    height: 600px;
    padding: 6rem;
  }
}


/******************************************************************/
/*                      RESPONSIVE                                */
/******************************************************************/

.desktop-only {
  display: none;
}

@media only screen and (min-width: 800px) {
  .desktop-only {
    display: initial;
  }
}

@media only screen and (max-width: 800px) {
  main header {
    padding-top: 0;
    padding-bottom: 0;
  }
  
      main header h1 {
        word-wrap: anywhere;
      }
  
  .align-center.image {
    width: 100%;
  }
}


/******************************************************************/
/*                      PRINT                                     */
/******************************************************************/


.printing {
  display: none;
}

@media print {
  :root {
    --lightest: #ffffff;
    --lighter:  #ffffff;
    --light:    #ffffff;
    --middle:   #888888;
    --dark:     #000000;
    --darker:   #000000;
    --darkest:  #000000;
  
    /* main components */
    --text: var(--darkest);
    --background: var(--lightest);
    --accent:       red;
    --orange: red;
  }

  .printing {
    display: initial;
  }
  .not-printing {
    display: none;
  }

  html {
    background: none;
    background-color: white;
  }
  
  body {
    margin: 0 !important;
    max-width: 100% !important;
  }
  
  body > header {
    display: none;  
  }
  
  main header {
    border: none;
  }
  
  main header h1 {
    font-size: 3rem !important;
  }
  
  main header > div:first-child {
    /*display: initial; */
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  main header > div:last-child {
    display:none;
  }
  
  .speech-synth {
    display: none;
  }
  
  h2 {
    page-break-before: always;
    page-break-after: avoid;
    position: initial !important;
    background: none !important;
    border: none !important;
    color: var(--text) !important;
    font-size: 1.5rem !important;
  }
  
  h3 {
    background: none !important;
    border: none !important;
    color: var(--text) !important;
    font-size: 1.2rem !important;
  }
  
  .hatched {
    background: none;
  }
  
  ul {
    page-break-inside: avoid;
  }
  
  p {
    max-width: initial !important; 
    orphans: 3;
    widows: 4;
  }
  
  .on-left.figure, .on-right.figure {
    width: 50% !important;
    margin: auto !important;
  }
  
  main a[href^='http']:not([href*='localhost:8000']):not([href*='aligot-death.space']):after {
    content: ' (' attr(href) ')';
    color: var(--red);
    font-size: 18px;
    font-style: italic;
  }
  
  details {
    border: none;
  }
  
  details, details > * {
    display:block !important;
  }
  
  .cta {
    display:none;
  }

  footer {
   display: none !important;
  }
}