body {
     font-family: monospace;
     display: flex;
     flex-direction: column;
     margin: 4px;
     background-color: #f2f2f2;
     text-align: center;
     padding-bottom: 80px;
}
 button {
     margin-bottom: 1rem;
     white-space: nowrap;
}
 button:not([disabled]):hover {
     background-color: #ddd;
     cursor: pointer;
}
 button:disabled {
     cursor: not-allowed;
}
 #trackCodeWrapper {
     margin: 4px;
     margin-bottom: 1rem;
     font-weight: bold;
     font-size: 1.4em;
}
 #trackCode {
     display: inline-block;
     cursor: pointer;
     color: #ff00ff;
     background-color: #f8f9fa;
     padding: 4px;
     border: 2px solid #ced4da;
     border-radius: 4px;
}
 #trackDisplay {
     display: flex;
     margin: 4px;
     align-items: start;
     flex-wrap: wrap;
     justify-content: center;
}
 .songColumn {
     border: 1px solid lightgrey;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin: 6px;
     background-color: lightgrey;
     padding: 10px;
}
 .output-label {
     font-weight: bold;
     text-align: center;
     margin-bottom: 6px;
     font-size: 1.1em;
}
 .highlight {
     background-color: #ff00ff;
}
 .note {
     width: 100%;
     padding: 2px;
     box-sizing: border-box;
     text-align: center;
}
 #bottomPanel {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     height: 60px;
     background-color: #f2f2f2;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 20px;
     box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
}
 #volumeControl {
     font-size: 1.15em;
     display: flex;
     flex-direction: column;
     align-items: center;
}