* {
  margin: 0px;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/*mit dem stern werden im css alle Elemente angesprochen*/

body {
  background-color: blue;
}

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

.content {
  background-color: #5a18c9;
  height: 80vh;
}

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

.footer {
  background-color: #8450dc;
  height: 5vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.main-content {
  height: 100%;
  width: 75%;
  margin-left: 25%;
  padding: 20px;
  overflow: auto;
  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: right top;
  background-size: 10vh;
  background-attachment: local;*/

  background: url(Bilder/Daumen_Hoch_Transparent.png) no-repeat top right local
    #d4e4f7;
  background-size: 12%;
}

p {
  color: rgb(0, 0, 0);
}

a:visited {
  color: blueviolet;
}

a:hover {
  color: blue;
}
a:link {
  color: blueviolet;
  font-size: 2vh;
}

a:active {
  color: cornflowerblue;
}

.textinspalten {
  columns: 4;
  color: #d4e4f7;
  line-height: 120%;
  gap: 50px;
  background-color: rgba(25, 37, 206, 0.5);
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsgJ7b-fvJgKPvt4hZ_iWa1qZMoqpU5unZScp2BDoFCWPPxfUbyq84IcCfw2Ph6hhuVumrArCP_CGiah-l1xE2nYLnPb5ZOT56aF60QRfAQMoi78qfVzW8izY6UzhNTC0PWJpskSbhp4/s1600/gifs-on-cli.gif);
  background-size: contain;
}

h1 {
  color: #d4e4f7;
  font-size: 5vh;
}

h2 {
  font-size: 3vh;
}

h3 {
  font-size: 2vh;
}