$(document).ready(function(){
 
//RELEASE 0: 
  //Link this script and the jQuery library to the jquery_example.html file and analyze what this code does. 
 
$('body').css({'background-color': 'pink'})
 
//RELEASE 1:
  //Add code here to select elements of the DOM 
  var bodyElement = $('body')
 	// $( '.mascot' ).css("border", "5px dashed blue")
 
//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements
 	$( ".mascot > h1" ).css("color", "blue")
 	$( ".mascot > h1" ).css("border", "2px double black")
 	$( ".mascot > h1" ).css("visibility", "initial")
 	$( ".mascot > h1" ).html("Pocket Gophers")
 
//RELEASE 3: Event Listener
  // Add the code for the event listener here 
  $( 'img' ).on('mouseover', function(e){
  	e.preventDefault()
  	$(this).attr('src', 'http://www.twpinc.com/images/categories/category/TWPCAT_GOPHER.jpg')
  })
 
 	$( 'img' ).on('mouseleave', function(e){
 		e.preventDefault()
 		$(this).attr('src', 'dbc_logo.jpg')
 	})
 
//RELEASE 4 : Experiment on your own
 
 $ ( '.mascot' ).click(function() {
 	$( 'img' ).animate({
 		opacity: 0.25,
 		left: "+=50",
 		height:"toggle"
 	}, 5000, function(){
 	});
 });
 
 
 
 
})  // end of the document.ready function: do not remove or write DOM manipulation below this.