:root {
    --pink: #fe5186;
    --gray: #AAA7B3;
    --anthra: #292a2d;
}

.underline {
    text-decoration: underline;
}

.indexImg {
    border-radius: 50%;
    max-width: 20%;
}

@media (max-width: 767px) {
    .index-content {
        padding: 0.75rem;
    }
}


@media (min-width: 768px) {
    .index-content {
        width: 80ch;
    }
}

.index-content {
    border-bottom: 1px solid var(--border-color);
}

.socials {
    margin-top: 1rem;
}

.socials > a  {
    font-size: 2rem;
    text-decoration: none;
    transition: color 0.2s;
}

.socials > a:hover {
    color: pink;
}

kbd {
	margin: 0px 0.1em;
	padding: 0.1em 0.6em;
	border-radius: 3px;
	border: 1px solid black;
	color: white;
	line-height: 1.4;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	display: inline-block;
	box-shadow: 0px 1px 0px anthra, inset 0px 0px 0px 2px anthra;
	background-color: anthra;
	-moz-box-shadow: 0 1px 0px gray, 0 0 0 2px gray inset;
	-webkit-box-shadow: 0 1px 0px gray, 0 0 0 2px gray inset;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	text-shadow: 0 1px 0 gray;
}

footer :target {
  background: yellow;
}


a[role="doc-noteref"] {
    color: var(--pink);
    text-decoration: none;
}

a[role="doc-noteref"]:hover {
    text-decoration: underline;
}
li[role="doc-endnote"]:target {
    color: var(--pink);
}

li[role="doc-endnote"]:target::marker {
    color: var(--black);
}

@media (prefers-color-scheme: dark) {
    #search-query {
        background-color: var(--black);
        color:  var(--gray);
    }

li[role="doc-endnote"]:target::marker {
    color: var(--gray);
}
}

.index-content {
  text-align: left;
}


.index-content > p:last-child {
    margin: 0 0 5%;
}

.post-content {
  text-align: left;
}

.ox-hugo-toc .heading {
    font-size: 1.625em;
    line-height: 1.3;
    font-weight: bold;
    text-align: left;
}


.post--regulation {
  h1 {
    margin-top: -10px;
    justify-content: center;
  }

  h2 {
    justify-content: center;
    margin-bottom: 10px;

    &+ h2 {
      margin-top: -10px;
      margin-bottom: 20px;
    }
  }
}

.post-summary {
    margin-bottom: 1rem;
}

/* The svg inline images generated by org-mode are placed a little too high, so we adjust the bottom margin. Since we need to override defaults, we use !important.*/
img {
  display: inline;
  max-width: 100%;
  margin-bottom: -3.6px; !important;
}
  img.left {
    margin-right: auto;
  }

  img.center {
    margin-left: auto;
    margin-right: auto;
  }

/* There are some cases in which we want the image to be centered, so we define a new class .block-img which does just that. The important line is "line display: block"; the selection syntax only for this Markdown syntax:

<div class="...">
<img src="..." alt="..." class="img-newline" />
</div>

.*/

.img-newline img {
  display: block !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}

/* Environments are wrapped in the span class equation, so we need to target span.equation. Within this equation class, we want to target the img class so that the changes of the bottom margin we defined for the preview images are overwritten and the vertical distances both top and bottom are the same. See also https://teamtreehouse.com/community/how-do-i-correctly-target-the-span-element-within-a-class */

span.equation img {
  display: block !important;
  max-width: 100%;
  margin-left: -0,1cm !important;
  margin-right: -0,1cm !important;
}

/* Nowe we might want different styles depending on the environment we have. Personally, I want my definition environment to be different, so I define a .css class equation-definition and add #+ATTR_HTML: :class equation-definition before the definitions I give.

<div class="...">
<span class="class1">
<img src="..." alt="..." class="class2" />
</span>
</div>

*/

span.equation img.equation-definition {
  display: block !important;
  max-width: 100%;
  margin-left: -0,1cm !important;
  margin-right: -0,1cm !important;
  content: none;
}

/* org adds the span class equation-label to environments so that they get numbered. By default, this number is without parentheses and right-aligned. We want it to be left-aligned and with parentheses, though. */

span.equation-label {
  display: block !important;
  text-align: left;
  max-width: 100%;
  margin-left: -0.1 !important;
  margin-right: -0,1cm !important;
}


span.equation-label:before {
    content: '(';
}

span.equation-label:after {
    content: ')';
}

/* Now we want some cool hovering effect for our equation labels. We are using our custom color pink defined at the beginning of the document, so we need to use var(--pink).*/

span.equation-label:hover{
  font-weight: bold;
  color: var(--pink);
}



.equation-container .equation img[class="equation-double"] {
  display: block !important;
  max-width: 100%;
  margin-left: -0,1cm !important;
  margin-right: -0,1cm !important;
  margin-bottom: 0.3cm !important;
}

:root {
    --pink: #fe5186;
    --gray: #AAA7B3;
    --anthra: #292a2d;
}

.underline {
    text-decoration: underline;
}

.indexImg {
    border-radius: 50%;
    max-width: 20%;
}

@media (max-width: 767px) {
    .index-content {
        padding: 0.75rem;
    }
}


@media (min-width: 768px) {
    .index-content {
        width: 80ch;
    }
}

.index-content {
    border-bottom: 1px solid var(--border-color);
}

.socials {
    margin-top: 1rem;
}

.socials > a  {
    font-size: 2rem;
    text-decoration: none;
    transition: color 0.2s;
}

.socials > a:hover {
    color: pink;
}

