 <style>
        /* Make the page narrower so the paragraph wraps to multiple lines */
        
body {
    max-width: 400px;
    margin: 50px auto;
    font-family: Arial, sans-serif;
    font-size: 18px;
  
        }

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 42.5rem;
  padding-right: 42.5rem;


p::first-line {
    color: red;
}

p {
    font-size: .8em;
    font-family: Helvetica, arial , geneva, sans-serif;
}

p, li {
    background-color: #ccffff;
}

h1 {
    color:#00ccff;
    text-align:center;
}

h2 {
    color: white;
    background-color: blue;
}
/* This is a class - the name is not a HTML <tag> */
/* and the name starts with a fullstop. */

.note {
    color: orange;
}

.legal {
    color: green;
    background-color: yellow;
}

/* unvisited link*/
a:link {
    color: red;
    text-decoration: none;
    }

/* visited link*/
a:visited {
    color: green;
    text-decoration: none;
    }

    /* mouse over link*/
a:hover {
    color: hotpink;
    text-decoration: none;
    }

    /* selected link*/
a:active {
    color: blue;
    text-decoration: none;
    }
    