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

@import url('https://fonts.googleapis.com/css2?family=Maitree:wght@200;300;400;500;600;700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


* { margin: 0; padding: 0; box-sizing: border-box; width: 100%; 
    /* Color scheme */
      --textcolor: #000;
      --bgcolor: #fff;
      --headercolor: #fff;
      --headerbg: #203872;
      --navhover: #EF8942;
      --navbg: #fff;
      --navcolor: #203872;
      --navhere: #EF8942;
      --headercolor: #fff;
      --rollover: #f00; 
}

body { 
        font-family: "Maitree", serif;
        font-size: 110%;
        color: var(--textcolor);
        background: var(--bgcolor);
    }

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

header h1, header h2, header h3, header h4 {
        margin: 0;
        padding: 0.3rem 1rem;
        font-family: 'Raleway', sans-serif;
        }

header a:link, header a:visited {
        text-decoration: none; 
        color: var(--headercolor); 
    }

header a:hover, header a:active {
        color: var(--navhover); 
    }

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

a#hamburger {
    font-size: 2.2em;
    width: 2rem;
    display: block;
    position: absolute;
    top: 0.5rem;
    right: 0.2rem;
}

nav 
    { 
        font-family: 'Raleway', sans-serif;
        width: 100%;
        text-align: center;
        font-weight: bold;
        background: var(--navbg);
        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(--navcolor);
        background: var(--navbg);
        white-space: nowrap;
    }
nav a:hover, nav a:active 
    { 
        color: var(--navhover);
    }   
    
nav a.here
    {
        color: var(--navhover);
    }
           
main 
    { 
        overflow: auto; 
        line-height: 1.5rem;
    }

div.column
    {
        margin: 0; 
        border: 0; 
        padding: 0; 
        float: left; 
        width: 100%;  
    }
    
section
    {
        overflow: auto;
        padding: 1rem;
        scroll-margin-top: 1rem;
    } 

h1, h2, h3, h4 {
    line-height: 1em;
    margin: 1.5rem 0;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }    

p   {
        margin: 1rem 0;
    }

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

a:hover, a:active 
{ 
    color: var(--rollover); 
}   

a.self { 
    color: var(--rollover);
}  

ul, ol {
        padding: 0 2rem;
    }

table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 85%; margin: 0 auto;
}

table caption {
    font-size: 120%;
    font-weight: bold;
    padding: 2em 0 1em 0;
}

th {
    border: solid 1px #ddd;
    text-align: center;
    background: #000;
    color: #fff;    
    padding: 1em;
}

td {
    border: solid 1px #999;
    text-align: left;
    background: #eee;
    color: #000;
    padding: 1em;
    vertical-align: top;
}

blockquote {
    border: solid 1px #999;
    padding: 1em;
    background: #eee;    
}

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

div.article {
    background: #eee;
    margin: 0 0 1rem 0;
}

div.article h2 {
    background: #000;
    color: #fff;
    margin: 0;
    padding: 0.5em;
}

div.article p {
    margin: 0; 
    padding: 0.5em;
}
    
    

/* 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 2rem;
        text-align: center;
        background: var(--headerbg);
        color: var(--headercolor);
    }

               
img, video, audio {
        width: 100%;
        display: block;
    }
    
figure {
    width: 100%;
}

figcaption {
    padding: 0.5rem 1rem;
}


/* ------- Wider screens ------- */
@media (min-width: 800px) 
{
    header {
        text-align: left;
    }
    
    a#hamburger {
        display: none;
    }
    
    nav { display: flex; 
        width: 75%;
        margin: 1em auto;
        overflow: auto;
        padding: 0;
        
    }
    
    nav a:link, nav a:visited  { 
        display: inline;
        width: 25%;
        padding: 1rem 1rem; 
        border-bottom: 3px solid transparent; /* Reserve space for border */
    }
    
    nav a:hover, nav a:active 
    { 
        color: var(--navhover);
        border-bottom: solid 3px var(--navhover);
    }   
    
    nav a.here {
        color: var(--navhere);
        border-bottom: solid 3px var(--navhere);
    }
    
    div.column { 
        padding: 0 4% 0 0; 
        width: 46%; 
        float: left; 
        
    }
    
    section {
        width: 75%; 
        margin: 0 auto;
    }
}