$(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:

var bodyElement = $('body')

var mascot = $(".mascot")

var h1 = $("h1")

var image = $("img")


//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements

h1.css({"color": "navy"});

h1.css({"text-align": "center"});

h1.css({"border-color": "gray", 
        "border-width":"2px", 
        "border-style":"solid"});

bodyElement.css({"background-color": "white"});

image.before("<p><h2>Spring Peepers</h2></p>");

image.css({"margin": "0 auto"});



//RELEASE 3: Event Listener
  // Add the code for the event listener here 

$("img").on({
 "mouseover" : function() {
    this.src = 'spring_peeper.jpg';

    $("img").animate({
            "width": 400,
            "left": 50,
            "top":  50
     }, 1500 );
  },

  "mouseout" : function() {
    this.src= 'dbc_logo.png';
  }
});

//RELEASE 4 : Experiment on your own
//See above



})  // end of the document.ready function: do not remove or write DOM manipulation below this.