html {
    background-color: #333333;
}

a:visited {
    color: orange;
}

#mode_key_selection {
    width: max-content;
    margin: auto;
    margin-top: 2em;
}

#scale_key {
    width: max-content;
    margin: auto;
    margin-top: 2em;
}

table {
    margin: auto;
    margin-top: 5em;
    border:1px solid black;
    table-layout: fixed;
}

td {
    background-color: white;
    border: 1px solid black;
    width: 60px;
    padding: 1em;
}

.tab-0, .tab-3, .tab-5, .tab-7, .tab-9 {
    background-color: #AAAAAA;
    border: 2px solid yellow;
}

.chord {
    width: 80px;
}

.root {
    background-color: #9B59B6;
}

.second {
    background-color: #AE74C1;
}

.third {
    background-color: #C28FCD;
}

.fourth {
    background-color: #D5AAD8;
}

.fifth {
    background-color: #E8C5E4;
}

.sixth {
    background-color: #F3D98F;
}

.seventh {
    background-color: #F7E29B;
}





.root {
    background-color: #3498DB; /* sanftes Blau */
}

.second {
    background-color: #5AAEDB; /* helleres Blau */
}

.third {
    background-color: #7FC3DA; /* zartes Blau */
}

.fourth {
    background-color: #A4D9B8; /* weiches Türkis */
}

.fifth {
    background-color: #C9EE96; /* sanftes Hellgrün */
}

.sixth {
    background-color: #F0B06A; /* helles Orange */
}

.seventh {
    background-color: #F39C4D; /* warmes Orange */
}


.root {
    background-color: #1E3A8A; /* mittleres Dunkelblau */
}

.second {
    background-color: #2A4CA8;
}

.third {
    background-color: #3760C6;
}

.fourth {
    background-color: #4880E0;
}

.fifth {
    background-color: #5A9AF7;
}

.sixth {
    background-color: #7BB3FF;
}

.seventh {
    background-color: #A3CEFF; /* Hellblau */
}