/* <600 small;  600 tablets & large phones; 768 landscape tablets;  992 laptops and desktops; 1200 larger;  1600 largest*/
html    {
            background:url("parchment.jpg");/*background-color:#b9e8e1;//VERY PALE BLUE*/
            padding:5;left:0px;top:0px;margin:auto;z-index:10;float:center;
            text-align:center; 
            width:calc(100vw - scrollbar-width);/*CALC MUST HAVE SPACES AROUND - AND +  */
            color: black; 
            font-family:"Lucida Sans Unicode","Lucida Grande","Arial","sans-serif";
            font-size:10px;
        }
p#header{
            position:relative;top:-20px;bottom:1px solid blue;height:70px;font-size:12pt; 
        }
div#content{
           /* position:relative;margin:auto;width:800px;max-width:100%;text-align:center;float:center;z-index:1;font-size:10px */
        }
div#widecontent{
           width:100%;max-width:100%; float:center;font-size:10px; 
        }
/*==============================================================================*/      
h1      {   font-size:11px;font-weight:bold;color:black; }
@media only screen and (min-width: 600px) { h1 { font-size:15px; } }
@media only screen and (min-width: 768px) { h1 { font-size:18px; } }
@media only screen and (min-width: 992px){ h1 { font-size:21px; } }
@media only screen and (min-width: 1200px){ h1 { font-size:24px; } }
@media only screen and (min-width: 1600px){ h1 { font-size:27px; } }
/*==============================================================================*/      
h2      {  font-size:10px;font-weight:bold;color:black; }
@media only screen and (min-width: 600px){     h2 { font-size:14px;} }
@media only screen and (min-width: 768px){     h2 { font-size:17px;} }
@media only screen and (min-width: 992px){     h2 { font-size:20px;} }
@media only screen and (min-width: 1200px){    h2 { font-size:23px;} }
@media only screen and (min-width: 1600px){    h2 { font-size:26px;} }
/*==============================================================================*/
.shorttext
        {  font-size: 11px;font-weight:bold;font-style:normal;color:black;/*darkred;*/ 
           padding:10px;text-align: justify;
           width:calc(100vw - scrollbar-width);
           margin:auto;        
        }
@media only screen and (min-width: 600px){     .shorttext { font-size:13px;} }
@media only screen and (min-width: 768px){     .shorttext { font-size:16px;} }
@media only screen and (min-width: 992px){     .shorttext { font-size:19px;width:800px;} }
@media only screen and (min-width: 1200px){    .shorttext { font-size:22px;} }
@media only screen and (min-width: 1600px){    .shorttext { font-size:25px;} }

.longtext
        {  font-size: 11px;font-weight:bold;font-style:normal;color:black;/*darkred;*/ 
           padding:10px;text-align: justify;
           width:calc(100vw - scrollbar-width);
           margin:auto;        
        }
@media only screen and (min-width: 600px){     .longtext { font-size:13px;} }
@media only screen and (min-width: 768px){     .longtext { font-size:16px;} }
@media only screen and (min-width: 992px){     .longtext { font-size:19px;width:800px;} }
@media only screen and (min-width: 1200px){    .longtext { font-size:22px;} }
@media only screen and (min-width: 1600px){    .longtext { font-size:25px;} }
/*==============================================================================*/
.shortquote
       {   font-family:"TIMES NEW ROMAN";font-size: 12px;font-weight:bold;font-style:normal;color:darkred; 
            padding:10px;text-align: justify;
            width:calc(100vw - scrollbar-width);
            margin:auto;      
        } 
