* {
  margin: 0px;
  box-sizing: border-box;
  font-family: "Arial";
}
/*mit dem * werden alle Elemente auf CSS angesprochen*/
body {
  background-color: pink;
  box-sizing: border-box;
}

.header {
  background-color: #b8208a;
  text-align: center;
  height: 15vh;
  padding: 20px;
  background-image: url(Bilder/johak-schrift-weiss.png);
  background-repeat: no-repeat;
  background-position: top right;
}

.content {
  background-color: violet;
  height: 80vh;
}

.sidebar {
  background-color: mediumorchid;
  height: 100%;
  width: 25%;
  float: left;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.main-content {
  background-color: magenta;
  height: 100%;
  width: 75%;
  margin-left: 25%;
  padding: 20px;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;

  /*
  background-image: url(Bilder/Daumen_Hoch_Transparent.png);
  background-repeat: no-repeat;
  background-position: top right; 
   background-attachment: local; */
  background: url(Bilder/Daumen_Hoch_Transparent.png) no-repeat top right local;
  background-size: 20%;
}

.footer {
  background-color: palevioletred;
  height: 5vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
}

a:hover {
  color: lightskyblue;
}
a:visited {
  color: black;
}
a:active {
  color: red;
}
a:link {
  color: greenyellow;
}

.textspalten {
  columns: 4;
  line-height: 150%;
  gap: 20px;
  background-color: rgba(199, 12, 143, 0.5);
  background-image: url(Bilder/kelvin.jpg);
  background-size: auto;
}