/* style.css */
/* ----- BASICS ELEMENTS ------------------------------------------------------------------------------------------------- */
/* copied from ZEN CSS */
body { 
	font: Georgia;
	color: #ffffff;/* white */ 
	background-color: #dde6d5;/* <!-- Dusty Sage Color Palette / pale green -->*/
	margin: 0px; 
	padding: 0px;
	text-align: center;
	}

p { 
	padding: 0px;
	font: 14px Tahoma; 
	margin-top: 8px;
	margin-bottom: 15px;
	}

h1 {
	margin-top: 10px;
	font: bold 24pt Tahoma; /*13pt Tahoma*/
	margin-bottom: 0px; 
	color: #000000;
	padding-bottom: 10px;
	}

h2 {
	margin-top: 10px;
	font: bold 18pt Tahoma; /*18pt Tahom*/
	margin-bottom: 0px; 
	color: #000000;
	padding-bottom: 10px;
	}

h3 { 
	margin-top: 10px;
	font: bold 13pt Tahoma; /*24pt Tahoma*/
	margin-bottom: 0px; 
	color: #667b68;
	padding-bottom: 10px;
	}


a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #7F7F7F;
	}

a:visited { 
	font-weight: bold; 
	text-decoration: line-through; 
	color: #7F7F7F;
	}

a:hover, a:active { 
	text-decoration: underline; 
	color: #3C9A35;
	}

/* ----- LAYOUT ------------------------------------------------------------------------------------------------------ */


/*
web page for Dusty Sage Color Palette
https://www.color-hex.com/color-palette/71279

*/

#container { 
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	padding-top: 0px;
	text-align: left;
	position: relative;
	top: -130px;
	}

#linkList {
	width: 148px;
	font: 10px Tahoma; 
	position: absolute;
	top: 217px;
	left: 389px;
	margin: 0px;
	padding: 0px;
	}

#footer {
	text-align: center;
	text-transform: uppercase;
	font: bold 10px Tahoma;
	color:#000;
	padding: 20px;
	margin-top: 20px;
	border-top: 1px dashed #dddddd; 
	}


<!--CSS from ChatGPT for grid-table-->  


/* Main layout grid: 3 columns  * logo - main content - floating menu */
.page-layout {
  display: grid;
  grid-template-columns: 15% 70% 15%; /*percentages for Logo, Main Content, Floating Menu*/
  grid-gap: 10px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Grid table content area */
.grid-table {
  grid-area: content;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  gap: 1px;
  background-color: #667b68;
  color: #000;
  padding: 10px;
}

.grid-table > div {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  font-weight: bold;
}


/* Logo box styling */
.logo-box {
  position: sticky;
  top: 20px;
  left: 20px;
  padding: 10px;
  background-color: #f1f1f1;
  font-weight: bold;
  font-size: 24px;
  border: 1px solid #ccc;
  width: 160px;
  align-self: start;
  border: 1px solid #667b68;
  border-radius: 4px;
}



/* Floating menu (sticky) */
.floating-menu {
  position: fixed;  /*sticky*/
  top: 20px;
  right: 20px; 
  align-self: start;
  border: 1px solid #667b68;
  border-radius: 4px;
  opacity: 0;                      /* start transparent */
  animation: fadeIn 1.2s ease-out forwards;  /* apply animation */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.LayerBox {
  padding: 15px;
  background-color: #f9f9f9;
}

.LayerBox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.LayerBox li {
  margin-bottom: 10px;
}

.LayerBox a {
  text-decoration: none;
  color: #007BFF;
}

.LayerBox a:hover {
  text-decoration: underline;
}





/* Responsive design */
@media screen and (max-width: 768px) 
{
  .page-layout {
    grid-template-areas:
      "logo"
      "menu"
      "content";
    grid-template-columns: 1fr;
  }

  .floating-menu {
    position: static;
    margin-top: 20px;
  }
}