/* Many thanks to Jen Simmons' Layout Lab for CSS Grid inspiration, and
Morten Rand-Hendriksen's CSS: Advanced Layout with Grid and Rachel Andrew's 
many posts for further details. */

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*{box-sizing: border-box;}

/* Thanks to https://www.smashingmagazine.com/2016/05/fluid-typography/ */

/* Older browsers */
 html { font-size: 14px; }

 /* Modern browsers only need this one - 624 was (1024 - 400)*/

 @media screen and (min-width: 25em){
   html { font-size: calc( 14px + (16 - 12) * (100vw - 400px) / 624 );
  }

 }

/* Safari <8 and IE <11  752 was (1152 - 400) */
 @media screen and (min-width: 50em){ 
  html { font-size: calc( 14px + (17 - 12) * (100vw - 400px) / 752 );
   } 
 } 

 /* iPad
 ------------------------------------------------ */

 @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
   html { font-size: 24px; }
 }

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait) {
   html { font-size: 18px; }
 }

 /* iPhone - 400 was (800 - 400)
 ------------------------------------------------ */
 @media screen and (max-width: 480px) {
   html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / 400 ); }

 }

body {
      margin:4%;
      line-height: 1.2; 
      font-family: 'IM Fell DW Pica', serif;
      background-image: url("paper.jpg");
      }

a {
  outline: none;
  text-decoration: none;
}

a:link {
  color: #0000EE;
}

a:visited {
  color: #551A8B;
}

a:focus {
  text-decoration:underline;
  background: #BAE498;
}

img {
  border: 2px solid;
  border-color: white;
}

a:focus img {
  border: 2px solid;
  border-color: #551AEE;
  }

a:hover img {
  border: 2px solid;
  border-color: #551AEE;
  }

a:hover {
  text-decoration:underline;     
  background: #FF4;
}

a:active {
  background: #265301;
  color: #CDFEFF;
}

img:focus { outline: thin dotted; }

article, aside, footer, header, hgroup, nav, section, li {
  display:block;
}

header {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  }

header > h1 p {
    white-space: nowrap;
    display: inline;
  }
  
h1  { 
    flex-grow: 1;
    margin: 0px;
    margin-right:40px; }

p.subhead  { 
    font-weight: bold;
    font-size: 1.5rem; }

h3 {
    margin-top: 0;
    margin-left: 0.75rem; }

p {margin-top: 0.35rem;
   margin-bottom: 0.35rem;}

img {
  width: 100%; 
  display:block;}






footer p { text-align:center; }

@supports (display: grid) {

body {
  margin: 1em; }

ul {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
    grid-auto-flow: dense;
    list-style: none;  
  }

li {
  padding: 10px;
  border: 1px solid #777;
  border-radius: 4px;
  background: #fff; }

li.hero
   { 
    grid-row: span 2;
    grid-column: span 2; }
}



pre { font-family: 'IM Fell DW Pica', serif; }