/* Main styles  here assume mobile (vertical) orientation. */


.noto-serif-armenia {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

* { box-sizing: border-box; 
    /* Color scheme */
      --textcolor: #000;
      --bgcolor: #e0e7d7;
      --highlight: #c5d598;
      --headerbg: #869953;
      --rollover: #4A413C; 
}

html {
        scroll-behavior: auto; /* for dynamic scrolling */
    }
    
body { 
        font-size: 19px;
        font-family: noto-serif-armenia, Georgia, serif;
        color: var(--textcolor);
        background: var(--bgcolor);
        margin: 0; 
        padding: 0; 
        width: 100%; 
    }

header {
        text-align: center; 
        overflow: auto;
        width: 100%; 
        padding: 0.5rem 1rem;
        background: var(--headerbg);
    }

header h1 {
        line-height: 1.0em;
        }


/* Default nav menu is for a mobile device, vertically oriented and  */
/* taking up the full width of the viewport. */

a#hamburger {
    font-size: 150%;
    width: 2rem;
    display: block;
    position: absolute;
    top: 1.6rem;
    right: 0;
    text-decoration: none;
    color: var(--textcolor);
    
}

nav 
    { 
        width: 100%;
        padding: 0.3rem 0;
        text-align: center;
        font-family: Arial, Helvetica, sans;
        font-weight: bold;
        background: var(--headerbg);
        display: none;
    }
nav a:link, nav a:visited 
    { 
        width: 100%;
        display: block;
        margin: 0;
        border-top: solid 1px var(--bgcolor);
        padding: 0.3rem 0; 
        text-decoration: none; 
        color: var(--bgcolor);
        background: var(--headerbg);
        white-space: nowrap;
    }
nav a:hover, nav a:active 
    { 
        color: var(--highlight);
    }   
           
main 
    { 
        overflow: auto; 
        line-height: 1.5rem;
        border-bottom: solid 1px var(--rollover);
        border-top: solid 1px var(--rollover);
    }

section
    {
        margin: 2rem 0;
        padding: 0 1rem;
        scroll-margin-top: 2rem;
    } 
 
h1, h2, h3, h4
    {
        margin: 1rem 0;
        line-height: 2rem;
    }
    
p   {
        margin: 0.5rem 0;
    }

a:link, a:visited {
    color: var(--headerbg);
}

a:hover, a:active 
{ 
    color: var(--rollover); 
}   
    
ul, ol {
        padding: 0 2em;
    }

details {
    margin: 0;
    padding: 0.5rem;
    background: var(--headerbg);
}

/* code blocks  */
code {font-family: "Courier";
      font-size: 1.2rem; }
    
pre { font-family: "Courier";
        margin: 0.5rem;
        border: solid 1px #ccc;
        border-radius: 3px;
        padding: 0.5rem;
        font-size: 1.2rem;
        background: #f3f6f9;
        color: #000; 
        overflow: auto;}

footer
    {
        padding: 1rem 1rem;
        text-align: center;
        background: var(--headerbg);
    }

               
img, video, audio {
        padding: 0 -1em;
        width: 100%;
        display: block;
    }

/* ------- Wider screens ------- */
@media (min-width: 600px) 
{
    body {
        padding-top: 8rem; /* to allow for fixed header-nav */
    }
    
    header {
        position: fixed;
        top: 0;
        left: 0;
        height: 5.5rem;
        z-index: 100;
    }
    
    header h1 {
        font-size: 2.5rem;
    }
    
    a#hamburger {
        display: none;
    }
     
    nav { 
        display: block;
        position: fixed;
        left: 0;
        top: 5rem;
        height: 3rem;
        z-index: 99;
    }

    nav a:link, nav a:visited 
        { 
            border: solid 1px red;
            display: inline;
            width: 25%;
            border: 0;
            padding: 0 1rem; 
        }
    section {
        scroll-margin-top: 9em;
    }
    
}