/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: pink;
  background-image: radial-gradient(red 60%, transparent 30%);
  background-size: 100px 100px;
  font-family: Courier, fantasy;
  body {
  
}

}

h1 {
  color: orangered;
  text-align: center;
}

p {
  color: darkorange;
  font-family: 'Courier New', Courier, monospace;
}

h2 {
  color: darksalmon;
}

a {
  color: hotpink;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

li:nth-child(1) { color: blueviolet; }   /* Books */
li:nth-child(2) { color: darkblue; } /* Music */
li:nth-child(3) { color: red; }    /* Film */
li:nth-child(4) { color: purple; } /* TV */
li:nth-child(5) { color: seashell; }   /* Knitting */

.seiten-liste {
  background-color: darkorange; /* Hintergrundfarbe */
  padding: 10px;               /* Abstand innen */
  border-radius: 10px;         /* abgerundete Ecken */
  width: 10%;          /* passt sich an die Liste an */
}

.header-container {
  background-color: darkorange;
  padding: 10px;               /* Abstand innen */
  border-radius: 10px;         /* abgerundete Ecken */
  width: 100%; 
  margin-left: auto;
  margin-right: auto;
}


.right {
  display: block;
  margin-left: auto;
  margin-right: 0;
}



.pages {
  background-color: indianred; /* Hintergrundfarbe */
  padding: 0px;               /* Abstand innen */
  border-radius: 5px;         /* abgerundete Ecken */
  width: 7%;  
}


.beispiele {
  background-color: indianred; /* Hintergrundfarbe */
  padding: 0px;               /* Abstand innen */
  border-radius: 5px;         /* abgerundete Ecken */
  width: 20%;  
  
}

.header-container {
  position: relative;
  /* Container als Referenz für das absolute Bild */
}

.header-container h1 {
  position: relative; /* nötig für z-index */
  z-index: 1;         /* Text liegt „unter“ oder „über“ */
}

.header-container .overlay {
  position: absolute; /* Bild absolut im Container positionieren */
  top: 0;             /* Abstand von oben */
  left: 10%;          /* horizontal zentrieren */
  transform: translateX(-50%);
  width: 100px;       /* Bildgröße */
  height: auto;
  z-index: 2;         /* liegt über dem Text */
}