body {
	padding: 10px;
}


h1 {
    text-align: center;
}

p{
    text-align: center;
}

img {
	max-width: 100%;
}

main{
    width: 100%;
    margin: 0 auto;
    text-align:center;
}

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

#bad{
    display:none;
}

#good{
    display:none;
}

/* These are the styles for screens larger than 376 pixels */
@media screen and (min-width: 376px){

    body{
        background-color: rgb(255, 216, 222);
    }

	main{
		font-size: 1.5em;
		width: 80%;
		margin: 0 auto;
	}

    #ugly{
        display: none;
    }

    #bad{
        display:block;
    }

    img{
        border-radius: 20px;
    }

}



/* These are the styles for screens larger than 768 pixels */
@media screen and (min-width: 768px){
    body{
        background-color: rgb(190, 224, 255);
    }

	main{
		font-size: 1.5em;
		width: 60%;
		margin: 0 auto;
	}

    #bad{
        display:none;
    }

    #good{
        display:block;
    }

    img{
        border-radius: 50px;
    }

}