body {
       /*Ränder entfernen*/
        margin:0;
        margin-bottom: 0;
        font-size: 16px;
        background-size: cover;
        max-width: max-content;
        background-color: rgb(30, 30, 30);
   }
   button {
       background-color: #a98854;   /*#8b7d55*/
        color: white;
        border-radius: 20%;
        padding: 5px 20px;         /*Höhe*/
       
   }
   button:hover {
      background-color: #554d35;  
   }
    table {
        width: 100%;
        height: 40vh;
        background-color: #8b7d55; /*Golden #8b7d55  */
        color: white;
        margin: 5px;
     }
     /* Zahlen vom Rechnere  */
    td {
      
     width: 25%;
     text-align: center; 
     font-size: 38px;
     background-color: rgb(40, 43, 43); 
     border-radius: 20%;
     margin:100px;
    
     }
     td.e {
     font-size: 18px;    
     }
    td:hover {
       background-color: rgb(44, 68, 49); 
       cursor: pointer;
     } 

     .highlight { /* Buttons außer Zahlen*/
        background-color: rgb(31, 49, 49);
    }

    .cHighlight { /* oberste Funktions Reihe*/
        font-size: 24px;
        background-color: rgb(31, 49, 49);
    }
    input{
        size: 6; 
     }


   /* Kopfbereich App Name und Menü Symbol*/
    #headArea {
       background-color: rgb(54, 56, 32); 
       color: rgb(228, 206, 206); 
       font-size: 24px; 
       margin:0;
    }

    /* Oberer Bereich anzeige der Rechenaufgabe*/
    #resultArea {
        background-color: rgb(31, 37, 34); 
        color: white; font-size: 32px; 
        width: 100%;
        height: 10vh;
        display: flex;
        justify-content: flex-end;
        align-items:center;
        padding: 24px;
        box-sizing: border-box;

    }

    /*Ergebnisbereich */
    #result {
        background-color: rgb(33, 36, 41);
    }
    #result:hover {
    background-color: rgb(44, 68, 49);
    }
   /* Unterer Bereich Anzeige der gerechneten Aufgabe*/
    #ergContainer {
        background-color: rgb(77, 73, 73);
        color: white; font-size: 24px; 
        width: 100%; 
        height: 40vh;
        padding-top: 24px;
        padding-left: 24px; 
        max-width: 95%;
    }
    
    /* die Menü Zeichen nach rechts ausrichten */
    #headRechts {
        margin-left: 25vh;
       
    }

    #menueItem {
    background-color: rgb(31, 37, 34); 
    color: white; 
    padding: 24px;
    box-sizing: border-box;
    display: none;
        
    }

     .menu-button {
        background-color:( #8b7d55);
        color:blue;
        font-weight: bold;
        font-size: 1.5rem;
       
     }
    
    .menu-button:hover{
        background-color: rgb(219, 181, 134); 
    }
  ul {
        color:#d0df7d;
        margin:4px; /*kleiner Rand  */
    }
  li {  color:#8b7d55;  }

    /*Das Input Feld*/  
    .inputFeld {                
        background: #4c4f52; 
        border-radius: 10%;
        color: beige;
        font-weight: bold;
        font-size: 1rem;
    }
  

    /*Sonderbereich*/
    
    #dreieck {display:none;
       
        color: white; font-size: 24px;
        background: #313335;
    }

    #kreis {display:none;
        background: #313335;
        color: white;  font-size: 24px;
    }

    #zylinder {display:none;
        background: #313335; 
        color: white; font-size: 24px;
    }

    #umrLa {display:none;
        background: #313335; 
        color: white; font-size: 24px;
    }

    #umrGew {display:none;
        background: #313335; 
        color: white; font-size: 24px;
    }
    #umrGeschw {display:none;
        background: #313335; 
        color: white; font-size: 24px;
    }

    #ohm {display:none;
        background: #313335; 
        color: white; font-size: 24px;
    }

    #rinnen{display:none;
        background: #313335; 
        color: white; font-size: 24px;
    }

    #Elemente {display:none;
        background: #313335; 
        color: white; font-size: 24px;
        
    }