@font-face {
  font-family: "D-DIN"; src:
       url('/fonts/D-DIN/D-DIN.woff') format('woff'),
       url('/fonts/D-DIN/D-DIN.woff2') format('woff2'),
       url('/fonts/D-DIN/D-DIN.otf') format('opentype'),
       url('/fonts/D-DIN/D-DIN.ttf') format('truetype'),
       url('/fonts/D-DIN/D-DINCondensed.woff') format('woff'),
       url('/fonts/D-DIN/D-DINCondensed.woff2') format('woff2'),
       url('/fonts/D-DIN/D-DINCondensed.otf') format('opentype'),
       url('/fonts/D-DIN/D-DINCondensed.ttf') format('truetype'),
       url('/fonts/D-DIN/D-DINExp.woff') format('woff'),
       url('/fonts/D-DIN/D-DINExp.woff2') format('woff2'),
       url('/fonts/D-DIN/D-DINExp.otf') format('opentype'),
       url('/fonts/D-DIN/D-DINExp.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "D-DIN"; src:
       url('/fonts/D-DIN/D-DIN-Italic.woff') format('woff'),
       url('/fonts/D-DIN/D-DIN-Italic.woff2') format('woff2'),
       url('/fonts/D-DIN/D-DIN-Italic.otf') format('opentype'),
       url('/fonts/D-DIN/D-DIN-Italic.ttf') format('truetype'),
       url('/fonts/D-DIN/D-DINExp-Italic.woff') format('woff'),
       url('/fonts/D-DIN/D-DINExp-Italic.woff2') format('woff2'),
       url('/fonts/D-DIN/D-DINExp-Italic.otf') format('opentype'),
       url('/fonts/D-DIN/D-DINExp-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "D-DIN"; src:
       url('/fonts/D-DIN/D-DIN-Bold.woff') format('woff'),
       url('/fonts/D-DIN/D-DIN-Bold.woff2') format('woff2'),
       url('/fonts/D-DIN/D-DIN-Bold.otf') format('opentype'),
       url('/fonts/D-DIN/D-DIN-Bold.ttf') format('truetype'),
       url('/fonts/D-DIN/D-DINCondensed-Bold.woff') format('woff'),
       url('/fonts/D-DIN/D-DINCondensed-Bold.woff2') format('woff2'),
       url('/fonts/D-DIN/D-DINCondensed-Bold.otf') format('opentype'),
       url('/fonts/D-DIN/D-DINCondensed-Bold.ttf') format('truetype'),
       url('/fonts/D-DIN/D-DINExp-Bold.woff') format('woff'),
       url('/fonts/D-DIN/D-DINExp-Bold.woff2') format('woff2'),
       url('/fonts/D-DIN/D-DINExp-Bold.otf') format('opentype'),
       url('/fonts/D-DIN/D-DINExp-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

* {
  font-family: "D-DIN", "Noto Sans", Calibri, sans-serif;
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #eeeee4;
  color:#2d4654;
  display: flex;
  flex-direction: column;
  font-family: "D-DIN", "Noto Sans", Calibri, sans-serif;
  font-size: large;
  margin:40px auto;
  max-width:800px;
  min-height: 100%;
  padding:0 10px;
  text-align: justify;
  --pagefind-ui-background: #e5e4e2;
  --pagefind-ui-border: #696969;
}

html,
body {
  width: 100%;
  height: 95%;
}

main {
  flex-grow: 1;
}

h1,h2,h3 {
  line-height:1.2
}

a:link {
  color: blue;
  font-weight: bold;
  text-decoration: none;
}

a:visited {
  color: blue;
  font-weight: bold;
  text-decoration: none;
}

hr {
  border-color: #222222;
}

pre {
	background: #e5e4e2;
	padding: 24px;
	white-space: pre-wrap;
  word-break: break-word;
  max-width: 800px !important;
  margin-top: 0;
}

article {
  padding:24px 0;
  text-align: justify;
  max-width:800px;
}

code {
  text-align: left;
}

.searchbutton {
  float: right;
  width: 30px;
  height: 30px;
  padding: 2px;
  cursor: pointer;
}

#italic {
  font-style: italic;
}

#footer_r {
  display: inline-block;
  justify-content: space-between;
  text-align: right;
  float: right;
  margin: 0;
  font-style: italic;
  height: 5%;
}

#footer_l {
  display: inline-block;
  justify-content: space-between;
  text-align: left;
  float: left;
  margin: 0;
  font-style: italic;
  height: 5%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* dark mode */

body.dark-mode  {
  color:#b7b7b7;
  background:#0f0f0f;
  max-width:800px;
  --pagefind-ui-primary: #eeeeee;
  --pagefind-ui-text: #b7b7b7;
  --pagefind-ui-background: #222222;
  --pagefind-ui-border: #767676;
  --pagefind-ui-tag: #222222;
}

/*
*/
.dark-mode a:link {
  color:blue;
  font-weight: bold;
  text-decoration: none;
}
.dark-mode a:visited {
  color: blue;
  font-weight: bold;
  text-decoration: none;
}
.dark-mode .isso-post-action input,
.dark-mode .isso-input-wrapper input {
  background: #a9a9a9 !important;
}
.dark-mode .isso-textarea,
.dark-mode .isso-preview {
  background: #a9a9a9 !important;
  color: #000000 !important;
}
.dark-mode pre {
  background:#222222;
  padding: 24px;
  white-space: pre-wrap;
  word-break: break-word;
  max-width:800px !important;
  margin-top: 0;
}
.dark-mode h1 {
  color: #b65506;
}
.dark-mode h2,
.dark-mode h3 {
/*  color:#1f8bd5;
  color:#b7b7b7; */
  color: #7d7d7d;
}

/* search */

/*
.search-field {
  background: #ffffff;
  padding: 2px;
  margin-top: 0;
  border-radius:5px;
  float: right;
  width: 20%;
  min-height: 30px;
}
*/

/* Style the search field */
form.search-field input[type=search] {
  padding: 2px;
  font-size: large;
  font-weight: bold;
  border: 1px solid grey;
  float: right;
  width: 20%;
  height: 25px;
  background: white;
  border-radius:5px 0px 0px 5px;
  border-right: none; /* Prevent double borders */
}

/* Style the search field */
.dark-mode form.search-field input[type=search] {
  background: grey;
  color: white;
}

.dark-mode form.search-field::placeholder input[type=search] {
  background: black;
  color: black;
}

.dark-mode ::placeholder {
    color: white;
    opacity: 1; /* Firefox */
      
}

/* Style the submit button */
form.search-field button {
  float: right;
  width: 25px;
  height: 25px;
  padding: 2px;
  background: grey;
  color: white;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
  border-radius:0px 5px 5px 0px;
}

form.search-field button:hover {
  background: #0b7dda;
}

/* Clear floats */
form.search-field::after {
  content: "";
  clear: both;
  display: table;