/* FONTS */
@font-face {font-family: OCRA;      src: url(../font/OCRAStd.otf);}
/* font-family: cursive, sans-serif; font-style: italic; */
@font-face {font-family: zoo-three; src: url(../font/Z003-MediumItalic.otf);}

*          {font-family: OCRA;}
header p, footer p {font-family: zoo-three; text-shadow: 0 0 1px lightgrey;}

/* Line Heights and Text Rendering */
h1, header p {text-align: center;}
footer p     {text-align: right;}
header p     {font-size: 1.1em;}
aside h1     {font-size: 1em;}

/* Menu line height and text-rendering */
h1 a    {text-decoration: none;}

h2, h3, h4 {
  border-radius: 30px;
  border-bottom: 1px solid light-dark(var(--lightest),#475569);
  box-shadow: 0px 2px 3px -2px light-dark(#7775,#22222291);
  padding-left: 20px;
  margin-bottom: 0;
  padding-bottom: 10px;
}
main p {
  padding: 8px;
}
/* Spacing */
* {box-sizing: border-box;}
html { height: 100%; overflow-y: hidden; }
body {
  margin: 1px;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
header, footer {width: 100%; margin: 0;}
footer {
  height:  31px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: inset #1337 0 -10px 20px;
  border-top: 2px solid light-dark(var(--lightest), black);
}
header p {padding-left:  3%; padding-right: 3%;}
footer p { 
  display: inline-block;
  order: 1;
  margin: 0;
  padding: 0;
  padding-right: 20px;
}

main { 
  flex-grow: 1;
  margin-left : 2px; margin-right : 2px;
  padding: 5%;
  border-radius: 0 8px 8px 8px;
}
main p,
main li {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

footer div             {padding-left: 2%;}

/* Media Queries */
@media (min-width: 660px) {
  main img { width: 600px; }
}
@media (max-width: 660px) {
  main img { width: 90%; }
}
@media (min-width: 448px) {
  header div {padding:       22px;}
  header div {padding-bottom: 0px;} 
  footer img {margin-right:  20px;}
}
@media (max-width: 448px) {
/* for nav position */
  header {
    display: flex;
    flex-direction: row-reverse;
    padding-top: 15px;
  }
  header div {padding:    2px;}
0}