body {
   height: 100vh; 
   margin: 0;
   display: flex;
   flex-direction: column;
   font-family: Arial, Helvetica, sans-serif ;
   background-color: black ;
   color: white;
}

section {
    display: flex;
    flex-wrap: wrap;
    flex: 1;/* Section nimmt den gesamten verfügbaren Platz ein */
    
    padding: 10px;
    font-size: 40px;
    font-weight: 300;
  
}

#output {
    flex-direction: column; /* Children der Output-Section werden in einer Spalte angeordnet */

    justify-content:flex-end ; /*to move sections down */ /* Inhalte werden nach unten ausgerichtet */

    align-items: flex-end;/* to move it to right , the end of x-axe*/ /* Inhalte werden nach rechts ausgerichtet */

    gap: 15px; /* Abstand zwischen den Elementen */
}

.btn {
    flex-basis: calc( 25% - 10px);
   /* Ausgangsbreite eines Flex-Items: 
       Bei einer Fensterbreite von 100% nimmt jeder Button 25% minus 10px ein.
       flex-basis legt die Anfangsgröße des Flex-Elements vor Wachstum oder Schrumpfen fest. */
   /*that mean , if the width of window 100% , each button then take the width 25% minus 10px of it 
    flex-basis is the starting width (or size) of a flex item before growing or shrinking, specifies the initial length of a flexible item.
    */

    margin: 5px; /* the rest of black area on left disppeared, Abstand zwischen Buttons, verhindert, dass schwarze Fläche links verschwindet */
    font-size: 32px;
    height: 72px;
    border: 0;
    border-radius: 24px;
    cursor: pointer;
    color: white;
}

.light,
.light:focus {
    background-color: #4e505f;
}

.light:hover{
    background-color: #a3aeca;
}

.blue, 
.blue:focus {
    background-color: #4b5efc;
}

.blue:hover {
    background-color: #798bf9;
}

.dark, 
.dark:focus {
    background-color: #2e2f38;
}

.dark:hover {
    background-color: #505266;
}