/*******************************************************************
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
  links_page
  error_pages
  schlavagosIT
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;
}

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

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

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

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

/* inconsolata-900 - latin-ext_latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 900;
  src: url('/resources/webfonts/inconsolata/inconsolata-v20-latin-ext_latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/resources/webfonts/inconsolata/inconsolata-v20-latin-ext_latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/resources/webfonts/inconsolata/inconsolata-v20-latin-ext_latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/resources/webfonts/inconsolata/inconsolata-v20-latin-ext_latin-900.woff') format('woff'), /* Modern Browsers */
       url('/resources/webfonts/inconsolata/inconsolata-v20-latin-ext_latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/resources/webfonts/inconsolata/inconsolata-v20-latin-ext_latin-900.svg#Inconsolata') 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-var, Inconsolata, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 18px;
  line-height: 1.5;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
    @media only screen and (max-width: 800px) {
      html {
        /*background-color: var(--background);
        background-image: unset;*/
      }
    }

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;
      grid-template-columns: subgrid;
    }

        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 > .section > .on-left + *    , main.projects > .section > .on-left + *      {grid-column: 3 / 4;}
  main.txt .over-left  , main.projects .over-left   {grid-column: 1 / 3; text-align:right}                 main.txt > .section > .over-left + *  , main.projects > .section > .over-left + *    {grid-column: 3 / 4;}
  main.txt .float-left , main.projects .float-left  {grid-column: 2 / 3; text-align:center;}               main.txt > .section > .float-left + * , main.projects > .section > .float-left + *   {grid-column: 3 / 4;}
                                                                                                                                                                                       
  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 > .section > .float-right + *, main.projects > .section > .float-right + *   {grid-column: 2 / 3;}
  main.txt .over-right , main.projects .over-right  {grid-column: 3 / 5; text-align:left;}                 main.txt > .section > .over-right + * , main.projects > .section > .over-right + *    {grid-column: 2 / 3;}
  main.txt .on-right   , main.projects .on-right    {grid-column: 3 / 5; text-align:left;}                 main.txt > .section > .on-right + *   , main.projects > .section > .on-right + *      {grid-column: 2 / 3;}
}

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

  main.txt .on-left     {grid-column: 1 / 2; text-align:center; height: 10px}
  main.txt .over-left   {grid-column: 1 / 3; text-align:right}                 main.txt > .section > .over-left + *   {grid-column: 3 / 4;}
  main.txt .float-left  {grid-column: 2 / 3; text-align:center;}               main.txt > .section > .float-left + *  {grid-column: 3 / 4;}
  
  main.txt .center      {grid-column: 2 / 4; text-align: center;}
  main.txt .full-center {grid-column: 1 / 5; text-align: center;}
  
  main.txt .float-right {grid-column: 3 / 4; text-align:center;}               main.txt > .section > .float-right + *  {grid-column: 2 / 3;}
  main.txt .over-right  {grid-column: 3 / 5; text-align:left;}                 main.txt > .section > .over-right + *   {grid-column: 2 / 3;}
  main.txt .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(--green);
      font-size: 8em;
      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: linear-gradient(90deg, rgba(0,255,194,0.5) 0%, rgba(0,255,88,0.5) 100%);
  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-bottom: 1.5em;
    }

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

    p.caption {
      color: var(--background);
      font-style: italic;
      background-color: var(--text);
      display: inline-block;
      line-height: 1;
      padding: 0.125rem;
      text-shadow: -1px -1px 0px #fff7, 1px 1px 0px #0007;
    }

strong {
  font-weight: 900;
}

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

li {
  list-style: none;
}

ul {
  margin-top: 0;
}

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*='nemecl.eu']):after {
      color: var(--middle);
      content: "🔗";
      font-size:0.5em;
      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);
  font-family: Inconsolata, Consolas, "DejaVu Sans Mono", monospace;
  margin-right: 10px;
  padding: 2px;
}

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

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: "#";
    }

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;
  padding: 0.5rem;
  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 {
  color: var(--redorange);
	font-style: italic;
}

		blockquote::before {
			content: "«\00a0";
      float: left;
		}
		
		blockquote::after {
		  content: "\00a0»";
      float: right;
		}

