$(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');

//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements
  $('h1').css({'border': '1px solid black'});
$("h1").css({'color': 'blue'});
//$('h1').css({'visibility': 'hidden'});
$('div > h1').html('YOUR COHORT MASCOT');

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

$('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'http://www.rlephoto.com/skippers_grass1/8526_skipper_fiery_ds.jpg')
  });

$('img').on('mouseout', function(e){
     e.preventDefault()
    $(this).attr('src', 'dbc_logo.jpg')
  });
//RELEASE 4 : Experiment on your own


 $('img').animate({
          width: "106px",
          height: "153px"
    }, 4500 );

 $('img').animate({
          width: "106px",
          height: "153px"
    }, 4500 );

 $('div img').mouseenter(function () {
    $(this).css({border: '0 solid #000'}).animate({
        borderWidth: 10
    }, 500);
}).mouseleave(function () {
     $(this).animate({
        borderWidth: 0
    }, 500);
});


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