.ciao {
    padding: 20px;
}
#ciao01 {
    color: brown;    
}
img {
    width: 300px;
    margin-top: 20px;
}
.pippo {
    color: chocolate;
    font-weight: bold;
    border: 1px solid red;
    display: block;
    /* display: inline;
    display: none; */
}
.petra div {
    display: inline;
}
.petra div img {
    height: 30px;
    width: auto;
}
.ciao02 {
    margin: 30px;
    border-width: 30px;
    padding: 30px;
    width: 800px;
    /* box-sizing fa capire bene come funziona il box model */
    box-sizing: border-box;
    /*
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: red;
    */
    /*
    le precedenti tre proprietà equivalgono a questa forma compatta
    border-top: 1px solid red;
    */

}


@media only screen and (max-width: 600px) {
    body {
      background-color: lightblue;
    }
    .ciao02 {
        margin: 0;
        padding: 10px;
        width: 100%;
    }
}
@media only screen and (min-width: 601px) and (max-width: 900px) {
    .ciao02 {
        margin: 0;
        padding: 10px;
        width: 500px;
    }

}