blockquote.pull-quote + p {
  padding-left: 3rem;
}

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

/******************************************************************/
/*                      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;
    }
    
/******************************************************************/
/*                      CODE_HIGHLIGHTING                         */
/******************************************************************/

.literal {
  padding: 0.125rem 0.25rem;
  background-color: var(--light-green);
  color: var(--orange);
  border-radius: 0.235rem;
  border: 1px solid var(--light);
}

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 {
      background-color: var(--text);
    }
    main pre.code::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.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: var(--darker);
  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;
}

pre > .s1 {
  color: var(--orange);
}

pre > .nb {
  color: var(--yellow);
}

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

pre > .n {
  color: var(--middle);
}

pre > .o {
  color: #7eb2b8;
}

pre > .sd {
  color: var(--red);
}

pre > .c1 {
  color: #d97fc8;
}


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;
}

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;
    }

    .sitename {
      font-family: Inconsolata, Consolas, "DejaVu Sans Mono", monospace;
      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-top: 3em;
  padding-bottom: 4em;
	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;
    }
/******************************************************************/
/*                      FOOTER                                    */
/******************************************************************/

.share {
  margin: 2rem 0;
  text-align: center;
}

    .share a {
      background-color: var(--darkest);
      border-radius: 2px;
      color: var(--lightest);
      padding: 5px;
    }

footer nav a:not(:first-child) {
  border: ;
  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;
}
    .bracketed:before {
      content: "[";
    }

    .bracketed:after {
      content: "]";
    }

.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.25rem;;
  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 {
  width: 100%;
  position: relative;
}

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


.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;
}

.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 .hi {
      background-color: revert;
    }
        main.home .hi h1 {
          background-color: var(--orange);
          color: rebeccapurple;
          font-size: 1rem;
          font-family: Inconsolata-var, Major Mono Display, Consolas, "DejaVu Sans Mono", monospace;
          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 section.summary {
      background-color: revert;
    }
        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.presentation {
      background-color: revert;
    }
        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);
            }

    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: 0.2rem solid rebeccapurple;
      padding: 1rem;
    }

        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(--green);
          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 .now ul > li {
      font-size: 2em;
      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)
    }

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

@keyframes lost {
  50% {
    color: var(--text);
  }
}
/********************** 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:not(.section) {
  background-color: white;
}


main.txt > .latest-txt {
  margin: 2rem auto;
  padding: 1rem;
  border: solid 0.0625rem 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);
  border: none;
  color: var(--background);
  background-image: initial;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0;
  margin: 1rem 0 0 0;
  padding: 0.25rem 0.25rem;
  width: fit-content;
}

    main.txt > .section > h2 > a.headerlink {
      font-weight: 900;
      margin-left: 0.25rem;
    }


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);
      font-weight: initial;
    }
        main.txt .article-list li a:hover {
          color: var(--background);
        }

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

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

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

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

    .art > * {
      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;
        }

/********************** 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-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);
}

/******************************************************************/
/*                      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;
	}

	html {
	  background: none;
	  background-color: white;
	}
	
	body {
	  font-size: 24px;
	  margin: 0 !important;
	  max-width: 100% !important;
	}
	
	body > header {
	  display: none;  
	}
	
	
	main header > div:first-child, main header > div:last-child {
	  /*display: initial; */
	  justify-content: center;
	  text-align: center;
	  width: 100%;
	}
	
	.speech-synth {
	  display: none;
	}
	
	h2 {
	  page-break-before: always;
	  page-break-after: avoid;
	  position: initial !important;
	}
	
	.hatched {
	  background: none;
	}
	
	ul {
	  page-break-inside: avoid;
	}
	
	p {
	  max-width: initial !important; 
	  orphans: 3;
	  widows: 4;
	}
	
	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;
	}
}