body {
  /* 1. Graphite Background */
  background-color: #a0a0a0;
  /* Make sure you upload the texture and name it pencil.jpg */
  background-image: url('../images/pencil.jpg');
  background-repeat: repeat;
  background-attachment: fixed;
  font-size: 18px;
  /* 2. Text in Serif (Ballpoint Pen Blue) */
  font-family: "Liberation Serif", "Times New Roman", serif;
  color: #003399;
  margin: 0;
  padding: 20px 0;
}

p {
  line-height: 1.6em;
}

/* 3. Headings: Sans-Serif, Bold, Black */
h1, h2, h3, h4, h5 {
  font-family: "Liberation Sans", Arial, sans-serif;
  font-weight: bold;
  color: #000000;
  text-transform: uppercase;
}

/* 4. The White Writing Area */
#container {
margin: 2em auto;
width: 90%;
max-width: 700px;
background-color: #ffffff; /* Pure white paper */
color: #003399; /* Dark blue ink */

/* Rounded corners like your drawing */
border-radius: 30px;

/* Shadow to make it look like paper sitting on the desk */
box-shadow: 0px 10px 30px rgba(0,0,0,0.4);

/* Removing the default ridge outline from the starter pack */
outline: none;
overflow: hidden; /* Keeps the header/footer inside the rounded corners */
}

/* HEADER STYLE (Darker blue/ink theme) */
#header {
    background-color: #003399;
    padding: 10px 5%;
    border-bottom: 2px solid #000;
    text-align: center; /* This centers the row of links */
}

#header ul {
    list-style-type: none; /* Removes the bullet points */
    padding: 0;
    margin: 0;
}

#header li {
    display: inline-block; /* THIS makes them sit side-by-side */
    margin: 0 15px;       /* Adds space between the words */
}

#header li a {
    color: white;
    font-family: "Liberation Sans", Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
}

#header li a:hover {
    text-decoration: underline; /* Makes it clear you are hovering over a link */
}

#content {
    padding: 20px 8% 40px 8%;
}

/* FOOTER STYLE */
#footer {
font-size: 0.8em;
padding: 0 8% 20px 8%;
color: #555;
}

/* Keep the rest of your helper classes (left, right, center) as they were */
img {
  max-width: 100%;
  height: auto;
  margin: 0.5em 0;
}