* {
    box-sizing: border-box;
}

:root {
    /* Color scheme */
      --textcolor: #ddd;
      --bgcolor: #ddd;
      --highlight: #49c;
      --headerbg: #050035;
      --headercolor: #ddd;
      --headerrollover: #999;
      --navcolor: #f70; 
      --navrollover: #f00;
      --navbg: #050035;
      --codebg: #f3f6f9;
      --codecolor: #000;
      --footerbg: #0d045e;
  }


  .merriweather-all {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    /* font-variation-settings: "width" 800;*/
  }

html {
    background: var(--footerbg);
}

body 
    { 
        margin: 0; 
        border: 0;
        padding: 0;
        font-family: Verdana, Helvetica, sans-serif; 
        font-size: 100.01%; 
        font-weight: normal; 
        color: var(--textcolor);
        background: var(--bgcolor);
    }

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

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

table 
    {
        border-collapse: collapse; 
        margin: 1rem;
    }

td 
    {
        margin: 0; 
        padding: 0.4rem; 
        border: solid 0.06rem black;  
        vertical-align: top; 
    }

ul 
    {
        list-style-type: square; 
    }

li 
    {
        padding-bottom: 0.2rem; 
    }

img, .half_center, .half_right, .small_right
    { 
        width: 100%; 
    }

.circle-cropper {
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }
    
figure
   {
       margin: 0;
       border: 0;
       padding: 0;
   }
   
figcaption
   {
       margin-top: 0.5rem; text-align: center;
       font-style: italic;
   }
            
        
header 
    { 
        margin: 0; 
        border: 0; 
        padding: 0; 
        background: var(--headerbg); 
        color: var(--bgcolor);
        text-align: center; 
        overflow: auto;  
        width: 100%;
        position: relative;
    }

header h1  {
        margin: 0;
        padding: 1rem;
    }

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

div#mobile 
    { 
        font-size: 1.50rem;
        position: absolute;
        bottom: 0.6rem;
        right: 1rem; 
    }
div#mobile a:link, div#mobile a:visited 
    { 
        color: var(--headercolor); 
    }

div#mobile a:hover, div#mobile a:active 
    { 
        color: var(--navrollover); 
    }


/* Default menu is for a mobile device, vertically oriented and  */
/* taking up the full width of the viewport. Initially not */
/* displayed, however! */
nav { 
        margin:0; 
        border:0; 
        padding: 0; 
        width: 100%; 
        clear: both; 
        display: none; 
        overflow: auto;
        font-family: Verdana, Helvetica, Arial, sans-serif;  
        font-weight: bold;
        background: var(--navbg);
    }
nav ul 
    { 
        margin: 0; 
        border: 0; 
        padding: 0; 
        width: 100%; 
    }
nav li 
    { 
        margin: 0; 
        padding: 0; 
        border-style: solid; 
        border-width: 0.06rem 0 0.06rem 0; 
        border-color: var(--navrollover);
        width: 100%; 
        height: 100%; 
        font-size: 0.9rem;
        display: block; 
        text-align: center; 
        list-style-type: none;   
    }
nav a:link, nav a:visited 
    { 
        margin: 0; 
        border: 0; 
        padding: 0.5rem 0; 
        display: block; 
        height: 100%;
        text-decoration: none; 
        color: var(--navcolor); 
        background: var(--navbg);
    }
    
nav a:hover, nav a:active 
    { 
        color: var(--navrollover);  
    }

nav li#here 
    {
        display: none;
        padding: 0.5rem 0; 
        color: var(--navrollover);
    }
    
main 
    { 
        background-image: linear-gradient(to bottom, #050035, #0d045e);
        margin: 0;
        padding: 1rem;
        overflow: auto; 
        line-height: 1.5rem;
    }
    
h1, h2, h3, h4 {
        line-height: 2rem;
    }
h1 code, h2 code, h3 code, h4 code
    {
        font-size: 1.2em;   
    }
    
a
    {
        scroll-margin-top: 4rem;
    }



/* Default content1 and content2 are for a mobile device, taking up the full 
   width of the screen */
#content1, #content2 
    { 
        margin: 0; 
        border: 0; 
        padding: 0; 
        float: left; 
        width: 100%; 
    }


.announcement 
    { 
        margin: 0 0 1rem 0;  
        border: dashed 0.06rem #999; 
        padding: 0.5rem; 
        background-color: #eee; 
        overflow: auto; 
    }

.toggle
{
    display: none;
}

code {font-size: 1.1rem; font-weight: bold;}

pre { margin: 0.5rem;
       border: solid 0.06rem #ccc;
       border-radius: 0.18rem;
       padding: 0.5rem;
       font-size: 1.0rem;
       background: var(--codebg);
       color: var(--codecolor); 
       
       /* From https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
       word-break: break-all; /* webkit */
       word-wrap: break-word;
       white-space: pre;
       white-space: -moz-pre-wrap; /* fennec */
       white-space: pre-wrap;
    }

blockquote
    {
        margin: 1em;
        border: solid 0.06rem var(--codecolor);
        padding: 1em;
        background: var(--codebg);
    }
    
footer 
    { 
        margin: 0; 
        border: 0; 
        padding: 0 1rem; 
        background: var(--footerbg); 
        color: var(--headercolor);
        text-align: center; 
        overflow: auto; 
        font-size: 0.8rem;
    }
footer a:link, footer a:visited 
    { 
        color: var(--textcolor); 
    }


/* desktop display, for large-width desktop-sized display, */
/* all the way down to 600px wide*/
@media (min-width: 36rem) 
{ 
    .container {
        margin: 0 auto;
        padding: 0 15%;
    }
    
    body { 
        /* font-size: 90%; */
    }
    header h1 {
        text-align: left; 
        margin: 0;
        padding: 1rem 0;
    }

    /* set up horizontal menu */
    #mobile {
        display: none; 
    } 
    nav {
        display: block;
    } 
    nav li {
        border-width: 0; 
        width: 25%; 
        float: left; 
        
    }
    nav li#here {
        display: inline;
    }
    
    main {
        padding: 0;
    }
    
    /* images on the desktop */
    .half_center { 
      width: 50%; 
      display: block;
      margin: 1em auto; 
      border: 0; 
      padding: 0; 
    }
    
    .half_right { 
      margin: 0 1em 1em 1em; 
      border: 0; 
      padding: 0; 
      width: 50%; 
      float: right;
    }
    
    .small_right { 
      margin: 0 1em 1em 1em; 
      border: 0; 
      padding: 0; 
      width: 30%; 
      float: right;  
   }
    
}