html {
  scroll-behavior: smooth;
}

.wrapper {
  max-inline-size: 1500px;
  margin-inline: auto;
}

body {
  margin-block-start: 0;
  margin-block-end: 40px;
  margin-inline: 30px;
  line-height: 1.2rem;

  /* min-height: 100vh;
  Diese Funktion verlängert den body auf die gesamte Länge des Screens, falls man das irgendwann braucht */
}



/* AKORA SCHRIFTZUG */

#akora {
  padding: 40px;
  margin: 0px;
  /* margin-block-start: 30px; */
}

#akora img {
  margin-inline: auto;
}



/* PRIMARY NAVIGATION */

.primary-navigation { /* Dieser Befehl sorgt dafür, dass die nav bar auf allen seiten genauso lang ist, wie auf der Startseite */
  max-inline-size: 990px; /* eigentlich müssten das genau 1000px sein, da das 2/3 der 1500px vom wrapper sind - ich habe keine Ahnung wo die 10px hekommen, maybe irgendeine Border oder Padding, aber egl */
  margin-inline: auto;
}

.primary-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 15px;
  justify-content: space-evenly; /* maybe space-around wäre hier auch nett */
  margin-inline: auto;
}

.primary-navigation a {
  font-size: 1.5rem;
}



/* MAIN CONTENT */

section {
  padding: 30px;
  /* margin-block-end: 30px; das sollte immer gleich gesetz werden mit der oberen margin, die aktuell in der .akora class ist */
}

article {
  padding: 30px;
}

h1 {
  margin-block-start: 30px;
}

/* h2 {
    margin: 0;
} */

img {
  display: block;
  max-inline-size: 100%;
}


/* PROBMLEM:
Obwohl die Bilder der Icons an sich kleiner sind als die line-heigt, vergrößern sie trotzdem beim Einsetzen als Inline-Element die Höhe der Zeile. Es macht für mich nicht wirklich Sinn, ich möchte sie allerdings auch als Inline-Elemente behalten, da alles anderen das Platziren erheblich erschweren würde.
Ich müsste einen Weg finden, wie man sicherstellt, dass ein Bild, wenn es als Inline-Element behandelt wird, immer in der Mitte einer Zeile und nicht am oberen Ende platziert wird. Alternativ, könnte es auch daran liegen, dass es in einem <span> drin ist - dann müsste ich herausfinden, wie man anderweitig Bilder kategorisiert. Vielleicht kann man seine eigenen "ref=" erstellen oder denen in der Deklarierung bereits eine Class geben. */

.icon img {
  
  display: inline;

  position: relative;
  top: 2px;    /* Willkürliche anzahl an Pixeln, die jedes Icon nach unten verschoben wird, da es so aussah, als ob sie zu hoch im Vergleich zum Text wären  */
}

.icon {
  margin-inline-end: 3px; 
}

.blocksatz {
  text-align: justify
}