body {
  color: rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.02);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
  font-size: 18px;
}

footer {
  text-align: center;
  padding-top: 2rem;
  /* padding-bottom: 6rem; */
  color: rgb(151, 151, 151);
}

section {
  padding: 0.25em 1em;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

section.exercises {
  background-color: rgba(190, 118, 74, 0.1);
}

section.assignment {
  background-color: rgba(254, 173, 0, 0.65);
}

section.business, section.resources {
  background-color: rgba(0, 0, 0, 0.04);
}

h1 {
  margin-top: 0;
  /*1em;*/
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.25;
  /*font-family: "Source Sans Pro";*/
  /*font-family: alternate-gothic-no-1-d, HelveticaNeue-CondensedBold, "Arial Narrow", Helvetica, Arial, sans-serif;*/
  font-family: sans-serif;
  font-size: 2em;
  font-weight: 300;
  /* 300 looks better on my screen, but not MRMs, but does look good on chromebook so... */
}

h2 {
  font-size: 1.35em;
  font-weight: 500;
  /*margin-top: 1.25em;*/
}

h3 {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

/* h3 {
  font-size: 1.2em;
  font-weight: 300;
} */

p.indent {
  margin-left: 1.5em;
}

/* Let the image span the full width of the paragraph block. */
p.img img {
  width: 100%;
}

section p,
section ol,
section ul,
section.assignment h3 {
  margin-left: 1.5em;
}

section.assignment a {
  color: #A05809;
  font-weight: 700;
}

li {
  margin: 0.5em 0;
}

dt {
  margin-top: 1rem;
  font-weight: 600;
}

dd {
  margin-top: 0.5rem;
}

pre {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  padding: 0.5rem;
}

pre.calendar {
  display: block;
  color: #333;
  background-color: #f4f4f4;
  font-size: 0.9rem;
  margin-bottom: 3rem;
}

pre.calendar a {
  font-weight: bold;
  padding: 0;
}

b {
  font-weight: 500;
}

a {
  color: #be764a;
  /*rgb(254, 173, 0); /*#007fcd;*/
  /*#900 a good deep red
  0091ea; the blue from the slides. 
  Darker versions of the slide blue: 007fcd, 006db0 */
  font-weight: 500;
  text-decoration: none;
  padding: .25rem .25rem;
}

a:first-child {
  padding-left: 0;
}

footer a, header a {
  font-weight: normal;
}

a:hover {
  color: #A05809;
  background-color: rgba(254, 173, 0, 0.65);
  /*#e0e0e0;*/
  border-radius: 0.25rem;
}

code { font-size: 0.9em; }

kbd {
  /* ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
  color: #333;
  display: inline-block;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

/* **********************************************************
 * Navigation menu
 */
/* Centering via advice at https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ */
nav ul {
  text-align: center;
  padding-inline-start: 0;
  /* Added this because nav was a little to right of center.
  Inspecting revealed a padding-inline-start value fo 40 px fromthe user agent stylesheet.
  So I've zeroed it here. Not sure why the css reset doesn't clobber it... */
}

nav ul li {
  display: inline-block;
}

/*
 * End Navigation menu
 * **********************************************************/

/* *************************************
           Name the areas to use in grid layout.
           ************************************* */
header {
  grid-area: head;
}

main {
  grid-area: main;
}

footer {
  grid-area: foot;
}

header {
  background-color: rgb(245, 245, 245);
  background-repeat: no-repeat;
}

footer {
  font-size: 0.8em;
}

/* ************************
           Mobile  layout (default) 
        *************************** */
@media (max-width: 1019px) {
  body {
    width: 800px;
    margin: auto;
    display: grid;
    height: 100vh;
    grid-template-columns: 800px;
    grid-template-rows: 300px 1fr auto;
    /* The 300 needs to be larger than the 240 below */
    grid-template-areas:
      "head"
      "main"
      "foot";
  }

  header {
    background-image: url("bird_on_network_horizontal.png");
    /* height: 240px; */
    /*This controls size of image in header ?! */
    background-size: 50%;
    background-position: top center;
    margin-bottom: 1em;
  }

  header>nav {
    padding-top: 220px;
    /* 220 px is tied to image size */
  }
}

/* ***************
           Desktop  layout  
           *************** */
@media (min-width: 1020px) {
  main>* {
    max-width: 800px;
  }

  body {
    margin: 0;
    display: grid;
    height: 100vh;
    /* Grey background for far right */
    grid-template-columns: minmax(100px, 240px) minmax(450px, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "head main"
      "foot main";
  }

  header {
    background-image: url("bird_on_network_vertical.png");
    background-size: 200px;
    background-position: top left;
    background-color: rgb(245, 245, 245);
  }

  header>nav {
    padding-top: 400px;
    /* 400px is tied to image size */
  }

  main {
    background-color: rgb(251, 251, 251);
    padding: 2rem 4rem;
    overflow: auto;
  }

  footer {
    background-color: rgb(245, 245, 245);
    padding: 0 1em;
  }
}