/*
body{
  background-color: #0E0E0E;
}
*/





.dark-mode {
  background-color: #0E0E0E;
  color: #F0FAF1;
}
.dark-mode .st0{
  fill: #0E0E0E;
}
.dark-mode .st1{
  fill: #F0FAF1;
}
.dark-mode .line{
  border-left: 2px solid #272727;
}

.light-mode {
  background-color: #F0FAF1;
  color: #0E0E0E;
}
.light-mode .st0{
  fill: #F0FAF1;
}
.light-mode .st1{
  fill: #0E0E0E;
}
.light-mode .line{
  border-left: 2px solid #b6cdb9;

}






#container{
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: table;
  background-color: inherit;
}

#titel{
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: table-cell;
  vertical-align: middle;

}

#titel h1{
  text-align: center;
  font-size: 80px;
  letter-spacing: -2px;
}

svg{
  display: block;
}

.marquee{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

#kasten{
  background-color: none;
  position:fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 0%;
}

#kasten h3{
  text-align: center;
  padding-top: 20px;
  font-size: 16px;
}



/* Farbe des markierten Textes ändern */
::-moz-selection {
  background-color: none;
  color: black;
}

::selection {
  background-color: none;
  color: black;
}

::-webkit-selection {
  background-color: none;
  color: black;
}








/* linien */
.contain {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.line {
  flex: 1;
  height: 100vh;
  border-left: 2px solid #272727;
  opacity: 20%;
  left: calc(14.28% * var(--index));
}

@media screen and (max-width: 600px) {
  .line {
    display: none;
  }
  
  .line:nth-child(1), .line:nth-child(4), .line:nth-child(7) {
    display: block;
  }
}