nav {
      padding: 0.5rem;
      /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
      font-family: "Fredoka", sans-serif;
      height: 30px;
      max-width: 900px;
      margin: 0 auto;
      margin-bottom: 3rem;
    
    }

    nav ul {
      display: flex;
      list-style: none;
      justify-content: space-around;
      margin: 0;
      padding-top: 18px;
      padding-left: 0;
      border-top: 1px solid black;
      border: 1px solid black;
      background-color: black;
      border-radius: 5px;
    }

    nav li{
      flex: 1;
      width: fit-content;
      border: 1px solid #999;
      border-radius: 2px;
      box-shadow: inset,-2px -2px -5px rgba(0, 0, 0, 0.2);
      background-color: white;
      position: relative;
      /* padding: 0.5rem;
      margin: 0 10px; */
    
    }
    /* #noblackKey{
      border-right: 1px solid #999;
    } */

     .blackKey{
      position: absolute;
      top: -15px;
      left:95%;
      width: 9%;
      height: 65%;
      background: black;
      border-radius: 1px;
      z-index: 2;
     }
    nav ul li a {
      display:flex;
      padding: 0.5rem 0;
      background-color: transparent;
      height: 70px;
      color: gray;
      justify-content: center;
      align-items: center;
      font-family: 'Baloo', sans-serif;
      font-weight: bold;
      font-size: 1rem;
      text-decoration: none; 
  
    }

    nav ul li a:hover {
      background-color: #f5f5f5;
      transform: translateY(2px);
      box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1); ;
    }

    .aktive {
      background-color: rgb(195, 203, 207);
      color: rgb(16, 15, 15);
    }
    .blackKey:hover{
      background-color: #333;
    }
    .underCons{
  text-align: center;
  font-size: 35px;
  font-weight: bolder;
  position: fixed;
top: 30%;
left: 20%;
}