body {
    background-color: #ffffff;
    color: #000000;
    transition: background-color 0.3s, color 0.3s;
}

.piano {
    display: flex;
    justify-content: center;
    height: 200px;
    position: relative;
    margin: 20px auto;
    max-width: 1000px;
}

.white-key {
    flex-grow: 1;
    border: 1px solid #000;
    background-color: #fff;
    z-index: 1;
    transition: background-color 0.3s;
    position: relative; /* To position the note label */
}

.white-key span,
.black-key span {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bold;
    color: #000;
    pointer-events: none;
}

.black-keys {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.black-key {
    position: absolute;
    width: 4%;
    height: 60%;
    background-color: #000;
    border: 2px solid #000; /* Outline for black keys */
    z-index: 2;
    pointer-events: auto;
    transition: background-color 0.3s;
}

.black-key:nth-child(1) { left: 4.5%; }
.black-key:nth-child(2) { left: 11.8%; }
.black-key:nth-child(3) { left: 26.1%; }
.black-key:nth-child(4) { left: 33.4%; }
.black-key:nth-child(5) { left: 40.7%; }
.black-key:nth-child(6) { left: 54.9%; }
.black-key:nth-child(7) { left: 62.2%; }
.black-key:nth-child(8) { left: 76.5%; }
.black-key:nth-child(9) { left: 83.8%; }
.black-key:nth-child(10) { left: 91.1%; }

/* Highlighting */
.highlight {
    background-color: lightgreen;
}

.highlight-black {
    background-color: lightgreen;
}

.root {
    background-color: lightcoral;
    color: #fff; /* White text on root notes */
}

.root span {
    color: #fff; /* White text on root notes */
}

.root-black {
    background-color: lightcoral;
    color: #fff; /* White text on root notes */
}

.root-black span {
    color: #fff; /* White text on root notes */
}

/* Controls styling */
.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px;
    font-size: 16px;
}

/* Transpose buttons styling */
.transpose-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    width: 100%;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
}

button img {
    width: 40px;
    height: 40px;
}

/* Theme toggle button styling */
.theme-button {
    position: fixed;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
}

.theme-button img {
    width: 40px;
    height: 40px;
}

/* Dark theme styling */
body.dark {
    background-color: #333333;
    color: #ffffff;
}

body.dark .white-key {
    background-color: #bbbbbb;
    border: 1px solid #888888;
}

body.dark .black-key {
    background-color: #444444;
    border: 2px solid #666666;
}

/* Blue scale highlighting colors for dark mode */
body.dark .highlight {
    background-color: #0099ff; /* Bright blue */
}

body.dark .highlight-black {
    background-color: #0099ff; /* Bright blue */
}

body.dark .root {
    background-color: #ff6666; /* Bright red */
    color: #fff;
}

body.dark .root span {
    color: #fff;
}

body.dark .root-black {
    background-color: #ff6666; /* Bright red */
    color: #fff;
}

body.dark .root-black span {
    color: #fff;
}