/* Colors and fonts */

:root {
    --bg: #73806B;
    --fg: #ffffff;
    --tg: #FF9900;
    --dg: #65715E;
    --hg: #aab7a4;
    --font: Helvetica, sans-serif;
    --logo: serif, Times;
    --max: 1000px;
    --innen: 952px;
/*    --bild: 317px; */
    --bild: 100%;
    --borderwidth: 10px;
    --sitename: 40px;
    --blockmargin: 20px;
    --radius: 20px;
    --display: inline-block;
    --container: flex;
    --left: 5px;
    --navi: 3.5em;
    --navim : 10px;
    --navip : 10px;
    --navit: 10px;
}

:root2 {
    --bg: #00007f;
    --fg: #ffffff;
    --tg: #ee8800;
    --dg: #00007f;
    --hg: #aab7ff;
    --font: Helvetica, sans-serif;
    --logo: serif, Times;
}

@media only screen and (width < 1000px) {
  :root {
    --borderwidth: 5px;
    --sitename: 10px;
    --blockmargin: 10px;
    --radius: 10px;
    --max: attr(data-width);
    --innen: calc(100vw - 36px);
    --display: block;
    --bild: calc(50vw - 18px);
    --container: block;
    --left: 0;
    --navi: 2.5em;
    --navim : 0;
    --navip : 5px;
    --navit: 5px;
    }
}
@media only screen and (width <= 700px) {
  :root {
    --bild: calc(100vw - 30px);
    }
}

@media only screen and (width <= 400px) {
  :root {
    --borderwidth: 2px;
    --blockmargin: 0px;
    --radius: 5px;
    --bild: calc(100vw - 24px);
    --innen: calc(100vw - 32px);
    }
}


/* Dark theme */
/*
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: #000000;
    --tg: #ee8800;
    --dg: #ffffff;
    --hg: #73806B;
    --fg: #aab7a4;

  }
}
*/
/* General */

html {
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: var(--bg);
}

body {
    margin: 0;
    padding: 0;
    min-width: var(--max);
    max-width: var(--max);
    text-align: left;
    background-color: var(--fg);
    display: var(--display);
}

.page {
    margin: 0;
    padding: 0;
}

/*
.sitename h1::after {
    content: " ";
}
*/

.sitename h1 {
    margin: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 5px;
    padding-left: var(--sitename);
    padding-bottom: 10px;
    background-color: var(--bg);
}

.sitename a  {
    font-family: var(--logo);
    font-style: italic;
    color: var(--tg);
    text-decoration: none;
}

.header {
    margin: 0;
    padding: 0;
    padding-bottom: var(--blockmargin);
    background-color: var(--bg);
}

.navigation {
    margin: 0;
    padding: var(--navit);
    font-family: var(--font);
    font-weight: bold;
    text-align: center;
    color: var(--dg);
    background-color: var(--hg);
    border-color: var(--fg);
    border-width: var(--borderwidth);
    border-style: solid;
    border-radius: var(--radius);
    display: block;
}

.navigation a {
    margin: var(--navim);
    padding: var(--navip);
    font-family: sans-serif;
    font-style: normal;
    text-decoration: none;
    color: var(--dg);
    border-color:  var(--dg);
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    line-height: var(--navi);
}

.navigation a:hover {
    color: var(--fg);
    border-color:  var(--fg);
}

.navigation a.active {
    color: var(--fg);
}

.content img {
    width: var(--bild);
}

.content {
    margin: 0;
    padding: 10px;
    font-family: var(--font);
    color: var(--dg);
    background-color: var(--fg);
    border-color: var(--hg);
    border-width: var(--borderwidth);
    border-style: solid;
}

.content h1, .content h2, .content h3, .content h4  {
    margin: 0;
}

.content ul, .content ul ul {
    margin: 0;
    margin-left: 20px;
    padding: 0;
}

.content ol {
    margin: 0;
    margin-left: 20px;
    padding: 0;
    padding-left: 20px;
}

.content p {
    margin: 0;
    padding: 0;
    padding-bottom: 1em;
}

.content li > p {
    margin: 0;
    padding: 0;
    padding-top: 1em;
}

.content blockquote {
    margin: 0;
    padding: 10px;
    border-color: var(--dg);
    border-width: 2px;
    border-style: solid;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
}

.content code {
    margin: 0;
    padding: 10px;
    color: var(--fg);
    background-color: var(--bg);
    display: block;
}

.content table {
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse
}

.content td {
    padding: 5px;
    border-color: var(--dg);
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
}

.content a {
    color: var(--dg);
}

.content a:hover {
    color: var(--tg);
}

.content sup a {
    text-decoration: none;
}

.content sup a:hover {
    text-decoration: none;
}

.content a.footnote-backref {
    text-decoration: none;
}

.content iframe {
    width: 100%;
    height: 1000px;
}


.search-form .form-control {
    margin-top: 10px;
    margin-bottom: 10px;
    width: var(--innen);
}

.search-form .btn {
    font-size: 1em;
    width: calc(var(--innen) + 8px);
}

.search-form .entry-title a {
    text-decoration: none;
}

.search-form .entry {
    padding-bottom: 20px;
}

.sitemap {
    background-color: var(--fg);
}

.sitemap .sitemap-group {
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    color: var(--fg);
    background-color: var(--bg);
}

.sitemap-entry a {
    text-decoration: none;
    background-color: var(--fg);
}

.footer {
    margin: 0;
    padding: 0;
    padding-top: var(--blockmargin);
    font-family: var(--logo);
    font-style: italic;
    background-color: var(--bg);
}

.siteinfo {
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--dg);
    background-color: var(--hg);
    border-color: var(--fg);
    border-width: var(--borderwidth);
    border-style: solid;
    border-radius: var(--radius);
}

.container {
    margin: 0;
    padding: 0;
    color: var(--dg);
    width: 100%;
    display: var(--container);
}

.container div {
    margin: 0;
    margin-left: var(--left);
    padding: 0;
    width: 100%;
}

.container div img {
    margin: 0;
    padding: 0px;
    width: 100%;
}

.container div:first-child {
    margin-left: 0;
}

.error:nth-child(1) {
    font-size: 16em; 
    background-color: var(--dg);
    color: var(--tg); 
    text-align: center;
}

.error:nth-child(2) {
    font-size: 3em;
    text-align: center;
}