.menu_links{
  display: none;

  color:black;
 
  width: 165px;
  height: min-content;

  
  border-bottom: 3px solid #205EB1;
  border-bottom-right-radius: 3px 3px;
  
  
  

  position: absolute;
  top: 0px;
  left: -165px;

  #background-image: linear-gradient(to right,  #e7e7e7 92%, #aaaaaa);
  background-color:#e6eef5;
 
  z-index: 1000;
  transition: all 0.5s ease;
 
}

.menu_mobil_header{
  width: 100%;
  height: 60px;
  
  
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  #background-image: linear-gradient(to right,  #205EB1 92%, rgb(22, 74, 147));
  background-color: #205eb1;

  & h1{
    font-size: 1.8em;
  }
  

  & input[type="button"]{
    margin-right: 10px;
    background: none;
    border: none;
    color: white; 
    font-size: 2.5em;
    font-weight: 900;
    transition-duration: 0.5s;
  }

  & input[type="button"]:hover{
    color: #FFCC66;
  }
}

nav input[type="checkbox"]{
  display: none;
}

.toggle_button{
  width: 36px;
  height: 29px;
  border: 1px solid white;
  border-radius: 5px;
  padding: 3px;
  
/*
  position: absolute;
  top: 35px;
  left: 20px;
*/
  display: none;
  flex-direction: column;
  justify-content: space-between;
  transition-duration: 0.5s;
}

.toggle_button:hover{
  border-color: #FFCC66;
  .bar{background: #FFCC66;}
}

.bar{
  height: 4px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 100px;
  transition-duration: 0.5s;
}

@media(max-width: 847px){
    
  .headerl{
    font-size: 30px;
    padding-left:10px;
  }
  
  
  .toggle_button{
      display: flex;
  }

  .menu_links{
    display: block;
    & .menu_mobil_header{
      display: flex;  
    }
  }

  .contenttable:has(#toggle_button:checked) {  
    & .nav_opacity{
      opacity: 0.4;
    }
  }

  #toggle_button:checked ~ .menu_links{
    position: absolute;
    top: 0px;
    left: 0px; 
  }
  
}

.nav_opacity{
  opacity: 1;
  transition: opacity 1s;
}