div {
float:left;
}
/* global selectors, all divs, all img tags behave these styles*/

img {
float: left;
width: 40%;
margin-right: 28%;
margin-left: 28%;
/* has to cooperate with div friends */
}

body {
background-color: black;
}


#container {
width: 95%;
margin-left: 2.5%;
background-color: #511B26;
 /* burgandy color background */
font-size: 26pt;
font-family: Comic Sans MS;
/* make sure to do everything correctly */
clear: both;
}


.xsbox {
clear: both;
text-align: left;
font-family: Arial;
font-size: 20pt;
background-color: tan;
margin-top: 5px;
width: 90%;
}

#sonic {
width: 50%;
}


#content-area {
clear: none;
background-color: brown;
height: 80vh;
/* vh is vertical height*/
width: 45% ;
margin-left: 2%;
padding: 2%;
font-family: Comic Sans MS;

}


#magicnanny {
width: 100%;
height: 60vh;
/*background-color: pink;*/

}

/* id to style my hat picture, new layer on top  */
#hat {
width: 8%;
margin-left: 22.5vw;
margin-top: .1vw;
/*z-index: 2;*/
position: absolute;
/* google search position w3c */
/* took more control of these pictures, gave them magic nanny*/
}

#animalpicture {
/*removed all the picture margins*/
/*margin-top: 50px;*/
/*margin-left: 25%;*/
/*z-index: -1;*/
}



#sidebar {
clear: none;
height: 80vh;
/* vh is vertical height*/
background-color: #46561D;
/* green brown */
width: 18% ;
margin-left: 2%;
padding: 2%;
/* you break your percent */
}




.page-essay {
margin-bottom: 15px;
font-family: Comic Sans MS;

}