@media (min-width: 100px) {
    #virtual-fretboard {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-bottom: 50px;
        padding-right: 40px;
    }

    .string {
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center; /* This will vertically center the <hr> line */
        justify-content: space-between;
        position: relative;
        height: 30px;
        border-right: 3px solid #c2c2c2;

    }

    .fret-position {
        flex-grow: 1;
        height: 100%;
        border-left: 1px solid white;
        border-right: 1px solid white;
        margin: 1px 0;
        cursor: pointer;
        position: relative;
        z-index: 1;
        width: 66px;
    }
    .fret-position:hover, .string-name:hover{
        background-color: rgba(255, 255, 255, 0.1);
    }
    .fret-clicked {
        background-color: rgba(0, 255, 45, 0.15);
    }

    .string hr {
        position: absolute;
        border: none;
        border-top: 1px solid white;
        width: 100%;
        height: 1px;
        z-index: 0;
    }

    .string-name{
        position: absolute;
        right: -40px;
        font-size: 20px;
        color: #d0d0d0;
        width: 40px;
        cursor: pointer;
        height: 100%;
        line-height: 30px;
    }
    .fret-helper{
        top: -10px;
        /*left: 50%;*/
        max-width: 10px;
        height: 10px;
        width: 10px;
        background-color: #868686;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .key-note-indicator{
        width: 10px;
        height: 10px;
        background-color: #005400;
        border: 1px solid #129b00;
        /*border-radius: 50%;*/
        bottom: 50%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        z-index: 2;
    }

}

@media (min-width: 961px) {
    #virtual-fretboard {
        width: 80%;
    }
}