@media screen and (max-width: 376px){
    .ugly{
        display: flex;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        
    }

    .bad{
        display: none;
    }

    .good{
        display: none;
    }

    body{
        background: linear-gradient(green, pink);
        margin: 0%;
        height: 100vh;
        font-family: Comic Sans MS;
    }

    img{
        max-width: 50%;
        height: auto;
        margin: 0% auto;
    }

}

@media screen and (min-width: 376px) and (max-width: 767px){

    .ugly{
        display: none;
    }

    .bad{
        display: flex;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        font-family: 'Times New Roman', Times, serif;
    }

    .good{
        display: none;
    }


    body{
        background: linear-gradient(red, purple);
        margin: 0%;
        height: 100vh;
        font-size: larger;
    }

    img{
        max-width: 50%;
        height: auto;
        margin: 0% auto;
    }


}

@media screen and (min-width: 768px){

    .ugly{
        display: none;
    }

    .bad{
        display: none;
    }

    .good{
        display: flex;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        
    }

    body{
        background: linear-gradient(yellow, blue);
        margin: 0%;
        height: 100vh;
        font-size: x-large;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    img{
        max-width: 50%;
        height: auto;
        margin: 0% auto;
    }
    


}