html,
body {
   font-size: 16px; /* base font reset */
   margin: 0;
   font-family: 'Lato', sans-serif;
   background: url("bg.png") repeat-x top;
   }

.grid-container {
  display: grid;
  grid-template-columns: auto 770px auto;
  grid-template-rows: auto;
  grid-template-areas: ". main .";
}


.main { grid-area: main; font-size: 0.90rem; color:black; line-height: 200%; text-align: justify;}
.example {font-size: 1.20rem;}

#p1, #p2, #p3, #p4, #p5, #p6, #p7 { font-family: Courier, monospace; font-size: 90%; color: #777; }

h1 {
color: #f8c0f0;
font-size: 1.25rem;
font-weight: normal;
text-align: left;
text-indent: 2rem;
border-bottom: 1px dashed #7bbdde;
font-family: 'Press Start 2P', cursive;
margin-top: 2rem;
font-size: 150%;}

h2 {font-family: 'Share Tech Mono', cursive;
text-transform: lowercase;
color: #9ed3cd;
font-size: 1rem;
font-weight: normal;
text-align: left;
font-size: 200%;}

hr {
    border: 0;
    height: 1px;
    width: 50%;
    margin: 2rem auto 2rem auto;
    background-image: linear-gradient(to right, rgba(88, 126, 171, 0), rgb(0 104 227), rgba(88, 126, 171, 0));
}

.copy {font-size: 0.75rem; text-align: center; margin-top: 5rem; padding-top: 5rem; border-top: 1px dashed #fff502; }

.example {text-align: center;}
img.example {margin-left: 0.5rem; margin-right: 0.5rem;}


a:link {text-decoration: none; color: #8a2be2;}
a:visited {text-decoration: none; color: #8a2be2; }
a:hover {text-decoration: none; background-image:url(rainbowback.png); color: #6f00ff; font-weight: bold; cursor: crosshair;}
a:active {text-decoration: none; color: #c9a0ff;}