html {
  font-size: 12px;
  margin: 0;
  font-family: 'Tahoma', sans-serif;
}

body {
  height: 100%;
  /* background: url('IMG/Makia2.png') bottom right no-repeat fixed; */
  background-color: white;
  background-size: contain;
}

footer {
  
}

section.mainArea {
  margin-left: auto;
  margin-right: auto;
}

#page {
  display: grid;
  width: 960px;
  grid-template: [header-left] "head head" [header-right]
  [main-left]   "nav  main" 1fr  [main-right]
  [footer-left] "foot  foot" 2rem [footer-right]
  [nets-left] "nets  nets" 3rem [nets-right]
  / 13rem  1fr;
}

@media (max-width: 960px) {
  #page {
    display: grid;
    width: 100%;
    grid-template: [header-left] "head head" [header-right]
    [nav-left]   "nav nav" auto  [nav-right]
    [main-left]   "main main" auto   [main-right]
    [footer-left] "foot foot" auto  [footer-right]
    / 13rem  1fr;
  }
}

h1, h3 {
  margin-top: 0;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

header {
  border: 2px solid;
  border-color: black;
  padding: 3px;
  background-color: Crimson;
  grid-area: head;
  font-size: 3.5rem;
  text-align: center;
}

nav {
  background-color: DarkOrange;
  grid-area: nav;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

main {
  border-right: 2px solid;
  padding: 10px;
  background-color: white;
  grid-area: main;
  text-align: left;
  font-size: 1.25rem;
  
}

footer {
  border: 2px solid;
  padding-top: 1px;
  padding-bottom: 3px;
  background-color: #c0c0c0;
  grid-area: foot;
  text-align: center;
}

div.navmain {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background-color: #ff7f00;	
  border: 3px solid black;
  margin: 0;
  text-align: center;
}

div.navchapters {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background-color: slategray;	
  border: 3px solid black;
  margin: 0;
  text-align: center;
}