html,
body {
   font-size: 16px; /* base font reset */
   margin:0 0 1rem 0;
   padding:0 0 1rem 0;
   height:100%;
   background: url(bg.png) repeat #6d6660;
}

.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: min-content max-content auto 4rem;
  grid-template-areas: "nav" "header" "main" "footer";
  margin-left: auto;
  margin-right: auto;
  max-width: 43.75rem;
}

a:link,
a:visited,
a:active {text-decoration: none; color: #57e8d8; font-weight: 600;}
a:hover {color: #3bcdcd; }

header { grid-area: header; margin-top: 1rem; text-align: center;}

.resize {
  max-width: 100%;
  height: auto;
}

nav { grid-area: nav; text-align: center; margin-top: 2rem; font-family: 'Playfair Display', serif; font-size: 100%; text-transform: uppercase; }
nav a:link,
nav a:visited,
nav a:active { color: #fff; text-decoration: none; letter-spacing: 0.2em; margin-left: 0.6rem; margin-right: 0.6rem; text-shadow: 1px 1px 5px #000;}
nav a:hover { color: #fff; text-decoration: none; letter-spacing: 0.2em; margin-left: 0.6rem; margin-right: 0.6rem; text-shadow: 1px 1px 5px #4adeca;}

main { grid-area: main; text-align: justify; color: white; font-family: 'Open Sans', sans-serif; font-size: 90%; line-height: 1.8rem; }

h1 { color: #3db0af; font-family: 'Playfair Display', serif; font-size: 200%; text-shadow: 1px 1px 5px #000; letter-spacing: 0.4rem; text-indent: 3rem;
     background: url(dots.png) bottom left repeat-x; }

strong { color: #c1938b; font-weight: 700; }
em { color: #85cee1; }



aside { background: url(asidebg.png);
      width: 80%; margin-left: auto; margin-right: auto; margin-top: 1rem; margin-bottom: 1rem; border-left: 10px solid #3db0af; padding: 1rem;
      font-size: 100%; color: #000; line-height: 1.2rem; }
aside strong { color: #5d577f; letter-spacing: 0.1em; }
aside a:link,
aside a:visited,
aside a:active { font-weight: 600; color: #124e57; }
aside a:hover { font-weight: 600; color: #942922; }

footer { grid-area: footer; text-align:center; font-size: 65%; color:silver; font-family: 'Playfair Display', serif; padding-top: 1rem; margin-bottom: 1rem; padding-bottom: 1rem;}
footer a:link,
footer a:visited,
footer a:active { font-weight: normal; }
footer a:hover { font-weight: normal; }