html {
  font-size: 16px;
}

body {
    font-family:'Calibri', sans-serif;
    background-image: url('KaroPapier.jpg');
    margin: 0%;
    position: relative;
    z-index: -1;
  }

h4{
  margin-top:5px;
}

.middle {
    width: 60vw;
    margin: 0 auto;
    text-align: left;
    padding: 10px;
    font-size: 1.1rem;
    color: rgb(20, 57, 57);
  }

  .right {
  
    display: flex;
    float: right;
    width: 10vw;
  }
  .left {
    float: left;
    width: 43vw;
    margin-bottom: 80px;
  }

  .rightLatex {
  
    display: flex;
    float: right;
    width: 10vw;
  }

  .leftLatex {
    float: left;
    width: 43vw;
    margin-bottom: 80px;
  }

  .LatexKiste{
    height: 30rem;
  }
  
  .logo{
    max-width: 2%;
    transition: 0.3s;
  }
  
  .logo:hover{
    max-width: 7.7vw;
    transition: 0.3s;
  }

.papierstapel {
  max-width: 25vw;
}

.middle_plus {
  width: 60vw;
  margin: 0 auto;
  text-align: left;
  padding: 0;
  font-size: 1.8rem;
  color: rgb(20, 57, 57);
}


.middle_big {
  width: 60vw;
  margin: 0 auto;
  text-align: left;
  padding: 10px;
  font-size: 5rem;
  color: rgb(20, 57, 57);
}

  .middleb {
    width: 60vw;
    margin: 0 auto;
    text-align: left;
    padding: 10px;
    font-size: 2.2vh;
    color: rgb(16, 159, 51);
  }

 


.copyright{
  color: rgba(70, 97, 97, 0.341);
  font-size: 1rem;
}
  
.sidenav {
  height: 120vh;
  width: 310px;
  position: fixed;
  z-index: 2;
  top: -50px;
  right: 87vw;
  background-color: #b11827;
  overflow-x: hidden;
  rotate: 5deg;
  transition: 0.3s;
  padding-top: 10vh;
  padding-right: 17px;
  text-align: right;
  box-shadow: 0px 1px 10px rgb(38, 1, 16);
}

