.mybuttons {
    width: 99.5%;
    background-color: #00558A; /* Green */
    border: 2px solid #FFFFFF;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    font-family: Joanna Sans Nova;
    color: white;
    cursor: pointer;
}

    .mybuttons:hover {
        background-color: #F7911D;
    }


@media (max-width: 768px) /*In this CSS code,
    we are targeting screens with a maximum width of 768px.
    If the screen is less than or equal to 768px wide,
    the body code will run.*/
{

    .mybuttons {
        background-color: #00558A; /* Green */
        border: 2px solid white;
        width: 99%;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 18px;
        font-family: Joanna Sans Nova;
        color: white;
        cursor: pointer;
    }

        .mybuttons:hover {
            background-color: #F7911D;
        }
}