/* --- BEGIN THE STYLING --- */
    body {margin: 0; padding: 0;}

    header.banner, footer {padding: 20px; background: gold;}
      header.banner h1, h2 {text-align: center; color: navy;}
        header.banner h1 {font-size: 38pt; margin: 5px auto 15px auto}
        header.banner h2 {font-size: 28pt; margin: 0;}

    nav.navbar {
      overflow: hidden;
      background-color: blue;
      margin: 0;
      padding: 0;
    }
    nav.navbar ul > li {list-style-type: none;}
    nav.navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      margin: 0;
      padding: 15px 20px;
      text-decoration: none;
      font-size: 17px;
      transition: 0.3s;
    }
    nav.navbar a:hover {
      background-color: #4d004d;
      color: white;
    }
    nav.navbar a.active {              /* -- Use class="active" on the nav links 
      background-color: #4d004d;    on each relevant page to show the reader 
      color: white;                 which page they are on */
    }

    main {width: 90%; margin: 50px auto;}

    article {margin-bottom: 50px;}

    section > h2, section > p {text-align: left;}
      section > h2 {font-size: 24pt;  text-transform: capitalize;}
      section > p {font-size: 16pt; margin-bottom: 15px;}

    aside {float: right; width: 30%; margin-bottom: 15px; margin-left: 15px;}
    aside > div {padding: 5px; background: #fff7cc; border: 1px solid gold; border-radius: 5px; }
    aside p { font-size: 14pt; }

    footer {font-size: 12pt; text-align: center;}
/* --- ENDS THE STYLING --- */