/* 
    
    Write the correct CSS selector and style for each section below.  Once you've correctly answered the question, go ahead and comment out your css

    Try to complete all 10 exercises!
    */
/* ⁡⁢⁣⁢Part A⁡ */

/* 1. Element Selector: Make all <p> tags dark gray */

p {
    color: darkgrey;
}

/* 2. Class Selector: Give .highlight a yellow background and bold text */

.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* 3. ID Selector: Make #unique text green and italic */

#unique {
    color: green;
    font-style: italic;
}

/* 4. Descendant Selector: Make all <span> inside <div> red */

div span {
    color: red;
}

/* 5. Child Selector:  Make only direct <li> children of <ul> purple. Don't turn the list in Section 7 purple!  - Hint use the id to target only this section*/

#section5 ul > li {
    color: purple;
}

/* 6. Grouping Selector: Make h2 and .grouped text teal */

h2, .grouped {
    color: teal;
}

/* ⁡⁢⁣⁢Part B⁡ */

/* 7. Pseudo-class: Make the first <li> bold. Don't make the list in Section 5 bold!  Hint - use the id to select only this section first*/

#section7 ul > li {
    font-weight: bold;
}

/* 8. Pseudo-class: Make links orange on hover */

a:hover {
    color: orange;
}

/* 9. Attribute Selector: Style input[type="text"] with a blue border */

input[type="text"] {
    border: 1px blue solid;
}

/* 10. Universal Selector: Apply box-sizing: border-box to all elements */

* {
    box-sizing: border-box;
}