/* CHANGED: The original file had body, nav, nav a and the heading rules written twice. Each later copy overrode the earlier one, so the earlier copies did nothing. I merged each one into a single rule. Where the two copies disagreed, I kept the value that was actually being applied (the later one), unless noted below. */

body {
    margin: 0;
    padding: 20px;
    background-color: antiquewhite; /* CHANGED: the first rule said #fff0f6 but the second rule (antiquewhite) overrode it. Kept antiquewhite. */
    color: #333;
    font-family: "Comic Sans MS", "Arial Rounded MT Bold", sans-serif;
}

/* Navigation bar */
nav {
    display: flex;
    gap: 20px;                       /* CHANGED: merged two conflicting values (25px / 20px). Kept 20px. */
    padding: 20px;                   /* CHANGED: merged two conflicting values (15px 20px / 20px). Kept 20px. */
    background-color: #305b9b;       /* CHANGED: the first rule made the nav black, but the second rule made it blue. Kept blue. */
    border-radius: 20px;
    box-shadow: 0 4px 10px #000000;
}

/* Navigation links */
nav a {
    color: rgb(245, 245, 245);
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}

/* Makes links change when you hover */
nav a:hover {
    color: #ffe4f1;                  /* CHANGED: the second rule changed the hover colour to black, which is hard to read on the blue nav (about 3:1 contrast). Restored the pink from the first rule (about 6:1). */
    text-decoration: underline;      /* CHANGED: added so the hover state is visible even without a colour change. */
}

/* ALL titles and headings */
h1, h2, h3, h4, h5, h6 {
    font-family: "Arial Rounded MT Bold", "Comic Sans MS", sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    color: #000000;
    text-shadow: 2px 2px white;
}

/* Main title */
h1 {
    font-size: 45px;
}

/* Paragraphs */
p {
    font-size: 18px;
    line-height: 1.6;
}

/* Lists */
/* CHANGED: added ol so the numbered list on about.html gets the same box style as the bulleted lists. */
ul, ol {
    background-color: white;
    padding: 20px 40px;
    border-radius: 20px;
    box-shadow: 0 4px 10px #000000;
}

li {
    margin: 10px 0;
    font-size: 17px;
}

/* Main content */
main {
    max-width: 800px;
    margin: 30px auto;
    padding: 25px;
    background-color: #fff8fc;
    border-radius: 25px;
    box-shadow: 0 5px 15px #000000;
}

/* CHANGED: stops images from running off the edge of the screen on small phones. */
img {
    max-width: 100%;
    height: auto;
}