@media only screen and (min-width: 600px){     .shortquote { font-size:13px;} }
@media only screen and (min-width: 768px){     .shortquote { font-size:16px;} }
@media only screen and (min-width: 992px){     .shortquote { font-size:19px;width:800px;} }
@media only screen and (min-width: 1200px){    .shortquote { font-size:22px;} }
@media only screen and (min-width: 1600px){    .shortquote { font-size:25px;} }
/*------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------*/   
/*position:relative;*/ /* width:calc(100vw-(100vw-100%));*/ 
.longquote
       {   font-family:"TIMES NEW ROMAN";font-size: 12px;font-weight:bold;font-style:normal;color:darkred; 
            padding:10px;text-align: justify;
            width:calc(100vw - scrollbar-width);
            margin:auto;      
        } 
@media only screen and (min-width: 600px){     .longquote { font-size:13px;} }
@media only screen and (min-width: 768px){     .longquote { font-size:16px;} }
@media only screen and (min-width: 992px){     .longquote { font-size:19px;width:800px;} }
@media only screen and (min-width: 1200px){    .longquote { font-size:22px;} }
@media only screen and (min-width: 1600px){    .longquote { font-size:25px;} }
/*
        {
            font-family:"TIMES NEW ROMAN";font-size:12px;font-weight:bold;font-style:normal;color:darkred; 
            padding:10px;text-align: justify; 
            width:calc(100vw - scrollbar-width);  
        }
@media only screen and (min-width: 600px){  .longquote{ font-size:13px;}   }
@media only screen and (min-width: 768px){  .longquote{ font-size:16px;width: calc(100vw - scrollbar-width) ;
            -webkit-column-count: 2 ; -moz-column-count: 2 ; column-count: 2 ;
            -webkit-column-gap: 3em;  -moz-column-gap: 3em;  column-gap: 3em;
            -webkit-column-rule: 1px dotted black; -moz-column-rule: 1px dotted black; column-rule: 1px dotted black; }  }
@media only screen and (min-width: 992px){ .longquote{ font-size:19px; width: calc(100vw - scrollbar-width) ;/*width:780px;width:1400;calc(100% - scrollbar-width); */
/*            -webkit-column-count: 3 ; -moz-column-count: 3 ; column-count: 3 ;
            -webkit-column-gap: 3em;  -moz-column-gap: 3em;  column-gap: 3em;
            -webkit-column-rule: 1px dotted black; -moz-column-rule: 1px dotted black; column-rule: 1px dotted black; } }
@media only screen and (min-width: 1200px){ .longquote{ font-size:22px; width: calc(100vw - scrollbar-width) ; 
            -webkit-columns: 4 10vw; -moz-columns: 4 10vw; columns: 4 10vw; 
            -webkit-column-gap: 4em;  -moz-column-gap: 4em;  column-gap: 4em;
            -webkit-column-rule: 1px dotted black; -moz-column-rule: 1px dotted black; column-rule: 1px dotted black; } }
@media only screen and (min-width: 1600px){  .longquote{ font-size:25px;}   }
*/
/*------------------------------------------------------------------------------*/
.poetry{
            font-family:"TIMES NEW ROMAN";
            position:relative; margin:auto;font-size:12px;font-style:italic;font-weight:bold;text-decoration:none;color:brown;
            background:url("parchment.jpg");padding:10px;
            text-align: center;
        }
@media only screen and (min-width: 600px){     .poetry { font-size:13px;} }
@media only screen and (min-width: 768px){     .poetry { font-size:17px;} }
@media only screen and (min-width: 992px){     .poetry { font-size:20px;} }
@media only screen and (min-width: 1200px){    .poetry { font-size:22px;} }
@media only screen and (min-width: 1600px){    .poetry { font-size:25px;} }
/*------------------------------------------------------------------------------*/
.picture{
            width:calc(100vw - scrollbar-width);max-width:800px;
            position:relative;margin:auto;padding:10px;font-size:12px;font-style:italic;font-weight:bold;
            text-decoration:none;color:black;
            text-align:center;
        }
