* {
    background-color: #2a4257;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    background-color: #142634;
    color: #c9d5e1;
    display: flex;
    margin-bottom: 0px;


    
}

.buttons {
    background-color: #142634;
    margin-bottom: 0px;
    button, h3{
        background-color: #142634;
        color: #c9d5e1;
        border: 0px;
    }
}


.songs {
    border: 1px solid #142634;
    padding: 10px;
    h3 button b{
        color: white;

    }
    h3 {
        color: white;
    }
    button {
        border-bottom: 1px solid white;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
    }
    button:hover {
        opacity: 0.4;
    }
}




.chords {
    border: 1px solid #142634;
    padding: 10px;
    h1, h3, p {
        color: white;
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

.pannel {
    display: flex;
    border: 1px solid #142634;
    margin-bottom: 10px;
    margin-top: -10px;
    h3, select, p{
        color: white;
        padding: 10px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    button {
        background-color: #203547;
        border: 1px solid #142634;
        padding: 0px;
       
        height: 47px;
        margin-top: 5px;
        margin-right: 10px;
        
        h3 {
            background-color: #203547;
        }
    }
    button:hover {
        opacity: 0.6;
    }
}

#sharp {
    width: 120px;
}
#flat {
    width: 100px;
}