/* 1. Element Selector: Make all <p> tags dark gray */
p {
    color: #444;
}

/* 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;
}

/* 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 li:first-child {
    font-weight: bold;
}

/* 8. Pseudo-class: Make links orange on hover */
a:hover {
    color: orange;
    text-decoration: underline;
}

/* 9. Attribute Selector: Style input[type="text"] with a blue border */
input[type="text"] {
    border: 2px solid blue;
    padding: 5px;
}

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