body {
    background-color: rgb(255, 191, 246);
    font-family: sans-serif;
    padding: 30px
}

header {
    text-align: center;
    background-color:rgb(148, 186, 131);
    padding: 10px;
    margin: 30px;
    border-radius: 30px;
    box-shadow: 0 7px 10px rgba(0,0,0,.85);
    border-bottom: 100px;
    border-color: rgb(255, 255, 255);
}
section {
    text-align: left;
    background-color: rgb(154, 219, 154);
    border-left: 20px solid plum;
    padding-bottom: 5px;
    padding: top 5px;
}

section:hover{
    background-color:rgb(88, 185, 159)
 
}

h1 {
    color: rgb(208, 201, 255);
}

h1 {
    text-align: center;
}
h2 {
    text-align: center;
    color: rgb(97, 97, 212);
}

ul li {
    padding-left: 20px;
}

#lastsection{
    color: red;
}

dt{
    color:rgb(0, 51, 202)
}

dd{
    font-style: italic;
    list-style:decimal;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

    /* Base styling */


/*OK, Your turn!

    1. Let's change the colour of the body to aqua and make our font Comic Sans MS.  Maybe some padding?

    2. Let's fix up the header and the sections
    
    3. Let's pad the text in the unordered list further from the bullet.  While we're at it, let's change the list-style-type bullets in the unordered list to emojis

    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

    */