@import url('https://fonts.googleapis.com/css2?family=Kalam&family=Cabin+Sketch:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Solitreo&display=swap');


:root {
  --COLORFern_Green: rgb(92,113,93);
  --COLORBumbleBee: rgb(242,220,153);
  --COLORLichenGreen: rgb(50,100,50);
  --THFont1: "Solitreo";
  --THFont2: "Kalam";
  --MainTitleCOL: var(--COLORFern_Green);
  --L2HeadColor: var(--COLORFern_Green);
  --WalkSummaryColor: var(--COLORBumbleBee);
  --RowAltCOL: rgba(139, 162, 106,0.2);
  --TableheadCOL: rgba(139, 162, 106,0.5); 
  --TabSubHead: var(--COLORFern_Green);
  --RowHighlightCOL: var(--COLORBumbleBee);
  --TripTableRowSubheadCOL: var(--COLORBumbleBee);
  --FlagENG: 🏴󠁧󠁢󠁥󠁮󠁧󠁿
  --FlagCYM: 🏴󠁧󠁢󠁷󠁬󠁳󠁿
 }

P,th,td
{
  font-family: sans-serif;
}

blockquote
{font-family: var(--THFont2);}

p.MainSubhead
{
  text-align:center;
  font-family: var(--THFont2),sans-serif;
  font-size:120%;
  margin-top:0rem;
  margin-bottom:0rem;
  color: var(--L2HeadColor);
}

H1,H2,h3
{
  font-family: var(--THFont1),sans-serif;
}

h2
{
  font-size: 3rem;
	color: var(--L2HeadColor);
  border:1rem;
  margin-left:0remx;
  margin-bottom:0rem;

}
.maintit
{
   font-size: 5rem;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   text-align: center;
   color:var(--MainTitleCOL);
 

}

h1.indextit
{
  font-size:5rem;
  text-align: center;
  margin-top:0px;
  margin-bottom:0px;
  color: var(--MainTitleCOL);
}
p.tabsubhead

{ 
   color:var(--TabSubHead);
   font-family: var(--THFont1),sans-serif;
   font-size:2rem;
   margin-top:0px;
   margin-bottom:0px;
}

p.footer {text-align: center;
  background: var(  --TableheadCOL);
  padding: 1rem;
  font-family: var(--THFont1);
  border-radius: 15px;
}

P.date
{
   font-style: italic;
   text-align: center;
   
}	

P.stats
{
   font-style: italic;
   text-align: center;
   
}	


p.summary
{
   margin-left: 10%;
   margin-right: 10%;
   padding:2rem;
   font-family: var(--THFont2);
   font-size: 130%;
 
   background-color:var(--WalkSummaryColor);
   text-align: center;
   border-radius:1rem;
}

div.pquote
{
  border-radius:1rem;
  margin-left:20%; 
  margin-right:20%;
  font-family: serif;
  background-color:#EEEEEE; 
  padding:1rem;
box-shadow: 15px 15px 15px lightgrey ;
}
p.quoteauthor
{text-align: right;
  
}


.youtubeem, .flickrem, .alltrailsem
{
      text-align: center;
   }

img.snap 
{
  border-radius: 20px;
  box-shadow: 15px 15px 15px lightgrey ;
}
table
{
   width: 95%}

table, th, tr, td
{
   border: 1px solid;
   border-collapse: collapse;
   padding: 0.5em;
}


tr:nth-child(odd)
{
   background-color: var(--RowAltCOL);
}

tr:hover 
{
   background-color: var(--RowHighlightCOL);
}

tr.rowsubhead
{background: var(--TripTableRowSubheadCOL);}
th 
{
   height:1.2em;
   text-align: left;
   background: var(--TableheadCOL);
}

/*Menu Shiz*/


.topnav {
  background-color: var(--MainTitleCOL);
  overflow: hidden;
  font-family: var(--THFont1);
  border-radius: 15px;
  
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 1% 1%;
  padding-left: 3%;
  padding-right: 3%;
  text-decoration: none;
  font-size: 17px;
  border-radius: 15px;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  
}
/* Add a color to the active/current link */
.topnav a.active {
  background-color: var(--TripTableRowSubheadCOL);
  color: var(--MainTitleCOL);
}