.mytext {
    width: 32.39%;
    padding: 10px 20px;
    margin: 8px 2px;
    box-sizing: border-box;
    border: 3px solid #FFFFFF;
    border-width: 2px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: #00558A;
    font-size: 18px;
    font-family: Joanna Sans Nova;
    color: white;
}

    input[type=text]:focus {
        border: 2px solid #F7911D;
    }

#text1::placeholder {
    color: white;
    opacity: 0.6; /* Firefox */
}

#text2::placeholder {
    color: white;
    opacity: 0.6; /* Firefox */
}

#text3::placeholder {
    color: white;
    opacity: 0.6; /* Firefox */
}


@media screen and (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.*/
{
    .mytext {
        
        width: 99%;
        padding: 10px;
        margin: 8px 2px;
        box-sizing:unset;
        border: 2px solid #FFFFFF;
        border-width: 2px;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        outline: none;
        background-color: #00558A;
        font-size: 18px;
        font-family: Joanna Sans Nova;
        color: white;
    }

        input[type=text]:focus {
            border: 2px solid #F7911D;
        }

    #text1::placeholder {
        color: white;
        opacity: 0.6; /* Firefox */
    }

    #text2::placeholder {
        color: white;
        opacity: 0.6; /* Firefox */
    }

    #text3::placeholder {
        color: white;
        opacity: 0.6; /* Firefox */
    }

}