/* Math120.W21.css */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

body {
  margin: 0 auto;
  max-width: 800px;
  font-family: "Source Sans Pro", "Open Sans", "IBM Plex Sans", sans-serif;
  line-height: 1.5;
  /* Set up background images. */
  background-image: url("upper-left.png"), url("lower-right.png");
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 28%, 25%;
  background-position: top left, bottom right;
  font-size: 18px;
  font-weight: 300; /* 300 looks better on my screen, but not MRMs, but does look good on chromebook so... */
}

footer {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

h1 {
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.25;
  font-family: "Source Sans Pro";
  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: 300; /*margin-top: 1.25em;*/ }

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

b { font-weight:500; }

/* p.img is a paragraph that contains a single image */
/* p.img {} */

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

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

        dt {
            margin-top: 1rem;
        }

        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;
}

a {
  color: #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;
}

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

a:hover {
  background-color: #e0e0e0;
  border-radius: 0.25rem;
}

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;
}

li { margin: 0.5em 0; }

/* **********************************************************
 * Navigation menu
 */
/* Centering via advice at https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ */
nav ul {
  /*list-style: none;*/
  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;
}

/* Pill styling adapted from Bootstrap. */
nav ul li a {
  border-radius: .25rem;
  display: block;
  padding: .5rem 0.75rem;
  text-decoration: none;
  box-sizing: border-box;
  /* color: ; */
}

nav ul li a.active {
  color: #fff;
  background-color: #007fcd;
  font-weight: bold;
}

/* nav ul li a.active:hover {
  background-color: ;
} */

nav ul li a:hover {
  background-color: #e0e0e0;
}

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