.footerbottom { background-color: #333; font-size: 14px; color: silver; text-align: center; width: 100%; padding-top: 25px; padding-bottom: 45px; display: inline-block; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey; }
.footer-line, .footer-line a {font-size: 11px; color: #CCCCCC; display: inline-block;}


/* Social share buttons */
.social-share-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding-bottom:.5rem; }
.social-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: #f0f0f0; text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.3s ease; position: relative; cursor: pointer; border: none; outline: none; }
.social-button:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); filter: drop-shadow(0 0 8px currentColor); }
.social-button:focus { box-shadow: 0 0 0 3px orgba(66, 153, 225, 0.5); }
.social-button svg { width: 20px; height: 20px; flex-shrink: 0; }
.social-button.facebook svg { color: #3b5998; }
.social-button.twitter svg { color: #1DA1F2; }
.social-button.linkedin svg { color: #0077b5; }
.social-button.whatsapp svg { color: #25D366; }
.social-button.email svg { color: #EA4335; }
.social-button.copy svg { color: #6c757d; }
.social-button .tooltip { visibility: hidden; opacity: 0; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 5px 8px; position: absolute; z-index: 1; bottom: 120%; left: 50%; transform: translateX(-50%); white-space: nowrap; transition: opacity 0.3s ease, visibility 0.3s ease; font-size: 0.85em; }
.social-button:hover .tooltip { visibility: visible; opacity: 1; }
@keyframes checkmark { 0% { opacity: 0; transform: scale(0.5);} 100% { opacity: 1; transform: scale(1);} }
.copy-success { position: absolute; opacity: 0; color: #28a745; animation: checkmark 0.3s ease-out forwards; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
html { height: 100%; }
body { padding-top: 0px; background: hsl(0, 0%, 97%);   font-family: sans-serif, 'PT Serif', serif;}
h1 span {display: inline-block;}
h1 span::first-letter {color: red;}
.notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; padding: 8px 16px; border-radius: 4px; font-size: 14px; opacity: 0; transition: opacity 0.3s; z-index: 1000; pointer-events: none; }
@keyframes fadeInOut { 0% { opacity: 0; display: none;} 10% { opacity: 1; display: block;} 90% { opacity: 1; display: block;} 100% { opacity: 0; display: none;} }
#search-box-input:focus {border: 1px solid black; outline: none;}
#search-box-input::placeholder {text-align: center;}
#search-box-input::-webkit-input-placeholder {text-align: center;}
.locationiq-autocomplete-input {border: solid 1px; display: inline-block; font-weight: bold;}
.autocomplete-suggestion-address {border-left: solid 1px; border-right: solid 1px; border-bottom: solid 1px; width: 99%; display: inline-block; cursor: pointer; background-color: #ddd;}
.autocomplete-suggestion-name {border-left: solid 1px; border-right: solid 1px; width: 99%; display: inline-block; font-weight: bold; cursor: pointer; background-color: #ddd;}


.accordion {max-width: 100%; margin: 20px auto; line-height: 1.5; font-family: sans-serif;}
summary h3 {
    margin: 0; /* Removes the default margin from the heading */
    font-size: 18px; /* Sets the font size for your question */
    display: inline; /* To keep the h3 and the arrow on the same line */
  text-align: left;
 padding-left: 0px;
}

details {
    padding: 0px 15px;
    margin: 0;
    background-colour: transparent;
    border-top: none;
    border-radius: 0 0 5px 5px;
    text-align: left;
 padding-left: 20px;
line-height: 1.5;
}

details p{
    padding: 0px 15px;
    margin: 0;
margin-top: -5px;
    background-colour: transparent;
    border-top: none;
    border-radius: 0 0 5px 5px;
    text-align: left;
 padding-left: 28px;
line-height: 1.5;
}


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;  /* hides horizontal scroll */
}


.page h1 {

padding :0px;
}

.pill {
    display: inline-block;
    font-size: 0.8rem;
    letter-spacing: .3px;
    padding: 6px 10px;
    background: rgba(110, 168, 254, 0.12);
     /*color: var(--accent);*/
    border: 1px solid rgba(110, 168, 254, 0.35);
    border-radius: 999px;
    margin-bottom: 14px;
margin-top: 14px;
}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 position: absolute !important;  
  top: 75% !important;             /* vertical center */
  left: 45% !important;            /* move toward right (adjust percentage as needed) */
 
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

@media (max-width: 320px) { 
    .social-share-buttons { gap: 10px; } 
.social-button { width: 33px; height: 33px; } 
.social-button svg { width: 18px; height: 18px; } 
summary h3 {
    margin: 0; /* Removes the default margin from the heading */
    font-size: 16px; /* Sets the font size for your question */
    display: inline; /* To keep the h3 and the arrow on the same line */
  text-align: left;
 padding-left: 0px;
}
details p{
    padding: 0px 15px;
    margin: 0;
margin-top: -5px;
    background-colour: transparent;
    border-top: none;
    border-radius: 0 0 5px 5px;
    text-align: left;
 padding-left: 6px;
line-height: 1.5;
}
.top-row:after { content: ""; display: table; padding: 0%; clear: both; }
.headertitle { background-color: #FFA500; padding-left: auto; padding-bottom: 2px; letter-spacing: -1px; line-height: 10px; font-family: sans-serif, 'Goudy Old Style'; float: none; width: 100%; overflow: hidden; text-align: center; align-items: center; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey; }
.responsive {display: none;clear: both; height: auto;}
h1 { text-align: center; font-size: 24px; padding-left: auto; font-family: 'Bona Nova', serif; line-height: 30px; white-space: nowrap; }
h2 { text-align: center; font-size: 16px; }
h3 { text-align: center; font-size: 15px; }
.block_container { display: flex;  padding: .2% 0 .2% 0; background-color: #333; border-style: solid; border-color: #e63900; font-size: 1rem; border-bottom-width: .3em; border-top-width: 0; border-left-width: 0; border-right-width: 0; box-shadow: 0px 3px 10px 11px grey; -webkit-box-shadow: 0px 3px 10px 11px grey; }
.block_container a { color: white; text-decoration: none; font-size: 1em; }
.block_container a:hover, .block_container a:active { color: #e63900; }
.home-link {margin-right: auto; padding-left: 0rem; font-size: 1rem; text-decoration: none;}
.middle { background-color: #CCCCCC; text-align: center; width: 100%; min-height: 405px; padding-top: 1px; padding-bottom: 1px; -webkit-box-shadow: 0px 14px 10px 10px grey; box-shadow: 0px 14px 10px 10px grey;  overflow: auto; }
.inputform { display: inline-block; background-color: transparent; border-radius: 2px; border: 0px solid black; color: black; padding: auto; padding-top: 10px; text-align: center; width: 230px; height:  auto; margin: 2px; float: center; position: relative; }

#result { text-align: left;  line-height: 1.5; margin-top: 20px; padding: 5px;  margin:5px;  padding-top: 1%;}
table {clear: both; margin: 0px 0% 0px 0%;display: flex; justify-content: center; align-items: center; }
tr,td { margin: 0px 1% 0px 1%; }
.footerbottom { background-color: #333; font-size: 14px; color: silver; text-align: center; width: 100%; padding-top: 25px; padding-bottom: 45px; display: inline-block; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey; }
.footer-line, .footer-line a {font-size: 12px; color: #CCCCCC; display: inline-block; padding-top: 5px; }
 }

/* Base styles for all mobile devices */
@media screen and (min-width: 321px) and (max-width: 767px) {
    .social-share-buttons { gap: 10px; } 
.social-button { width: 36px; height: 36px; } 
.social-button svg { width: 18px; height: 18px; } 

.top-row:after { content: ""; display: table; padding: 0%; clear: both; }
.headertitle { background-color: #FFA500; padding-left: auto; padding-bottom: 2px; letter-spacing: -1px; line-height: 10px; font-family: sans-serif, 'Goudy Old Style', serif; float: none; width: 100%; overflow: hidden; text-align: center; align-items: center; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey; }
.responsive {display: none;clear: both; height: auto;}
h1 { text-align: center; font-size: 32px; padding-left: 0%; font-family: 'Bona Nova', serif; line-height: 30px; white-space: nowrap; }
h2 { text-align: center; font-size: 20px; }
h3 { text-align: center; font-size: 15px; }
.block_container { display: flex;  padding: .2% 0 .2% 0; background-color: #333; border-style: solid; border-color: #e63900; font-size: 1rem; border-bottom-width: .3em; border-top-width: 0; border-left-width: 0; border-right-width: 0; box-shadow: 0px 3px 10px 11px grey; -webkit-box-shadow: 0px 3px 10px 11px grey; }
.block_container a { color: white; text-decoration: none; font-size: 1em; }
.block_container a:hover, .block_container a:active { color: #e63900; }
.home-link {margin-right: auto; padding-left: 1rem; font-size: 1rem; text-decoration: none;}
.middle { background-color: #CCCCCC;  text-align: center; width: 100%; min-height: 405px; padding-top: 1px; padding-bottom: 1px; -webkit-box-shadow: 0px 14px 10px 10px grey; box-shadow: 0px 14px 10px 10px grey;  overflow: auto; margin: 2px; }
.inputform { display: inline-block; background-color: transparent; border-radius: 2px; border: 0px solid black; color: black; padding: auto; padding-top: 10px; text-align: center; width: 230px; height:  auto; margin: 5px; float: left; position: relative; }
#result { text-align: left;  line-height: 1.5;  margin-top: 20px; padding-left: 10px; padding-right: 10px;  padding-right: 2%;    padding-top: 1%;}
table {clear: both; margin: 0px 0% 0px 0%;display: flex; justify-content: center; align-items: center; }
tr,td { margin: 0px 1% 0px 1%; }
.footerbottom { background-color: #333; font-size: 14px; color: silver; text-align: center; width: 100%; padding-top: 25px; padding-bottom: 45px; display: inline-block; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey; }
.footer-line, .footer-line a {font-size: 10px; color: #CCCCCC; display: inline-block;padding-top: 5px;}
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  @media (orientation: portrait) { 
 .top-row:after { padding: 0%; }
  .headertitle { width: 100%; }
 .responsive {display: none;clear: both; height: auto;}
  h1 { text-align: center; font-size: 32px; padding-left: 0%; font-family: 'Bona Nova', serif; line-height: 30px; white-space: nowrap; }
  h2 { text-align: center; font-size: 16px; }
  h3 { text-align: center; }
 .block_container { width: 100%; }
  .block_container a { font-size: 1em; }
.block_container a:hover, .block_container a:active { color: #e63900; }
.home-link {margin-right: auto; padding-left: 1rem; font-size: 1rem; text-decoration: none;}
  .middle { width: 100%; }
  .inputform {  width: 95%; }
  .inputform { padding: 0px; text-align: center; display: inline-block; background-color: transparent; border-radius: 2px; border: 0px solid black; color: black; padding: auto; padding-top: 10px; text-align: center;  margin: 10px; float: center; position: relative; }
#result { text-align: left; line-height: 1.5; margin-top: 20px; padding-left: 10px; padding-right: 10px;  padding-right: 2%;    padding-top: 1%;}
table {clear: both; margin: 0px 0% 0px 0%;display: flex; justify-content: center; align-items: center; }
tr,td { margin: 0px 1% 0px 1%; }
.footerbottom { width: 100%; font-size: 14px; padding-top: 25px; padding-bottom: 50px; }
.footer-line, .footer-line a {font-size: 13px; color: #CCCCCC; display: inline-block;padding-top: 5px;}
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 position: absolute !important;
  top: 60% !important;                /* vertical center */
  left: 60% !important;              /* move toward right (adjust percentage as needed) */
 
}
}

  /* Landscape mode on mobile (width is greater than height) */
  @media (orientation: landscape) {
 .top-row:after { padding: 0%; }
  .headertitle {width: 95%;}
 .responsive {display: none; clear: both;}
 h1 {font-size: 44px;}
 h2 { text-align: center; font-size: 16px; }
 h3 { text-align: center; }
.block_container {width: 95%;}
.block_container a {font-size: 1em;}
.block_container a:hover, .block_container a:active { color: #e63900; }
.home-link {margin-right: auto; padding-left: 1rem; font-size: 1rem; text-decoration: none;}
.middle {width: 95%; padding-top: 1px; padding-bottom: 1px;}
.inputform {border-radius: 20px; border: 0px solid black; color: black; text-align: center; width: 250px; height: 250px;}
#result { text-align: left;  line-height: 1.5;  margin-top: 20px; padding-left: 10px; padding-right: 10px;  padding-right: 2%;    padding-top: 1%;}
table {clear: both; margin: 0px 0% 0px 0%; display: flex; justify-content: center; align-items: center; }
tr,td { margin: 0px 1% 0px 1%; }
.footerbottom {width: 95%;}
.footer-line, .footer-line a {font-size: 13px; color: #CCCCCC; display: inline-block;padding-top: 5px;}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 position: absolute !important;
  top: 60% !important;              /* vertical center */
  left: 60% !important;              /* move toward right (adjust percentage as needed) */
 
}

  }
}


/* Styles for tablets (both portrait and landscape) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.social-share-buttons { gap: 13px; } 
.social-button { width: 44px; height: 44px; } 
.social-button svg { width: 24px; height: 24px; } 

}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Portrait mode on tablets */
  @media (orientation: portrait) {
.top-row:after {padding: 1%;}
.headertitle { width: 100%; background-color: #FFA500; padding-left: auto; padding-bottom: 2px; letter-spacing: -1px; line-height: 10px; font-family: sans-serif, 'Goudy Old Style', serif; float: none; overflow: hidden; text-align: center; align-items: center; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey;}
.responsive {display: none; clear: both;}
h1 {text-align: center; font-size: 3rem;  padding-left: auto; font-family: 'Bona Nova', serif; line-height: 20px; letter-spacing: 0px; white-space: nowrap;}
h2 { font-size: 20px; padding-top: 0; } 
h3 { text-align: center; }
.block_container {display: flex; width: 100%; padding: .2% 0% .2% 0%; background-color: #333; border-style: solid; border-color: #e63900; border-bottom-width: .3em; border-top-width: 0em; border-left-width: 0em; border-right-width: 0em; box-shadow: 0px 3px 10px 11px grey; -webkit-box-shadow: 0px 3px 10px 11px grey;}
.block_container a {color: white; text-decoration: none; font-size: 1rem;}
.block_container a:hover, .block_container a:active { color: #e63900; }
.home-link {margin-right: auto; padding-left: 1rem; font-size: .8rem; text-decoration: none;}
.middle {background-color: #CCCCCC;  text-align: center; width: 100%; min-height: 405px; padding-top: 1px; padding-bottom: 1px; -webkit-box-shadow: 0px 14px 10px 10px grey; box-shadow: 0px 14px 10px 10px grey;}
.inputform {border-radius: 20px; border: 0px solid black; margin: 10px; padding:10px; color: black; text-align: center; width: 230px; height: 250px;}
#result { text-align: left;  line-height: 1.5;  margin-top: 20px; padding-left: auto; padding-right: 10px;  padding-right: 2%;    padding-top: 1%;}
table {clear: both; margin: 0px 0% 0px 0%; display: flex; justify-content: center; align-items: center; }
tr,td { margin: 0px 1% 0px 1%; }
.footerbottom {overflow: hidden; background-color: #333; font-size: 16px; color: silver; text-align: center; width: 100%; padding-top: 30px; padding-bottom: 30px; display: inline-block; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey;}
.footer-line, .footer-line a {font-size: 13px; color: #CCCCCC; display: inline-block;padding-top: 5px;}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 position: absolute !important;
  top: 60% !important;                /* vertical center */
  left: 60% !important;              /* move toward right (adjust percentage as needed) */
 
}
  }

  /* Landscape mode on tablets */
  @media (orientation: landscape) {
body { padding-top: 10px; background: hsl(0, 0%, 97%);   font-family: sans-serif, 'PT Serif', serif;}
.top-row:after {content: ""; display: table; padding: 2px; clear: both;}
.headertitle { width: 95%; background-color: #FFA500; padding-left: 2px; padding-bottom: 2px; letter-spacing: -1px; line-height: 10px; font-family: sans-serif, 'Goudy Old Style', serif; float: none; overflow: hidden; text-align: center; align-items: center; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey;}
.responsive {max-width: 85%; min-width: 200px; height: auto; padding-left: 1%;}
h1 {text-align: center; font-size: 3em; padding-left: 2.5%; font-family: 'Bona Nova', serif; line-height: 20px; letter-spacing: 0px; white-space: nowrap;}
h2 {text-align: center; font-size: 20px;}
h3 {text-align: center; font-size: 15px;}
.block_container {display: flex; width: 95%; padding: .2% 0% .2% 0%; background-color: #333; border-style: solid; border-color: #e63900; border-bottom-width: .3em; border-top-width: 0em; border-left-width: 0em; border-right-width: 0em; box-shadow: 0px 3px 10px 11px grey; -webkit-box-shadow: 0px 3px 10px 11px grey;}
.block_container a {color: white; text-decoration: none; font-size: 1rem;}
.block_container a:hover, .block_container a:active { color: #e63900; }
.home-link {margin-right: auto; padding-left: 1.1rem; font-size: 1.2rem; text-decoration: none;}
.middle {background-color: #CCCCCC;  text-align: center; width: 95%; min-height: 405px; padding-top: 1px; padding-bottom: 1px; -webkit-box-shadow: 0px 14px 10px 10px grey; box-shadow: 0px 14px 10px 10px grey;}
.inputform {display: inline-block; background-color: hsl(0, 0%, 97%); border-radius: 20px; border: 1px solid black; color: black; padding: 30px; padding-top: 10px; text-align: center; width: 240px; height: 250px; margin: 10px; float: left; position: relative;}
#result {text-align: justify;  line-height: 1.5; margin-top: 20px; padding-left: 10px; padding-right: 10px;}
table {margin: 0px 15% 0px 0%;}
tr,td { margin: 0px 1% 0px 1%;}
.footerbottom {overflow: hidden; background-color: #333; font-size: 16px; color: silver; text-align: center; width: 95%; padding-top: 30px; padding-bottom: 30px; display: inline-block; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey;}
.footer-line, .footer-line a {font-size: 14px; color: #CCCCCC; display: inline-block;padding-top: 5px;}
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 position: absolute !important;
  top: 60% !important;                /* vertical center */
  left: 60% !important;              /* move toward right (adjust percentage as needed) */
 
}
  }
}
/* Styles for desktops and larger screens */
@media screen and (min-width: 1025px) {
  
  /* Optional: Specific styles for landscape desktops */
  @media (orientation: landscape) {
body { padding-top: 10px; background: hsl(0, 0%, 97%);   font-family: sans-serif, 'PT Serif', serif;}
.top-row:after {content: ""; display: table; padding: 2px; clear: both;}
.headertitle {background-color: #FFA500; padding-left: 2px; padding-bottom: 2px; letter-spacing: -1px; line-height: 10px; font-family: sans-serif, 'Goudy Old Style', serif; float: none; width: 85%; overflow: hidden; text-align: center; align-items: center; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey;}
.responsive {max-width: 85%; min-width: 200px; height: auto; padding-left: 1%;}
h1 {text-align: center; font-size: 3.5em; padding-left: 5%; font-family: 'Bona Nova', serif; line-height: 30px; letter-spacing: 0px; white-space: nowrap;}
h2 {text-align: center; font-size: 20px;}
h3 {text-align: center; font-size: 15px;}
.block_container {display: flex; width: 85%; padding: .2% 0% .2% 0%; background-color: #333; border-style: solid; border-color: #e63900;  border-bottom-width: .3em; border-top-width: 0em; border-left-width: 0em; border-right-width: 0em; box-shadow: 0px 3px 10px 11px grey; -webkit-box-shadow: 0px 3px 10px 11px grey;}
.block_container a {color: white; text-decoration: none; font-size: 1.3rem;}
.block_container a:hover, .block_container a:active { color: #e63900; }
.home-link {margin-right: auto; padding-left: 1.1rem; font-size: 1.5rem; text-decoration: none;}
.middle {background-color: #CCCCCC; text-align: center; width: 85%; min-height: 405px; padding-top: 1px; padding-bottom: 1px; -webkit-box-shadow: 0px 14px 10px 10px grey; box-shadow: 0px 14px 10px 10px grey;}
.inputform {display: inline-block; background-color: hsl(0, 0%, 97%); border-radius: 20px; border: 1px solid black; color: black; padding: 30px; padding-top: 10px; text-align: center; width: 240px; height: 250px; margin: 10px; float: left; position: relative;}
table {margin: 0px 15% 0px 0%;}
tr,td { margin: 0px 1% 0px 1%;}
#result {text-align: justify; line-height: 1.5;  margin-top: 20px; padding-left: 10px; padding-right: 10px;}
.footerbottom {overflow: hidden; background-color: #333; font-size: 16px; color: silver; text-align: center; width: 85%; padding-top: 30px; padding-bottom: 30px; display: inline-block; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey;}
.footer-line, .footer-line a {font-size: 16px; color: #CCCCCC; display: inline-block;padding-top: 5px;}

.social-share-buttons { gap: 13px; } 
.social-button { width: 44px; height: 44px; } 
.social-button svg { width: 24px; height: 24px; } 
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 position: absolute !important;
  top: 60% !important;                /* vertical center */
  left: 60% !important;              /* move toward right (adjust percentage as needed) */
 
}

    }

  /* Optional: Specific styles for portrait desktops */
  @media (orientation: portrait) {
body { padding-top: 10px; background: hsl(0, 0%, 97%);   font-family: sans-serif, 'PT Serif', serif;}
.top-row:after {content: ""; display: table; padding: 2px; clear: both;}
.headertitle {background-color: #FFA500; padding-left: 2px; padding-bottom: 2px; letter-spacing: -1px; line-height: 10px; font-family: sans-serif, 'Goudy Old Style', serif; float: none; width: 85%; overflow: hidden; text-align: center; align-items: center; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey;}
.responsive {max-width: 85%; min-width: 200px; height: auto; padding-left: 1%;}
h1 {text-align: center; font-size: 3.5rem !important; padding-left: 2.5%; font-family: 'Bona Nova', serif; line-height: 30px; letter-spacing: 0px; white-space: nowrap;}
h2 {text-align: center; font-size: 20px;}
h3 {text-align: center; font-size: 15px;}
.block_container {display: flex; width: 85%; padding: .2% 0% .2% 0%; background-color: #333; border-style: solid; border-color: #e63900;  border-bottom-width: .3em; border-top-width: 0em; border-left-width: 0em; border-right-width: 0em; box-shadow: 0px 3px 10px 11px grey; -webkit-box-shadow: 0px 3px 10px 11px grey;}
.block_container a {color: white; text-decoration: none; font-size: 1.3rem;}
.block_container a:hover {color: #e63900;}
.block_container a:active {color: #e63900;}
.home-link {margin-right: auto; padding-left: 1.1rem; font-size: 1.5rem; text-decoration: none;}
.middle {background-color: #CCCCCC;  text-align: center; width: 85%; min-height: 405px; padding-top: 1px; padding-bottom: 1px; -webkit-box-shadow: 0px 14px 10px 10px grey; box-shadow: 0px 14px 10px 10px grey;}
.inputform {display: inline-block; background-color: hsl(0, 0%, 97%); border-radius: 20px; border: 1px solid black; color: black; padding: 30px; padding-top: 10px; text-align: center; width: 240px; height: 250px; margin: 10px; float: left; position: relative;}
table {margin: 0px 15% 0px 0%;}
tr,td { margin: 0px 1% 0px 1%;}
#result {text-align: justify; line-height: 1.5;  margin-top: 20px; padding-left: 10px; padding-right: 10px;}
.footerbottom {overflow: hidden; background-color: #333; font-size: 16px; color: silver; text-align: center; width: 85%; padding-top: 30px; padding-bottom: 30px; display: inline-block; box-shadow: 0px 1px 10px 10px grey; -webkit-box-shadow: 0px 1px 10px 10px grey;}
.footer-line, .footer-line a {font-size: 16px; color: #CCCCCC; display: inline-block;padding-top: 5px;}

.social-share-buttons { gap: 13px; } 
.social-button { width: 44px; height: 44px; } 
.social-button svg { width: 24px; height: 24px; } 

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
 position: absolute !important;
  top: 60% !important;                /* vertical center */
  left: 60% !important;              /* move toward right (adjust percentage as needed) */
 
}
    }
  }