html{ font-size: 100%; } /*to make root em OR rem 16px*/
:root {
  --fluid-h1: clamp(1.5625rem, 1.275rem + 1.4375vw, 3rem);
  --fluid-h2: clamp(1.4375rem, 1.225rem + 1.0625vw, 2.5rem);
  --fluid-h3: clamp(1.3125rem, 1.175rem + 0.6875vw, 2rem);
  --fluid-h4: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
  --fluid-body: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
  --fluid-h6: clamp(.875rem, .85rem + 0.125vw, 1rem); /*footnote*/
  --fluid-h7: clamp(.8125rem, .8rem + 0.0625vw, .875rem); /*copyright*/
 --fluid-h8: clamp(.875rem, .825rem + 0.25vw, 1.125rem); }/*menitems*/


h1 { font-size: var(--fluid-h1); line-height: 1.5;color:#6b5b4f; }/*was #6b5b4f  grey#5e6870*/
h2 { font-size: var(--fluid-h2); line-height: 1.5; color:#61524d;}
h3 { font-size: var(--fluid-h3); line-height: 1.5;color:#61524d }
h4 { font-size: var(--fluid-h4); line-height: 1.4; color:#61524d}
p  { font-size: var(--fluid-body); line-height: 1.4; }
h6 { font-size: var(--fluid-h6); line-height: 1.4;}
h7 { font-size: var(--fluid-h7); line-height: 1.4;}
h8 { font-size: var(--fluid-h8); line-height: 1.4;}


body { background-image: linear-gradient(to left, #38522C, #F7F2EF), linear-gradient(to right, #38522C, #F7F2EF); background-repeat: no-repeat, no-repeat; background-color:#f3efe7; background-size: 1vw 100% , 1vw 100%; background-position: left, right; margin:0;font-family:"Georgia", serif;}
@media screen and (max-width: 800px) { body { font-family:"Times New Roman", serif;} }


a:link {color: #4b6341; text-decoration: underline dotted 1px; text-underline-offset:2px; font-weight: bold; }
a:visited {color:#61524d; font-weight:bold}
a:hover {color:#ffffff; font-weight:bold;  background-color:grey; }
a:active {color:green}

/* The sticky top header that always stays on top #F7F2EF; */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 14vh; /* is above overlay */
  z-index: 3000;
background: #f3efe7; }

/* @media screen and (max-width: 800px) {header {height: 11vh; } } */


#pageheader {  display: flex;  align-items: center;  justify-content: space-between; 
  width: 100%; height:10vh; padding:.6vh; }
 /* 11.2vh space between Pushes items to the outer edges */

#pageheader a,
#placeholder { width: 11vw;}/* Must be the exact same width */

#pageheader a:hover {background: grey }

#pageheader a img {width:100%;padding-top:.6vh}

 /* @media screen and (max-width: 800px) {#pageheader {height:5.8vh; line-height:1.3} } */

#pageheader h1 { text-align:center; ; color:#38522C; line-height:1}

nav ul {margin: 0; padding: 0; list-style: none;} /* removes auto margins etc in nav ul*/

#menuposition {}

#RPMenu ul {}

body:has(#RPMenu:hover) #overlay {visibility:visible}

#RPMenu li {display:inline-block; position:relative; width:20%; list-style-type:none; z-index:5;  font-size: var(--fluid-h8); } 

#RPMenu li a { display:block; margin: 0px 2px 0 0; padding:4px 4px; background:#38522C; color:#F7F2EF;text-align:center; text-decoration: none;}

#RPMenu li a:hover {   background:grey; }

#RPMenu div {position:absolute; z-index:900; visibility:hidden; width:97%; padding:2px 2px; background:#38522C;}

#RPMenu div a { display: block; padding:5px 5px; margin:2px; text-align: center;text-decoration: none; background:#F7F2EF; color:black; }

#RPMenu div a:hover {background:grey; color:#F7F2EF } 

/* change any item color only when specific item anywhere in body is hovered*/
/* body:has(#CClist:hover) #sub-menu li {display:block}*/
/*body:has(#CClist:hover) #sub-menu li {display:block}*/
/*body:has(#sub-menu:hover) #CClist { background:grey; color:black; } ----nice pale blue#f2f7fb*/

main {padding-bottom:2vh; padding-left:2vw; padding-right:2vw; z-index:1; margin-top:14vh; } 
/* top margin makes it starts exactly below the top header  */
/* did have min-height:100vh;  but doesnt need*/

/* @media screen and (max-width: 800px) {main {margin-top: 11vh; } } *//*should match header*/

.content-blurb {    
    padding-top:1.5vw;
    max-width: 800px;
    width: 100%;
    margin-left:auto; margin-right:auto;}

#RRfootruler {padding-top:1%; margin-left:10%; margin-right:10%; }

#privacy {font-size: var(--fluid-h6);font-style:italic;  color: #666;  max-width: 600px; margin-left: auto; margin-right: auto; padding-left:8vw; padding-right:8vw;}

#copyrightfoot {height:10vh; margin-left:auto; margin-right:auto; text-align:center; padding-left:8vw; padding-right:8vw; font-size: var(--fluid-h7);}

#TopPageBut {position: fixed;  bottom: 10vh; right: 2vw; width: 5vw; height: 5vw; border-radius: 50%; background-color: #63414b;  text-align: center; justify-content: center; font-size: 4vw; text-decoration: none; z-index: 9999}
#TopPageBut a:link {color:#F7F2EF; text-decoration:none}
#TopPageBut a:visited {color:#F7F2EF; text-decoration:none;}
#TopPageBut:hover {background-color: grey; transform: scale(1.1);}
@media screen and (max-width: 600px) {#TopPageBut {width: 8vw; height: 8vw; font-size: 7vw} }


@media screen and (min-width: 801px) {#flexbooks figure {width:30vw;  } }

@media screen and (max-width: 800px) {#flexbooks figure {width:50vw; } }


#overlay { position:fixed; visibility:hidden; top:14vh; bottom:0; height:100vh; width:100% ;  background:grey; opacity:0.7; z-index:4; }

/* @media screen and (max-width: 800px) {#overlay {top:8vh; } } header is 11 at sml screen - covers overlay*/


.content-blurb figure {text-align:center; padding-left:2vw }

.side-caption {display: flex; 
	  	 align-items: center;/*  - Aligns items vertically */
  		    margin: 0; /*  - Removes default figure margins */
		  		}   

.side-caption  img{  width: 40%;       /*  allocates space for the image */
  	height: auto;
  	display: block;  }   	 /* Removes extra vertical whitespace gaps */

.side-caption figcaption { width: 60%;          /* Allocates space for the caption */
  		padding-left: 0px; /*  Creates breathing room after the line */
  		margin-left: 0px;   /*  Creates space before the line */
  		 }  /*  border-left: 2px solid #333; wasThe border line between them */

.side-caption figcaption a {font-size: clamp(0.8rem, 2vw, 1.0rem); 
  display:inline-block; padding: 12px 12px; font-weight:bold; border-radius: 4px;
  transition: background-color 0.2s ease; background-color:#4b6341; color:white;
  text-decoration:none; }
 /* Removes the default underline */

/* Hover effect for better user experience - when use barnes noble button class button-link */
figcaption a:hover {  background-color: grey;}

/* Hover effect for better user experience - for keybooard users */

.button-link:focus-visible {
  outline: 3px solid #0056b3;
  outline-offset: 2px;
  border-radius: inherit; /* Ensures the outline follows your rounded corners */
}

#pasteventlist {line-height:1.5;}
#pasteventlist li{font-size: var(--fluid-h4); text-indent:20px hanging; padding:10px}
#pasteventlist li span {font-size: var(--fluid-body); display:block; ; color: #555; padding-left:50px;text-indent:0}