html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

p, a, td, div, p, span {
    font-family: Verdana, Arial;

}
*, *::before, *::after {
    box-sizing: border-box;
}

/* Settings Help Container */
#settings-help-container {
}

/* Note Display */

#music-container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding-top: 2.5em; /* space for label overlay */
    box-sizing: border-box;
}

#note-label {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 6vw; /* Scales with viewport width */
    font-weight: bold;
    color: black;
    visibility: hidden;
    padding: 2vw 0 0 3vw; /* Scales padding with viewport width. NOTE: I increased to 2vw, top of letter was cutting off at larger screen widths*/
    z-index: 10;
}

#abcjs-container {
    width: 100%;
    height: 80%; /* Reserve space for the label while maximizing staff size */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

#abcjs-container svg {
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Hide reference note by coloring it transparent */
.abcjs-ledger-line[y<100] {
  display: none;
}

/* Help and Instruction Screen */

.modal-content {
  /* Ensure the modal-content takes up available space */
  display: flex;
  flex-direction: column;
  max-height: 80vh; /* Optional: Limit the modal height to 80% of viewport height */
}

.modal-body {
  max-height: 400px; /* Set a maximum height for the modal body */
  overflow-y: auto; /* Enable vertical scrolling when content overflows */
  padding: 15px; /* Optional: Add padding for aesthetics */
}

.ui-dialog-content {
    overflow-y: auto !important;
    max-height: 80vh; /* or a fixed height if preferred */
}

/* Configuration Menu */

.config {
    height: auto;
}

.config_option {
    height: 35px;
}

.responsive-logo {
  display: block;
  margin: 0 auto;             /* centers horizontally */
  width: 40%;                /* default: fills container, but limited by max-width */
  height: auto;
  max-width: 100%;
}

/* Mobile: ≤ 600px width */
@media (max-width: 600px) {
  .responsive-logo {
    max-width: 25vw;          /* 25% of the viewport width */
  }
}

/* Tablet: 601px–1024px */
@media (min-width: 601px) and (max-width: 1600px) {
  .responsive-logo {
    max-width: 150px;
  }
}