/* mobile first min-width sets base and content is adapted to computers. */
@media (min-width: 100px) {
    #selector-instructions{
        width: 100%;
    }
    .fret-selection-container {
        width: 100%;
        overflow: auto;
    }

    #fretboard-number-span{
        font-size: 26px;
        color: var(--accent-color);
    }

    .fretboard-for-patterns, .virtual-fretboard-selector {
        min-width: 420px;
        padding-right: 40px;
    }
    .inactive-fretboard{
        display: none;
    }

    .diatonic-note-number, .note-name-span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: var(--background-color);
        border: 1px solid var(--opposite-theme-color);
        line-height: 1.4em;
        /*color: #ff7a1c;*/
        color: var(--primary-text-color);
        font-weight: bold;
        /*border-radius: 50%;*/
        bottom: 50%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        z-index: 2;
    }
    .note-name-span{
        border: none;
        /*background-color: rgba(var(--r), var(--g), var(--b), 0.8);*/
        background-color: var(--background-color);
    }

    .diatonic-major {
        color: #ee2929;
    }

    .diatonic-minor {
        color: #2e8bff;
    }

    .diatonic-diminished {
        color: #12c712;
    }


    .fret-selection-container .fret-position:hover{
        background-color: initial;
        cursor: initial;
    }

}