/* Default CSS */

p, li, div
 {width:100%;
  margin: auto;
  font-size:16.0px;
  font-family:"Bahnschrift Light",sans-serif;
  color:black;
  lang="EN-US";}
body
  {width:90%; 
  margin: auto;
  font-size:16.0px;
  font-family:"Bahnschrift Light",sans-serif;
  color:black;
  lang="EN-US";}
p.quote, li.quote, div.quote
  {margin-top:12.0px;
  margin-bottom:0in;
  margin-right:0.5in;
  margin-left:0.5in;
  /*text-align:center;
  */
  width:auto;
  font-size:14.0px;
  font-family:"Verdana",sans-serif;
  color:black;
  font-style:italic;}
p.coverp, li.coverp, div.coverp
  {margin-top:12.0px;
  margin-bottom:0in;
  margin-right:0.5in;
  margin-left:0.5in;
  text-indent:0.3in;
  /*text-align:center;
  */
  width:auto;
  font-size:16.0px;
  font-family:"Times New Roman", Times, serif;
  color:black;
  font-style:normal;}
h1
  {margin-top:16.0px;
  margin-right:0in;
  margin-bottom:8.0px;
  margin-left:0in;
  page-break-after:avoid;
  font-size:27.0px;
  font-family:"Georgia",serif;
  color:black;
  font-weight:normal;}
h2
  {margin-top:16.0px;
  margin-right:0in;
  margin-bottom:8.0px;
  margin-left:0in;
  text-align:center;
  page-break-after:avoid;
  font-size:23.0px;
  font-family:"Georgia",serif;
  color:black;
  font-weight:normal;}
h3
  {margin-top:16.0px;
  margin-right:0in;
  margin-bottom:8.0px;
  margin-left:.2in;
  page-break-after:avoid;
  font-size:20.0px;
  font-family:"Georgia",serif;
  color:black;
  font-weight:normal;}
h4
  {margin-top:16.0px;
  margin-right:0in;
  margin-bottom:8.0px;
  margin-left:.5in;
  page-break-after:avoid;
  font-size:18.0px;
  font-family:"Georgia",serif;
  color:black;
  font-weight:normal;
  font-style:italic;}
h5
  {margin-top:3.0px;
  margin-right:0in;
  margin-bottom:0in;
  margin-left:.7in;
  text-indent:-.3in;
  page-break-after:avoid;
  font-size:14.0px;
  font-family:"Calibri Light",sans-serif;
  color:#2F5496;
  font-weight:normal;}
a:link
  {color:blue;
  text-decoration:underline;}
 a:visited
  {color:#954F72;
  text-decoration:underline;}
div.arrows {font-size:16px;
    width:100%;
    display: flex; 
    justify-content: space-between;
    margin: auto;}
div.box, p.box {background-color: lightgrey;
      width: 80%;
      border: 7px solid #72d62a;
      padding: 20px;
      margin: auto;
	  text-align:left;}	
ol
  {margin-bottom:0in;}
ul
  {margin-bottom:0in;}
li 
  {margin-left:0.1in;}  

 :link { color: blue }
 :visited { color: #954F72 }
 span.c2 {font-size:19.0px;font-family: "Georgia",serif;color:black}
 p.c1, div.c1 {text-align: center}

.bullet-list {
  display: inline-block; /* allows centering */
  text-align: left;      /* keeps bullets left-aligned */
  margin: 0;             /* optional: remove default margins */
  padding: 0;            /* optional: adjust spacing */
}

 /*was Ernstraud  --------*/ 
 .big  {
    float:left;
    margin-left:45%;
 }
@media screen and (max-width: 1400px){
    .big {margin-left:45%; } 
}
@media screen and (max-width: 800px){
    .big {margin-left:35%; } 
}

 /*was Ernstraud and Index ------*/
.accordion {
  background-color: #A88548;
  /*  was #eee */
  color: white;
  /*  was #444  -- has no effect; see individual line span statements instead*/
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  color: white;
  background-color: #754125; 
}   /* Was #ccc */

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

th, td
  {padding: 15px;
  border-style: solid; 
  border-width: 1px
}



/* was gems.htm and gemsarchive.htm & Index.htm --------- */
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* was Index.htm (classic 3-D buttons) */
.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.flex-item.text {
  flex: 1 1 auto;    
  min-width: 200px;
  margin: 0 10px;
  text-align: center;
}

.flex-item.image {
  flex: 0 0 180px; 
  /*text-align:right;  */
}

 /* --- Legacy Button Style --- */
  .legacy-button {
    /* Text and Font */
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 24px;
    
    /* Border and 3D Effect */
    border: 4px outset #FFD700; /* 'outset' creates the 3D look, #FFD700 is gold */
    border-radius: 2px; /* Slight rounding for a classic feel */

    /* Centered Gradient Background */
    background-color: #F0E68C; /* Fallback color (Khaki) */
    background-image: radial-gradient(circle, #FFFACD, #DAA520); /* Light yellow center to darker yellow edge #F0E68C*/
    
    cursor: pointer;
    text-align: center;
  }

  /* --- Interactivity --- */
  .legacy-button:hover {
    filter: brightness(1.15); /* Slightly brighten the whole button on hover */
  }

  .legacy-button:active {
    border-style: inset; /* 'inset' makes the button look pressed */
    filter: brightness(0.95); /* Slightly darken when pressed */
  }

  /* --- Positioning Example --- */
  #positioned-button {
    position: absolute;
    top: 50px;
    right: 50px;
  }
         
  .heading-container {
     position: relative;
     text-align: center;
   }
  
      .watermark-center {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -5%);
      width: 600px;   /* your desired watermark size */
      height: 600px;  /* keep it square */
      background-image: url('art/Lighthouse.jpeg');
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.10; /* adjust faintness here */
      pointer-events: none; /* makes watermark unclickable */
      z-index: 1;
    }
/* end Index.htm ------ */

    header, footer {
      background: #d5d2cb;  /* was #c0c0c0  */
      padding: 1em;
      text-align: center;
	  font-size: 14px
    }

.share-buttons {
  text-align: center;
  margin: 2em 0;
}
.share-buttons .icon {
  width: 32px;   /* adjust to your preferred size */
  height: auto;
  margin: 0 8px;
  vertical-align: middle;
}

    /* Master boilerplate for images */
    .responsive-img {
      width: 70%;       /* scales with window */
      height: auto;     /* preserves aspect ratio */
      display: block;   /* removes inline gaps */
      margin: 1em auto; /* centers image with breathing room */
      max-width: 100%;  /* prevents overflow on small screens */
    }
	
/* Tablet screens */
@media (max-width: 1024px) {
  .responsive-img {
    width: 80%;
  }
}

/* Small phones */
@media (max-width: 600px) {
  .responsive-img {
    width: 90%;
  }
}

/* Extra-small devices */
@media (max-width: 400px) {
  .responsive-img {
    width: 100%;
  }
}