/* Base styling */


/* 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 make the text in the unordered list further from the bullet.  While we're at it, let's change the 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

    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

    */

/* 1 */
body {
    background: aqua;
    font-family: 'Comic Sans MS';
    padding: 40px;
}

/* 2 */
header {
    text-align: center;
    background-color: #ffdfba;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.92);
    margin-bottom: 40px;
}

h1 {
    margin: 0;
    font-size: 45px;
    color: red;
    text-shadow: 2px 2px #0a0a0a;
}

section {
    background-color: white;
    border-left: 50px solid #ff9ff3;
    margin-bottom: 30px;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.87);

}

section h2 {
    color: #6c5ce7;
    margin-top: 0;
}

section:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}


/* 3 */
ul li {
    padding-left: 15px;
}

/*windows key + . */
ul {
    list-style-type: "😎";
}

/* 4 - We need to add an id attribute to the 3rd section's h2 - How else could we have done it */
#makered {
    color: red;
}

/* 5 */
dl dt {
    font-weight: bold;
    color: #00b894;
    margin-top: 10px;
}

dl dd {
    margin-left: 20px;
    font-style: italic;
    color: #2d3436;
}

/* 6 
add this to section: hover{
        transition: transform 0.3s ease;
        transform: scale(1.02);
        }
*/


/* 7

Add to odered list, after first li sequence
                 <li>Never trust an atom. They make up everything !</li>
                 <ol type="a">
                    <li>abc</li>
                    <li>def</li>
                    <li>ghi</li>
                 </ol>

*/