/* Reset some defaults */
        * { margin:0; padding:0; box-sizing:border-box; }

        body {
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.6;
        }

			p {
 				margin-top: 1rem;
 			}
 			/* ── Wrapper ─────────────────────────────────────── */
.two-col {
    display: flex;                 /* put children side‑by‑side */
    flex-wrap: wrap;               /* allow stacking on narrow viewports */
    gap: 1.5rem;                   /* space between columns */
    margin: 2rem 0;                /* optional outer spacing */
}

/* ── Individual columns ───────────────────────────── */
.two-col .col {
    flex: 1 1 0;                  /* grow equally, shrink as needed */
    min-width: 260px;             /* stop shrinking before content breaks */
}

/* Optional: give each column its own visual styling */
.two-col .left  { background:#f9f9f9; padding:1rem; }
.two-col .right { background:#fff;   padding:1rem; }

/* ── Responsive tweak (optional) ─────────────────────── */
@media (max-width: 640px) {
    .two-col { flex-direction: column; }   /* force vertical stacking */
}

  /* Drop‑cap styling */
  /* I have thought the better of this. I am going to do it my way.
  p::first-letter {
    float: left;               /* Makes the letter sit beside the text */
    font-size: 4.5em;          /* Size relative to the surrounding text */
    line-height: 1;            /* Aligns the tall glyph with the baseline */
    margin-right: 0.1em;       /* Small gap between the letter and the text */
    margin-top: 0.05em;        /* Fine‑tune vertical alignment */
    font-weight: bold;         /* Optional – makes it stand out */
    color: #00adefff;            /* Optional – choose a brand colour */
    /* Optional decorative touches */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
  }
*/

        /* Header & Nav container */
        header {
            background-color: #ffffffff;
            color: #black;
        }

        nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 1rem;
        }

        /* Logo / Brand */
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #00adefff;
        }
	
		  
        /* Main menu list */
        .nav-links {
            list-style: none;
            display: flex;
        }

        .nav-links li {
            margin-left: 1.5rem;
        }

        .nav-links a {
            text-decoration: none;
            color: black;
            padding: 0.5rem;
            transition: background 0.3s, color 0.3s;
        }

        .nav-links a:hover,
        .nav-links a.active {
            background-color: #00adefff;
            color: white;
            font-weight: bold;
            border-radius: 4px;
        }

        /* Hamburger for mobile */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger span {
            height: 3px;
            width: 25px;
            background: #fff;
            margin-bottom: 5px;
            border-radius: 2px;
        }
        
       .float-img {
	      float: left;               /* or right */
			margin: 0 1rem 1rem 0;     /* space around the image */
      	max-width: 200px;          /* optional size limit */
		}

        /* Responsive behavior */
        @media (max-width: 768px) {
            .nav-links {
                position: absolute;
                top: 60px;               /* height of header */
                left: 0;
                right: 0;
                background: #333;
                flex-direction: column;
                align-items: center;
                display: none;          /* hidden by default */
            }

            .nav-links li {
                margin: 1rem 0;
            }

            .hamburger {
                display: flex;
            }
        }