:root {
  --lesson-paper: #f1efe9;
  --lesson-ink: #171714;
  --lesson-muted: #6f6b62;
  --lesson-rule: rgba(23, 23, 20, .22);
  --header-bg-color: var(--lesson-paper);
  --header-bg-start-color: var(--lesson-paper);
  --header-bg-end-color: #e9e6de;
  --bpm-bg-color: var(--lesson-ink);
  --side-bg-color: var(--lesson-paper);
  --bottom-bg-color: var(--lesson-paper);
  --side-highlight-bg-color: var(--lesson-ink);
  --note-overlay-bg-color: rgba(151, 68, 43, .12);
  --highlight-color: #97442b;
  --highlight-color-on-white: #97442b;
}

html, body, #GrooveWriter {
  color: var(--lesson-ink);
  background: var(--lesson-paper);
  font-family: "Inter Tight", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .13;
  background-image: url("../../assets/uncoated-paper-substrate.png");
  background-size: 720px auto;
  mix-blend-mode: multiply;
}

#LeftHandNav {
  border-right: 1px solid var(--lesson-ink);
  background: var(--lesson-paper);
}

#TopNav {
  border-bottom: 1px solid var(--lesson-ink);
  box-shadow: none;
}

#midiPlayer {
  background: var(--lesson-ink);
  border-bottom: 1px solid var(--lesson-ink);
}

#logoInSubdivision,
#logoTextUpperLeft { display: none; }

.left-button-content {
  height: 48px;
  border-bottom: 1px solid var(--lesson-rule);
  color: var(--lesson-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#timeSigLabel,
#timeSubLabel { color: var(--lesson-ink); }

.left-button.buttonSelected,
.left-button.buttonSelected:hover {
  color: var(--lesson-paper);
  background: var(--lesson-ink);
  transform: none;
}

.left-button:hover,
.myButton:hover {
  color: var(--lesson-ink);
  background: #e2ded4;
  transform: none;
}

#upperLeft,
#upperRight,
#metronomeContainer,
.metronomeButton,
.rightButtons {
  color: var(--lesson-ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#upperLeft { margin-left: 14px; }
#metronomeLabel { color: var(--lesson-muted); font-weight: 500; }
.metronomeButton, .rightButtons { border-radius: 0; }
.metronomeButton.buttonSelected,
.metronomeButton.selected,
.rightButtons.buttonSelected { color: #97442b; }

#RightHandContent { background: var(--lesson-paper); }
#sheetMusicDiv { background: var(--lesson-paper); }
#sheetMusicTextFields {
  border-color: var(--lesson-rule);
  background: #e9e6de;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#sheetMusicTextFields input {
  border: 0;
  border-bottom: 1px solid var(--lesson-ink);
  border-radius: 0;
  background: transparent;
}

.staff-container { background: var(--lesson-paper); }
.notes-row-container { border-color: var(--lesson-rule); }

.pageBottomButton {
  color: var(--lesson-ink);
  background: transparent;
  border-right: 1px solid var(--lesson-rule);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pageBottomButton:hover {
  color: var(--lesson-paper);
  background: var(--lesson-ink);
}

#bottomButtonRow {
  border-top: 1px solid var(--lesson-ink);
  background: var(--lesson-paper);
}

.noteContextMenu > ul.list {
  border: 1px solid var(--lesson-ink);
  border-radius: 0;
  box-shadow: 8px 8px 0 rgba(23, 23, 20, .12);
  background: var(--lesson-paper);
}

.noteContextMenu > ul.list li:hover {
  color: var(--lesson-paper);
  background: var(--lesson-ink);
}

.midiPlayImage,
.midiRepeatImage { border-radius: 0; background: #343430; }

input[type="range"] { accent-color: #97442b; }

@media (max-width: 900px) {
  #upperRight { display: none; }
}