:root {--global-font-size:1em;--global-line-height:1.4em;--global-space:1em;
          --font-family-sans-serif: Roboto,"Neue Helvetica",Spectral, Arial, Montserrat;
          --background-color:#FFFFFF;--font-color:#212529;--invert-a-color:#808080;
          --a-color:#184220;--marron-color:#e6cb97; --green-color:#503433;--title-color:#303938; }

* {  box-sizing: border-box; }

body { font-size:var(--global-font-size);color:var(--font-color);line-height:var(--global-line-height);
         font-family:var(--font-stack);
         font-weight: 400;word-wrap:break-word;background-color:var(--background-color);
         margin-left: auto; margin-right: auto; width: 1000px;}
         
            /* For small screen: */
@media only screen and (max-width: 991px)
{  body { margin: 0px ; width: 100%; }
   
}

a {  color:var(--a-color);}     
a:hover { 
   background-color:var(--a-color);
   color:var(--invert-a-color);
}

pre { font-family:var(--font-stack); }

img {
  width: 100%;
  height: auto;
}

img.gallery {
  border : 1px solid var(--marron-color);
}

img.form {
  border : 1px solid var(--marron-color);
  width: 300px;
  height: auto;  
  float:right;
}

img.fix {
  width: initial;
  height: initial;
  float:left;
  margin-right: 1em;
}

img.small {
  width:200px;
  height: auto;
  float:right;
  padding:1em;
}

div.title {
   width: 100%;
   padding: 1em;
   background-color:var(--marron-color);
   color:var(--title-color);
}

div.subtitle {
   width: 100%;
   padding: 0.5em;
   font-weight: bolder;
   background-color:var(--marron-color);
   color:var(--title-color);
}

div.header  { 
  display: flex;
  flex-direction: row;
  margin: 1em;
}

p.frame  {  border: 2px solid;}

a.nav {  font-style: italic;}

div.home {   margin-right: 1em;}  

div.nav  {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

div.onenav  { margin-right: 1em; }

img.nav {
  width:100%;
  height:auto;
} 

.multicols::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 1em;
}



 /* For desktop: */
.onecol {width: 100%;}         
.col-2 {width: 50%;
          display: flex;
          flex-direction: column;}                                                                                                                                         
.col-3 {width: 33.33%;} 


  /* For mobile phones: */      
@media only screen and (max-width: 770px) { 
  [class*="col-"] { width: 100%;}        
  div.nav   {flex-direction: column;   }
  
}

   
h1,h2 {
    clear: both;
    text-align: center;
    line-height: 1;
    padding: 0.5em;
}
h3,h4,h5,h6 {
    clear: both;
    padding: 0.5em;
}

p {  padding: 1em; }
 
div.footer {
  width: 100%;
  padding: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
                                                                                                            
hr {
   border: 5px solid var(--marron-color);
   clear: both;
}