body {
      background-color: lightblue;}

    .container {
      max-width: 1300px;
      display: grid;
      grid-gap: 30px;
      margin-left:auto; /*this and margin-right are to center the grid*/
      margin-right: auto;
      position: relative;
      grid-template:
        "header header header"
        "nav    main   main"
        / 245px 1fr;} /*the nav bar is 245px wide*/

    header {
      grid-area: header;
      margin-top: 20px;
      background: white;}

    nav {
      grid-area: nav;
      font-size: 11px;
      background: white;}

    main { 
      grid-area: main;
      background: white;
      padding: 20px;} /*so the text doesnt touch the edges*/

    p {
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-size: 15px;}

    .wackyp { /*want a special type of something? use a period to make up your own class and define it as whatever; then put class=".wackyp" in inline to easily give stuff these properties */
      font-family: cursive;
      color: blue;}

    h1 {
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-size: 20px;
    }