@media screen and (min-width: 0px) {
   #bad{display:none;}
   #good{display:none;}
   #ugly{display:block;}
   body{background:orange; font-family:fantasy;}
   img{width:100%;}
    }


    @media screen and (min-width: 375px) {
        #ugly{display:none;}
        #bad{display:block; font-size:1.7em;}
        #good{display:none;}
        body{background:darkred; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
        img{width:100%;}
         }

         @media screen and (min-width: 767px) {
            
            #ugly{display:none;}
            #bad{display:none;}
            #good{display:block; font-size:2em;}
            body{background:lightblue; font-family:Verdana, Geneva, Tahoma, sans-serif; }
            img{width:30%;}
             }


    

             img{
                width:60%;
                height:auto;
             }


             body{
                display:flex;
                justify-content: center;
                flex-direction:column;
                align-items:center;
             }