/* -<< ARTSTYLE DES BLOGS >>- */

/* DIESE CSS FILE REGELT ALLES REIN DEKORATIVE DES BLOGS - VOR ALLEM HINSICHTLICH FARBEN, HINTERGRÜNDEN UND SCHRIFTART */

/* FARBEN:

Gelb
  | #f2cb5e - dunkel: #42371a
  | #e9b447
  | #dc9034 - dunkel: #2c1c0a
Orange

Hell Türkis
 | #6de9d2
 | #3ccaca (Primäre Hintergrundfarbe)
 | #2aa0b4
Dunkel Türkis

Gelbliches Weiß
| #f1ebdf

*/

/* >/ ALLGEMEIN \< */

@font-face {
  font-family: "eldring";
  src: url("../fonts/Eldring.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: #3ccaca; /* Failsafe, falls das Hintergrundbild nicht lädt */
  background-image: url("../images/blog-bg.png");
  background-position: top;
  font-family: "eldring", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
}

section {
  background-color: #f2cb5e;
  color: #2c1c0a;
  /* text-decoration: solid underline #e9b447; */
}

a {
  color: #2aa0b4;
  text-decoration: solid underline #2aa0b4;
}

h2, h1 {
  text-decoration: solid underline #dc9034;
}

.highlighter {
  color: #2aa0b4;
  text-decoration: solid underline #e9b447
}

.unhighlighter {
  color: #2c1c0a;
}

.no-margin-oben {
  margin-block-start: 0;
} /* Diese beiden Funktionen sind Band-Aid-Lösungen für das Margin-Problem der bild-in-text-Funktion */
.no-margin-unten {
  margin-block-end: 0;
}

/* {Für Bilder} */
.bilder-rand {
  border: 5px solid #f1ebdf;
  border-radius: 5px;
  background-color: #f1ebdf;
  box-shadow: 0px 0px 8px #0f0916;
}

.bild-unterschrift {
  margin-inline-start: 5px;
  text-align: center;
  color: #dc9034;
  background-color: #f1ebdf;
}

/* {Rand des Main Textfensters} */
.rand-textfenster {
  display: grid;
  grid-template-columns: 1fr 100fr 1fr; /* 100fr ist hier nur eine willkürliche sehr hohe Zahl, um sicherzugehen, dass der Rand auch nur den Platz bekommt, den ich ihm in den einzelnen Befehlen zuteile */
}

#ecke-lo {
  height: 15px;
  width: 15px;
  background-image: url(../images/blog-rand/blog-text-bg-ecke-lo.png);
}
#rand-o {
  height: 15px;
  background-image: url(../images/blog-rand/blog-text-bg-rand-o.png);
}
#ecke-ro {
  height: 15px;
  width: 21px;
  background-image: url(../images/blog-rand/blog-text-bg-ecke-ro.png);
}
#rand-l {
  width: 15px;
  background-image: url(../images/blog-rand/blog-text-bg-rand-l.png);
}

#rand-r {
  width: 21px;
  background-image: url(../images/blog-rand/blog-text-bg-rand-r.png);
}
#ecke-lu {
  height: 21px;
  width: 15px;
  background-image: url(../images/blog-rand/blog-text-bg-ecke-lu.png);
}
#rand-u {
  height: 21px;
  background-image: url(../images/blog-rand/blog-text-bg-rand-u.png);
}
#ecke-ru {
  height: 21px;
  width: 21px;
  background-image: url(../images/blog-rand/blog-text-bg-ecke-ru.png);
}

/* {NAVIGATION} */
.primary-navigation a {
  font-size: 1.5rem;
  color: #2c1c0a;
  font-weight: bold;
  text-decoration: none;
  background-color: #dc9034;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible {
  color: #2c1c0a;
}

.active-site {
  color: #42371a;
}

.nav-ecke-lo {
  height: 12px;
  width: 12px;
  background-image: url(../images/blog-rand/nav-blog-text-bg-ecke-lo.png);
}
.nav-rand-o {
  height: 12px;
  background-image: url(../images/blog-rand/nav-blog-text-bg-rand-o.png);
}
.nav-ecke-ro {
  height: 12px;
  width: 18px;
  background-image: url(../images/blog-rand/nav-blog-text-bg-ecke-ro.png);
}
.nav-rand-l {
  width: 12px;
  background-image: url(../images/blog-rand/nav-blog-text-bg-rand-l.png);
}

.nav-rand-r {
  width: 18px;
  background-image: url(../images/blog-rand/nav-blog-text-bg-rand-r.png);
}
.nav-ecke-lu {
  height: 18px;
  width: 12px;
  background-image: url(../images/blog-rand/nav-blog-text-bg-ecke-lu.png);
}
.nav-rand-u {
  height: 18px;
  background-image: url(../images/blog-rand/nav-blog-text-bg-rand-u.png);
}
.nav-ecke-ru {
  height: 18px;
  width: 18px;
  background-image: url(../images/blog-rand/nav-blog-text-bg-ecke-ru.png);
}