.sidenavGitarre {
  visibility:hidden;
  left: -100vw;
  height: 120vh;
  width: 310px;
  position: fixed;
  z-index: 2;
  top: -50px;
  right: 87vw;
  background-color: #b11827;
  overflow-x: hidden;
  rotate: 5deg;
  transition: 0.3s;
  padding-top: 10vh;
  padding-right: 17px;
  text-align: right;
  box-shadow: 0px 1px 10px rgb(38, 1, 16);
}


  
  .sidenav a {
    text-decoration: none;
    padding-bottom: 1.8vh;
    font-size: 1rem;
    color: #f6dbde;
    display: block;
    transition: 0.3s;
  }

  .sidenavGitarre a {
    text-decoration: none;
    padding-bottom: 2vh;
    font-size: 1rem;
    color: #f6dbde;
    display: block;
    transition: 0.3s;
  }

  .sidenav a:hover {
    color: #ffffff;
    text-shadow: 5px 5px 5px rgb(38, 1, 16);
  }

  .sidenavGitarre a:hover {
    color: #ffffff;
    text-shadow: 5px 5px 5px rgb(38, 1, 16);
  }
  
 

  .menu-icon {
    width: 10vw;
    position: fixed;
    z-index: 1;
  }

  .rectangle {
    width: 45vw; 
    height: 10vw;
    font-size: 1rem;
    visibility: visible;
    margin-bottom: 10vw;
    margin-left: 8%;
  }
  
  .rectangleWEB {
    width: 70vw; 
    height: 20vw;
    font-size: 0.9rem;
    visibility: visible;
  }

  .rec_bild{
    width: 10vw; 
    height: 10vw;
    padding: 5%;
  }

  .rec_text{
    width: 30vw; 
    height: 10vw;
  }
  
  .rectangle img{
    transition: 0.5s;
  }
  
  .rectangle img:hover {
    box-shadow: 5px 5px 10px rgb(122, 122, 122);
    transform: rotate(3deg);
    max-width: 80%;
    
  }
  .rectangleWEB img:hover {
    box-shadow: 5px 5px 10px rgb(122, 122, 122);
    transform: rotate(5deg);
    max-width: 80%;
    
  }
  
  .rectangle text{
    opacity: 0;
    transition: 0.5s;
    position: relative;
  }
  
  .rectangle:hover text{
    opacity: 1;
  }

  .tabBlur{
    width: 100%;
    min-width: 64rem;
    white-space: nowrap;
  }

  .tabBlurSchnitzel{
    width: 100%;
    white-space: nowrap;
    word-break: break-word;
  }

  .chordSVG{
    top: -8px;
    height: 1cm;
    transition: 0.5s;
    position:relative; 
    margin-left: 0.3cm;
  }

  .chordSVG:hover{
    height:2cm;
    top: -25px;
    transition: 0.5s;
  }

  .nightSVG{
    top: -12px;
    height: 1.7cm;
    transition: 0.5s;
    position:relative; 
    margin-left: 0.3cm;
  }

  .container {
    position: relative;
    display: inline-block;
  }

  .new-label {
      position: absolute;
      top: -9px;
      left: -28px;
      background-color: rgb(255, 255, 255);
      color: #b11827;
      padding: 3px 5px;
      transform: rotate(-30deg);
      font-weight: bold;
      font-size: 12px;
      animation: blink 3s infinite;
      box-shadow: 0px 0px 0px rgb(0, 0, 0);
      border-radius: 5px;
  }
  
  @keyframes blink {
      0%, 100% { background-color: rgb(255, 122, 122);
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.256);}
      50% { background-color: rgb(255, 255, 255); 
        box-shadow: 4px 4px 4px rgb(0, 0, 0, 0.456); }
  }
  .content {
    width: fit-content;
    padding: 0px;
    margin: 0px;
  }


  @media screen and (max-width: 1200px) {
  .sidenav a{
    font-size: 0.7rem;
  }
  }

  @media screen and (max-width: 1000px) {
    .sidenav{
      visibility:hidden;
      left: -100vw;
    }

    

    .middle {
      width: 80vw;
    }

    .middle_plus {
      width: 80vw;
      padding: 0;
    }

    .middle_big {
      font-size: 3rem;
      width: 80vw;
    }

    .copyright {
      font-size: small;
    }

    html {
      font-size: 12px;
    }

    .rectangle text{
      opacity: 100%;
    }

    .rectangle{
      visibility: visible;
      margin-left:0% ;
      margin-bottom: 15vw;
      width: 70vw;
    }

    .rectangleWEB Div{
      visibility: hidden;
      height: 0%;
    }

    .rec_bild{
      width: 20vw; 
      height: 20vw;
    }

    .rec_text{
      width: 40vw; 
      height: 20vw;
    }

    .papierstapel {
      max-width:45vw;
    }

    .right {
  
      display: flex;
      float: none;
      width: 100%;
    }
    .left {
      float: none;
      width: 100%;
      margin-bottom: -20px;
    }

    .logo{
      max-width: 0vw;
      transition: 0.3s;
    }

    .LatexKiste{
      height: 0rem;
    }

    .leftLatex {
      float: left;
      width: 80vw;
      margin-bottom: 70px;
    }

    .rightLatex {
  
      display: flex;
      float: right;
      height: 0vw;
    }

    .chordSVG{
      top: -12px;
    }

    
  .strahl blob text {right: 9rem;}
  .event_span_container{  background: linear-gradient(#4517ff92, #1723ff92 40%, #1af4d73e 110%);}

  }

  .sidenavb {
    height: 120vh;
    width: 310px;
    position: fixed;
    z-index: 2;
    top: -50px;
    left: -150px;
    background-color: #b11827;
    overflow-x: hidden;
    rotate: 5deg;
    transition: 0.3s;
    padding-top: 10vh;
    padding-right: 17px;
    text-align: right;
    box-shadow: 0px 1px 10px rgb(38, 1, 16);
    visibility: visible;
  }

  .sidenavGitarreb {
    height: 120vh;
    width: 310px;
    position: fixed;
    z-index: 2;
    top: -50px;
    right: 87vw;
    background-color: #b11827;
    overflow-x: hidden;
    rotate: 5deg;
    transition: 0.3s;
    padding-top: 10vh;
    padding-right: 17px;
    text-align: right;
    box-shadow: 0px 1px 10px rgb(38, 1, 16);
  }

  .sidenavb a {
    text-decoration: none;
    padding-bottom: 2vh;
    font-size: 1.2rem;
    color: #f6dbde;
    display: block;
    transition: 0.3s;
  }

  .sidenavGitarreb a {
    text-decoration: none;
    padding-bottom: 2vh;
    font-size: 1rem;
    color: #f6dbde;
    display: block;
    transition: 0.3s;
  }

  .sidenavb b {
    text-decoration: none;
    padding-bottom: 2vh;
    font-size: 3vh;
    color: #f6dbde;
    display: block;
    transition: 0.3s;
  }

  .sidenavGitarreb b {
    text-decoration: none;
    padding-bottom: 2vh;
    font-size: 3vh;
    color: #f6dbde;
    display: block;
    transition: 0.3s;
  }
  
  .sidenavb a:hover {
    color: white;
    text-shadow: 5px 5px 5px rgb(38, 1, 16);
  }

  .sidenavGitarreb a:hover {
    color: white;
    text-shadow: 5px 5px 5px rgb(38, 1, 16);
  }

  .sidenavb b:hover {
    color: white;
    text-shadow: 5px 5px 5px rgb(38, 1, 16);
  }

  .sidenavGitarreb b:hover {
    color: white;
    text-shadow: 5px 5px 5px rgb(38, 1, 16);
  }

  @media screen and (max-height: 400px) {
  .sidenavb {
    left: -10vw;
  }
  }

  @media screen and (max-width: 500px) {
    .tabBlurSchnitzel{
      width: 80vw;
    }
    }