@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Anton+SC&family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body{
	padding:15px;
    background-color:antiquewhite;
}


h1 {
	text-align:center;
    font-family:"Anton SC", sans-serif;
}

p {
	font-family:"Edu AU VIC WA NT Hand", cursive;
}

section{
	display:flex;
	flex-direction: column;
	align-items:center;
}

figcaption{
	text-align:center;
}

img {
	max-width: 100%;
	border-radius: 10%;
	background-color:black;
    display: block; 
    margin-left: auto;  
    margin-right: auto;
    
}

#good{
    display:none;
}



#bad{
    display:none;
}


@media screen and (min-width: 576px){
	body{
		font-size:1.5em;
		width:80%;
		margin:0 auto;
        background-color:rgb(174, 140, 94)
	}

	h1{
		color:rgb(37, 17, 77);
	}

	img{
		border-radius: 40%;
	}

	#ugly{
		display:none;
	}

	#bad{
		display:block;
	}
	
}

@media screen and (min-width: 1200px){
	body{
		font-size:1.5em;
		width:90%;
		margin:0 auto;
        background-color:rgb(152, 111, 55)
	}

	img{
		border-radius: 50%;
        border: 10px solid rgb(60, 14, 22);
		
	}

	

	h1{
		color:rgb(112, 28, 42);
	}

#bad p{
	display:none;
}

	#ugly{
		display:block;
	}

	#ugly p{
		display:none;
	}

	#good{
		display:block;
		display:flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:center;
	}

	#good p{
		display:block;
		text-align:center;
	}

	#good img{
		border:10px solid rgb(108, 201, 27);
	}

	main{
		display:flex;
		align-items:center;
	}

}