/* Allgemeine Formatierung für den gesamten Körper der Seite */
body {
    font-family: 'montserrat', sans-serif;
    margin: 0;
}

/* Stil für die Tabelle, die die Schaltflächen des Rechners enthält */
table {
    width: 100%;
    height: 70vh;
    color: white;
    background-color: rgb(30, 30, 30);
}

/* Stil für die Zellen (Schaltflächen) in der Tabelle */
td {
    width: 25%;
    text-align: center;
    background-color: rgb(50, 50, 50);
    font-size: 24px;
}

/* Stil für die Zellen (Schaltflächen) beim Hovern (Maus darüber bewegen) */
td:hover {
    background-color: rgb(30, 30, 30);
    cursor: pointer;
}

/* Stil für den Bereich, in dem das Ergebnis angezeigt wird */
#resultArea {
    height: 30vh;
    background-color: rgb(40, 40, 40);
    font-size: 64px;
    color: aliceblue;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 24px;
    box-sizing: border-box;
}

/* Stil für die Ergebnis-Schaltfläche (=) */
#result {
    background-color: rgb(30, 100, 30);
}

/* Stil für die Ergebnis-Schaltfläche beim Hovern */
#result:hover {
    background-color: rgb(40, 40, 40);
}

/* Stil für hervorgehobene Schaltflächen (z.B. Wurzel und Prozent) */
.highlight {
    background-color: rgb(25, 25, 25);
}

/* Stil für die Schaltflächen zum Löschen */
.delete {
    background-color: rgb(100, 25, 25);
}