#solfege-container {
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 942px;
}

#solfege-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#message-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    margin-left: auto;
    font-size: 1.2em;
    padding-right: 10px;
    gap: 2em;
    position: relative;
}

.string {
    display: flex;
}

.string.highlighted {
    background-color: #444;
}

.random-note-box {
    color: orange;
    border: 2px dashed white;
    border-radius: 20px;
    padding: 0 20px;
}

.random-note-score-box.moved {
    position: absolute;
    bottom: 55px;
    right: 370px;
    width: 150px;
    text-align: center;
}

.random-note-score-box::before {
    content: 'Wynik: ';
}

.string .fret {
    margin: 5px;
    padding: 3px;
    width: 65px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border-radius: 5px;
    border: 1px solid #0000;
    transition: 150ms;
}

.string:not(.frets) .fret {
    color: #0000 !important;
    background-color: #0002;
}

.string.frets,
.string:last-child {
    border-bottom: 2px solid #555;
}

.fret0 {
    border-right: 2px solid #555;
}

.string.frets .fret {
    border: none;
    padding: 3px;
    color: #0000;
}

.string .fret0 {
    width: 32px;
}

#guitar .string .fret0,
#guitar .string .fret3,
#guitar .string .fret5,
#guitar .string .fret7,
#guitar .string .fret9,
#guitar .string .fret12 {
    background-color: #0006;
    color: #fff;
}

#guitar .string:not(.frets) .fret:hover {
    background-color: #0a0a;
    color: #fff;
}

.string.frets .fret:hover {
    cursor: default;
}

#guitar .string .fret.checked {
    border: 1px solid #fff;
    color: #fff !important;
    background-color: #a0af !important;
}

#guitar .string .fret.checked:hover {
    background-color: #f00 !important;
}

#solfege-menu {
    display: flex;
    justify-content: center;
    gap: 3em;
}

#solfege-menu button {
    border-radius: 10px;
    padding: .2em 1em;
    text-transform: uppercase;
    border: 2px solid black;
    font-weight: bold;
    transition: 450ms;
}

#solfege-menu button:hover {
    background-color: maroon;
    color: silver;
}

#sound-pad-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 0 75px;
}

#sound-pad-box>.row {
    display: flex;
    flex-direction: row;
}

#sound-pad-box>.row>div {
    width: 60px;
    height: 30px;
    padding: 0;
    margin: 3px 5px;
    flex: 1;
    display: flex;
    flex-flow: column;
}

#sound-pad-box>.row>div:nth-child(4) {
    margin-left: 200px;
}

#sound-pad-box>.row>div>button {
    flex: 1;
}

#guitar {
    max-width: 100%;
}

#guitar .string .note-highlighted {
    background-color: orange;
}