@media only screen and (min-width: 600px){     .picture { font-size:13px;} }
@media only screen and (min-width: 768px){     .picture { font-size:16px;} }
@media only screen and (min-width: 992px){     .picture { font-size:19px;} }
@media only screen and (min-width: 1200px){    .picture { font-size:22px;} }
@media only screen and (min-width: 1600px){    .picture { font-size:25px;} }
/*------------------------------------------------------------------------------*/
.largepicture{
            width:calc(100vw - scrollbar-width);/*max-width:calc((100vw - scrollbar-width) - 40px);*//*800px;*/
            position:relative;padding:10px;margin:auto;font-size:10px;font-style:italic;font-weight:bold;
            text-decoration:none;color:black;
            text-align:center;
            }  
@media only screen and (min-width: 600px){     .largepicture { font-size:13px;} }
@media only screen and (min-width: 768px){     .largepicture { font-size:16px;} }
@media only screen and (min-width: 992px){     .largepicture { font-size:19px;} }
@media only screen and (min-width: 1200px){    .largepicture { font-size:22px;} }
@media only screen and (min-width: 1600px){    .largepicture { font-size:25px;} }
/*
@media screen and (orientation:landscape)
            {
            .largepicture{
                  width:100vw;
                  }
            }    */
/*------------------------------------------------------------------------------*/
@media screen and (orientation:landscape)
            {
           /* img{ max-width:100vh;max-height:100vh;} *//*stops images overflowing in small landscape screens.  Distorts*/
            }
/*------------------------------------------------------------------------------*/
.comment{
            font-size:10pt;font-style:italic;font-weight:bold;color:darkgreen;padding:5px;text-align: justify;
            width:800px; max-width:100%;margin:auto;
        }

/*.largepicture{
            position:relative;padding:10px;margin:auto;font-size:10px;font-style:italic;font-weight:bold;
            text-decoration:none;color:black;width:100%;max-width:100%;text-align:center;} */ 
/*------------------------------------------------------------------------------
the upstream and downstream link arrows <   >*/
.uparrow {  overflow:hidden; background-color:rgba(0, 0, 0, 0); 
	        position:fixed;top:0; right:5em;z-index:1000;font-size:28pt;font-weight:bold;
        }
.downarrow {overflow:hidden; background-color:rgba(0, 0, 0, 0); 
	       position:fixed;top:0; right:3em;z-index:1000;font-size:28pt;font-weight:bold;
        }
/*------------------------------------------------------------------------------
the 3 horizontal lines menu in fixed position top right */
.menu {overflow:hidden; background-color:rgba(0, 0, 0, 0); 
	position:fixed;top:0; right:1em;z-index:1000;}
.box-shadow-menu {position:relative;padding-left:1.25em;z-index:1000;}
.box-shadow-menu:before{content:"";
	position:absolute;left:0;top:0.25em;width:10em;height:0.15em;z-index:1000;
        background:black; box-shadow:0 0.25em 0 0 black, 0 0.5em 0 0 black;z-index:1000;}
/*----------------------------------------------------------------------------*/
.xmenu{font-size:20pt;overflow:hidden; background-color:white; position:fixed; top: 0; right:3em;z-index:1000;}
/*------------------------------------------------------------------------------*/
.uparrow{font-size:20pt;overflow:hidden; background-color:white;position:fixed;top;0:right:3em;z-index;1000:}
.downarrow{font-size:20pt;overflow:hidden; background-color:white;position:fixed;top;0:right:2em;z-index;1000:}
/*------------------------------------------------------------------------------*/
a:link    {color:red;text-decoration: underline;
          -webkit-text-decoration-color: red; /* Safari */    
          text-decoration-color: red;}
a:visited {}
a:hover   {background-color:lightgreen;}
a:active  {background-color:hotpink;}

.endbutton {
  background-color: #4CAF50;
  border: 2;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
}
.button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 8px 8px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 18px;
        }

/*offset is redundant (but still used in html now header is relative-----------*/
.offset:before 
        {
            display:block;content: " ";height: 0px;      /* Give height of your fixed element */
            margin-top: -0px; /* Give negative margin of your fixed element */  	
            visibility: hidden;
        }
/*==============================================================================*/