/* 
figure{
    display:flex;
	flex-direction: column;
	align-items: center;
} */

body{
    background-color: rgb(0, 0, 0);
}
#TheGood{
    display:none;
    }
    
    #TheBad{
    display:none;
    }
    
    #TheUgly{
    display: block;
    }

    .TheGood{
        display:none;
        }
        
        .TheBad{
        display:none;
        }
        
        .TheUgly{
        display: block;
        }
    
img{
    max-width: 100%;
    margin: auto;
}

h1{
    color:white;
}



@media screen and (min-width: 376px){
    
    body{
        background-color: orangered;
    }

    #TheGood{
    display:none;
    }
    
    #TheBad{
    display: block;
    }
    
    #TheUgly{
    display:none;
    }
    .TheGood{
        display:none;
        }
        
        .TheBad{
        display:block;
        }
        
        .TheUgly{
        display: none;
        }
 
}


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

    body{
        background-color: rgb(109, 250, 121);
    }

    #TheGood{
        display:block ;
        }
        
        #TheBad{
        display:none;
        }
        
        #TheUgly{
        display:none;
        }

        .TheGood{
            display:block;
            }
            
            .TheBad{
            display:none;
            }
            
            .TheUgly{
            display: none;
            }

    }