/* Base styling */
body {
    background-color: aqua;
    font-family: "Comic Sans MS";
    padding: 30px;
}
header, section {
    text-align: center;
    background-color: blanchedalmond;
    padding: 15px;
    margin: 30px;
    border-radius: 30px;
    box-shadow: 0px 7px 10px rgba(0,0,0, 50);
}
section {
    text-align: left;
    background-color: white;
    border-left: 20px solid plum;
}
section:hover{
    background-color: blueviolet;
    transform: scale(1.03);
    transition: transform .8s ease;
}
h1 {
    color: red;
}
h2 {
    text-align: center;
    color: blue;
}
ul li {
    padding-left: 20px;
    list-style: square;
}
#red-h2 {
    color: red;
}
.funny {
    color: green;
}
dt {
    color: green;
}
dd {
    font-style: italic;
}



/*OK, Your turn!


    4. Let's make the h2 in the last section be red.  Let's find 2 ways we can do this.  What if we want the funny to be larger???

    5.  Let's make the Definition titles a different colour and make the definitions italic and indented

    6.  Let's add some animation when we hover over a section!  transfom: scale (1.03)

    7,  Let's add some nesting to our ordered list

    */