/* Global CSS styling for all webpages of the website */

    @font-face
     {
      font-family: "Cantarell";
      src:
       local("Cantarell"),
       url("/font/Cantarell-VF.otf") format("opentype");
     }

    a
     {
      background-color: black;
      color: white;
      font-weight: 585;
      text-decoration: none;
     }

    body
     {
      background-color: black;
      color: white;
      font-family: "Cantarell";
      font-size: 1.2em;
      font-style: normal;
      font-weight: normal;
      hyphenate-character: "-";
      hyphens: auto;
      overflow-wrap: break-word;
     }

    cite
     {
      font-style: normal;
     }

/* Classes */

a.back_to_toc
 {
  outline-color: white;
  outline-style: solid;
  outline-width: 1px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
 }

a.interlink
 {
  text-decoration: underline;
 }

.end_of_h3_chapter
 {
  font-size: 1.6em;
  margin-bottom: 60px; 
  margin-top: 60px; 
  text-align: center;
 }

.glossar_headline
 {
  text-align: left;
 }

.h3_related_subtopics
 {
  font-size: 2.7em; /* Immer doppelten Wert wie die jeweilige Überschrift*/
  text-align: center;
 }

.h4_related_subtopics
 {
  font-size: 2.45em;
  text-align: center;
 }

.h5_related_subtopics
 {
  font-size: 2.2em;
  text-align: center;
 }

.h6_related_subtopics
 {
  font-size: 1.95em;
  text-align: center;
 }

hr.thick
 {
  border: 3px solid gray; /* Makes the horizontal line thicker */
 }

.link_for_toc
 {
  font-weight: normal;
 }

.link_in_a_headline_or_a_toc
 {
  font-weight: normal;
 }

/* This prevents text from being selected */
.disable_text_selection
 {
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
 }

img.image_styling 
 {
 background: white; 
 padding: 5px;
 }

p.back_to_toc
 {
  margin-top: 40px;
  text-align: center;
 }

p.chapter_lexicon
 {
  text-decoration: underline;
  font-size: 1.75em;
  margin-top: 40px;
 }

p.footer
 {
  text-align: center;
 }

p.image_description
 {
 font-size: 0.7em;
 margin-top: 0px;
 }

.quotation
 {
  background-color: white;
  color: black;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 10px;
  margin-top: 30px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  text-align: center
 }

.quotation_source
 {
  font-size: 0.7em;
  margin-top: 0px;
  margin-bottom: 45px;
  text-align: center;
 }

span.inline-bold
 {
 font-weight: bold;
 }

span.inline-bold-and-larger
 {
 font-size: 1.2em;
 font-weight: bold;
 }
/* End of classes section */

    code
     {
      background-color: white;
      color: black;
      font-family: "mono";
      font-style: normal;
      font-weight: normal;
      padding-bottom: 2px;
      padding-top: 1px;
      padding-left: 10px;
      padding-right: 10px;
     }

    details
     {
      outline-style: solid;
      outline-color: lightgray;
      padding: 5px;
     }

/* display: flex; in Verbindung mit justify-content: space-between; sorgt dafür, dass alle <p> Elemenete in der selben Zeile dargestellt werden, also nebeneinander. Zerquetscht allerdings den Inhalt bei schmalen Displays, deshalb am besten einfach die footer-Inhalte untereinandern anordnen. */
    footer
     {
     background-color: black;
     color: white;
     /*
     display: flex;
     justify-content: space-between;
     */
     outline-style: solid;
     outline-color: gray;
     padding-bottom: 1px;
     padding-left: 1px;
     padding-right: 1px;
     padding-top: 1px;
     }

/* Each headline is also an anchor link to itself. To overwrite the bold font-weight of the <a> element, this attribute is given to them too. */
    h1
     {
      background-color: black;
      color: white;
      font-size: 2.05em;
      font-style: normal;
      font-weight: 500;
      text-align: center;
     }

    h2
     {
      background-color: black;
      color: white;
      font-size: 1.5em;
      font-style: normal;
      font-weight: 600;
      margin-top: 35px;
      margin-bottom: 15px;
      text-align: left;
     }

    h3
     {
      background-color: black;
      color: white;
      font-size: 1.2em;
      font-style: normal;
      font-weight: 500;
      margin-top: 35px;
      margin-bottom: 15px;
      text-align: left;
     }

    h4
     {
      background-color: black;
      color: white;
      font-size: 1em;
      font-style: normal;
      font-weight: 500;
      margin-top: 35px;
      margin-bottom: 15px;
      text-align: left;
     }

    h5
     {
      background-color: black;
      color: white;
      font-size: 1.1em;
      font-style: normal;
      font-weight: 600;
      margin-top: 35px;
      margin-bottom: 15px;
      text-align: left;
     }

    h6 
     {
      background-color: black;
      color: white;
      font-size: 0.975em;
      font-style: normal;
      font-weight: 600;
      margin-top: 35px;
      margin-bottom: 15px;
      text-align: left;
     }

    hr
     {
      margin-bottom: 40px;
      margin-top: 40px;
     }

    img
     {
      background-color: black;
      color: white;
      max-width: 75%;
      max-height: 75%
     }

    li
     {
      list-style-type: ""; /* This removes the leading character from a list entry. I could use dash (-) here, but it could not be selected with the mouse in the parsed html, so I use the dash in the actual text. */
      margin-bottom: 1em;
      }

    p
     {
      background-color: black;
      color: white;
      font-size: 1em;
      font-style: normal;
      font-weight: normal;
      text-align: left;
     }

    pre
     {
      display: flex;
      overflow: auto;
     }

    summary
     {
      text-align: center
     }