kbd {
	margin: 0px 0.1em;
	padding: 0.1em 0.6em;
	border-radius: 3px;
	border: 1px solid black;
	color: white;
	line-height: 1.4;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	display: inline-block;
	box-shadow: 0px 1px 0px anthra, inset 0px 0px 0px 2px anthra;
	background-color: anthra;
	-moz-box-shadow: 0 1px 0px gray, 0 0 0 2px gray inset;
	-webkit-box-shadow: 0 1px 0px gray, 0 0 0 2px gray inset;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	text-shadow: 0 1px 0 gray;
}

footer :target {
  background: yellow;
}


a[role="doc-noteref"] {
    color: var(--pink);
    text-decoration: none;
}

a[role="doc-noteref"]:hover {
    text-decoration: underline;
}
li[role="doc-endnote"]:target {
    color: var(--pink);
}

li[role="doc-endnote"]:target::marker {
    color: var(--black);
}

@media (prefers-color-scheme: dark) {
    #search-query {
        background-color: var(--black);
        color:  var(--gray);
    }

li[role="doc-endnote"]:target::marker {
    color: var(--gray);
}
}

.index-content {
  text-align: left;
}


.index-content > p:last-child {
    margin: 0 0 5%;
}

.post-content {
  text-align: left;
}

.ox-hugo-toc .heading {
    font-size: 1.625em;
    line-height: 1.3;
    font-weight: bold;
    text-align: left;
}


.post--regulation {
  h1 {
    margin-top: -10px;
    justify-content: center;
  }

  h2 {
    justify-content: center;
    margin-bottom: 10px;

    &+ h2 {
      margin-top: -10px;
      margin-bottom: 20px;
    }
  }
}

.post-summary {
    margin-bottom: 1rem;
}

/* The svg inline images generated by org-mode are placed a little too high, so we adjust the bottom margin. Since we need to override defaults, we use !important.*/
img {
  display: inline;
  max-width: 100%;
  margin-bottom: -3.6px; !important;
}
  img.left {
    margin-right: auto;
  }

  img.center {
    margin-left: auto;
    margin-right: auto;
  }

/* There are some cases in which we want the image to be centered, so we define a new class .block-img which does just that. The important line is "line display: block"; the selection syntax only for this Markdown syntax:

<div class="...">
<img src="..." alt="..." class="img-newline" />
</div>

.*/

.img-newline img {
  display: block !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}

/* Environments are wrapped in the span class equation, so we need to target span.equation. Within this equation class, we want to target the img class so that the changes of the bottom margin we defined for the preview images are overwritten and the vertical distances both top and bottom are the same. See also https://teamtreehouse.com/community/how-do-i-correctly-target-the-span-element-within-a-class */

span.equation img {
  display: block !important;
  max-width: 100%;
  margin-left: -0,1cm !important;
  margin-right: -0,1cm !important;
}

/* Nowe we might want different styles depending on the environment we have. Personally, I want my definition environment to be different, so I define a .css class equation-definition and add #+ATTR_HTML: :class equation-definition before the definitions I give.

<div class="...">
<span class="class1">
<img src="..." alt="..." class="class2" />
</span>
</div>

*/

span.equation img.equation-definition {
  display: block !important;
  max-width: 100%;
  margin-left: -0,1cm !important;
  margin-right: -0,1cm !important;
  content: none;
}

/* org adds the span class equation-label to environments so that they get numbered. By default, this number is without parentheses and right-aligned. We want it to be left-aligned and with parentheses, though. */

span.equation-label {
  display: block !important;
  text-align: left;
  max-width: 100%;
  margin-left: -0.1 !important;
  margin-right: -0,1cm !important;
}


span.equation-label:before {
    content: '(';
}

span.equation-label:after {
    content: ')';
}

/* Now we want some cool hovering effect for our equation labels. We are using our custom color pink defined at the beginning of the document, so we need to use var(--pink).*/

span.equation-label:hover{
  font-weight: bold;
  color: var(--pink);
}

.equation-container .equation img[class="equation-double"] {
  display: block !important;
  max-width: 100%;
  margin-left: -0,1cm !important;
  margin-right: -0,1cm !important;
  margin-bottom: 0.3cm !important;
}

/* The vertical space between text and table is too big, so I adjust it. */

table {
  margin-bottom: 0.2cm !important;
  margin-top: 0.2cm !important;
}

.figure {
    text-align: center
}

/* Für Handy (z. B. bis 768px Breite) */
@media screen and (max-width: 768px) {
  .indexImg {
    width: calc(100vw - 2rem);       /* Vollbreite minus 2rem seitlich */
    max-width: none;
    /* margin-left: calc(-50vw + 50% + 1rem); /\* zentriert mit 1rem Rand links/rechts *\/ */
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 1.5rem;               /* Abstand nach oben */
  }
}

/* Mit diesem Code erzeugen wir horizontale Trennlinien zwischen den Posts */
.posts > .post-container:not(:last-of-type) {
    border-bottom: 1px solid var(--border-color);
}

/* Speziell für Laptop-/Standbildschirme */
@media screen and (min-width: 1025px) {
    /* Dieser Code sorgt dafür, dass für jeden Post-Eintrag in der Liste links neben den Daten wie Titel, */
    /* Datum und Mehr lesen das dazugehörige Bild erscheint */
    .post-container {
        display: flex !important;
        gap: 20px !important;       /*horizontaler Abstand zwischen Bild und Post*/
        align-items: flex-start !important;
    }

    .post-image {
        width: 200px;               /*Höhe gleich wie */
        height: 200px;              /*Breite*/
        border-radius: 50% !important; /*macht das Bild rund*/
        overflow: hidden !important;   /*überschreibe defautl*/
        align-self: center;         /*horizontal mittig zum post-container alignen*/
    }

}