h1, h2, h3, body, .chapter-content, .chapter-title {
  font-family: 'PT Mono';
  font-size: 16px;
  font-style: normal;
  font-variation-settings: "wght" 400;
  margin: 0;
  padding: 0;
  margin-left: 0%;
  margin-right: 0%;
}

h1{
  color: blue;
  font-weight: 2rem;
  line-height: 1.3;
  font-size: 60px;
}

h2{
  color:red;
  font-weight: 3rem;
  line-height: 1;
  font-size: 80px;
  margin-top: 15px;
}

h3{
  color: red;
  font-weight: 3rem;
  line-height: 1.3;
  font-size: 20px;
  padding-top: 20px;
  padding-bottom:10px;
  margin-left: 1%;
  
}
h4{
  color: red;
  line-height: 1.3;
  font-size: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 1%;
  
}

h5{
  color: blue;
  line-height: 1.3;
  font-size: 16px;
  margin-left: 1%;
  
}
.titel{
  color:blue;
  font-weight: 2rem;
  line-height: 1.3;
  font-size: 50px;
  background-color: white;
  border: solid blue 4px;


}

.impressum-link{
  color:red;
  font-weight: 2rem;
  line-height: 1.3;
  font-size: 50px;
  background-color: white;
 


}


.linie1{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
opacity: 100%;
}

.linie2{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left: 6%;
opacity: 100%;
  }

.linie3{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left:12%;
opacity: 100%;
    }

.linie4{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left:18%;
opacity: 100%;
    }

.linie5{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left:24%;
opacity: 100%;
    }

.linie6{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left:30%;
opacity: 100%;
    }

.linie7{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left:36%;
opacity: 100%;
    }

.linie8{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left:42%;
opacity: 100%;
    }

.linie9{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left:48%;
opacity: 100%;
    }

.linie10{
width: 1px;
height: 100%;
background-color: blue;
position: fixed;
z-index: -3;
margin-left:54%;
opacity: 100%;
    }



  
/* Chapter */

.chapter-container{

  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-left: 4px;

}

.chapter-element{
  box-sizing: border-box;
  width: calc(100% / 4 + 3px);
  border: 4px solid blue;
  margin-left: -4px;
  margin-top: -4px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.chapter-element1{
  box-sizing: border-box;
  width: calc(100% / 4 + 3px);
  border: 4px solid blue;
  margin-left: -4px;
  margin-top: -4px;

  display: flex;
  justify-content: center;
  align-items: center;
}


@media only screen and (max-width: 650px) {
  .chapter-element{
    width: calc(100% / 3 + 2.5px);
  }
}

@media only screen and (max-width: 500px) {
  .chapter-element{
    width: calc(100% / 2 + 3px);
  }
}

@media only screen and (max-width: 500px) {
  .chapter-element{
    width: 100%;
  }
}

.chapter {
  display: flex;
  flex-direction: row;
}

.chapter-title {
  min-width: 40%;
  
}

.chapter-title-fixed-content {
  width: 30%;
  position: fixed;
}

.chapter-content {
 
  flex-grow: 1;

 
}
.text {
  margin-left: 10%;
  color:red;
  width: 50%;
 
  
  
}
.indent{
  margin-left: 20%;
  color:black;
  
 
}

.back{
  


}




/* Main */

.Kapitel {

  overflow: hidden;
  float: left;
  width: 20%;
  margin: 0 22px 20px 0;
  margin-top: 20px;

}

.chapter-link {
  display: block;
  transform: rotate(0deg);
}

/* unvisited link */
.chapter-link:link {
  color: blue;
  text-decoration: none;
}

/* visited link */
.chapter-link:visited {
  filter: hue-rotate(187deg);
  background-color: aquamarine;
  color: blueviolet;
}

/* mouse over link */
.chapter-link:hover {
  filter: hue-rotate(259deg);
  transform: rotate(8deg);
  color: hotpink;
}


/* selected link */
.chapter-link:active {
  color: blue;
}