body {
  font-family: sans-serif;
}

.container {
    width: 90%; /* Make the container occupy 90% of the viewport width */
    max-width: 1200px; /* Set a maximum width to prevent it from getting too wide */
    display: flex;           /* Make the container a flexbox */
    flex-direction: column; /* Align items vertically within the container */
    gap: 20px;              /* Add some space between left and right panels */
    margin-top: 10px;      /* Reduced top margin for the container */
  }
  
  .keyboard-container {
    display: flex;
    justify-content: center; /* Center the keyboard horizontally */
    align-items: center;    /* Center the keyboard vertically */
    width: 100%; /* Make the keyboard container take full width */
  }
  
  .keyboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the keyboard horizontally */
    width: 100%; /* Make the keyboard itself take full width */
  }
  
  .key {
    height: 150px;
    width: 70px;
    background-color: white;
    border: 1px solid black;
    cursor: pointer;
    margin: 5px;
    display: flex;
    justify-content: center; /* Align items to the center horizontally */
    align-items: flex-end; /* Align items to the bottom */
    padding-bottom: 5px;   /* Add some padding at the bottom */
    transition: all 0.1s ease;
    font-size: 18px;
  }
  
  .key.black {
    background-color: black;
    color: white;
    width: 40px;
    height: 90px;
    margin-left: -35px;
    margin-right: -35px;
    z-index: 1;
  }
  
  .key.active {
    background-color: #ddd;
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .octave-controls {
    text-align: center;     /* Center the octave controls */
    margin-bottom: 20px;   /* Add space below the octave controls */
  }
  
  .octave-controls button {
    font-size: 20px;
    padding: 8px 15px;
  }
  
  .input-area {
    width: 100%;        /* Make input area take full width */
    max-width: none;    /* Remove max-width restriction */
    display: block;     /* Changed from flex to block */
  }
  
  .input-area h2 {
    margin-bottom: 10px; /* Space above the heading */
  }
  
  #notes-display {
    width: 100%;
    height: 100px;      /* Increased the height of the textarea */
    font-family: monospace;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
    font-size: 20px;
  }

  .sample-sequences {
    margin-top: 20px; /* Add some space above the sample sequences */
  }  
  
  .all-controls {
    margin-top: 10px; /* Add some top margin to the controls */
    display: flex;
    justify-content: space-between; /* Align play/stop buttons left, submit buttons right */
  }
  
  .all-controls div {
    /* Style the inner divs to align buttons */
    display: flex;
    align-items: center;
  }
  
  .all-controls div button {
    margin-right: 5px; /* Add space between buttons */
  }
  
  .controls-panel {
    display: flex;
    flex-direction: column; /* Arrange controls vertically */
    gap: 10px;              /* Add space between controls */
  }
  
  .controls {
    display: flex;
    align-items: center;
  }
  
  .controls label {
    margin-right: 10px;
  }
  
  .submit-buttons {
    margin-top: 0px; /* Removed top margin from the submit buttons */
    display: flex;
    flex-direction: column; 
    align-items: center; 
  }
  
  .submit-buttons h2 {
    display: none; /* Hide the "Generate Response" label */
  }
  
  .submit-buttons .d-flex {
    gap: 10px; /* Add space between submit buttons */
  }
  
  #status {
    margin-top: 10px; 
    font-style: italic;
    color: gray;
  }