/* Temporary Testing Style Sheet */

/* Global styles */
body {
    font-family: Verdana, Arial, sans-serif;
    padding: 0;
    color: white; /* Set body color to white */
}

/* headline styles - experiment with colors later*/

h1 {
    font-size: 34px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: center;
    margin-bottom: 0.5em;
   color: #a52a2a; /* saddle brown */
}

h2 {
    font-size: 30px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    margin-bottom: 0.5em;
   color: #a52a2a; /* saddle brown */
}

h3 {
    font-size: 24px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: center;
    margin-bottom: 0.5em;
    color: #a52a2a; /* saddle brown */
}

h4 {
    font-size: 24px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
     margin-bottom: 0; /* change to 0.2em (for example) if want a small gap */
    color: #a52a2a; /* saddle brown */
}

h4 + p {
  margin-top: 0.20em;
}

p {
    margin-bottom: 1em; /* Adjust this value as needed */
}


/* Styles for links */
a {
    color: #00a300; /* dark green */
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
}

/* Styles for visited links */
    a:visited {
    color: #00a300; /* dark green */
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;

}

/* Styles for hover effects */
a:hover {
    color: #ff0000; /* red */
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
}

/* Styles for active links */
a:active {
    color: #00a300; /* dark green */
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
}

a.big-link {
  font-size: 1.3em;      /* +50% relative to normal links */
  color:  #00a300; /* dark green, can override color if needed */
  font-weight: normal;      /* optional if same as base link */
}

a.big-link:hover {
  font-size: 1.3em;      /* +50% relative to normal links */
  color: #ff0000; /* red, can override color if needed */
  font-weight: normal;      /* optional if same as base link */
}

img {
  max-width: 100%;
  height: auto;
}


/* Classes */
/* (a) main paragraph styles */

.social-links {
    text-align: center !important; /* Ensures centering */
    margin-top: 20px;
    color: #333333; /* very dark gray, less harsh than black */
    font-size: 16px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
}

.social-links a {
    display: inline-block; /* Helps with alignment */
}

.ordinary {
    color: #333333; /* very dark gray, less harsh than black */
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    padding: 0px;
}


.ordinary20px {
    color: #333333; /* very dark gray, less harsh than black */
    width: 100%;
    font-size: 20px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    padding: 0px;
 }


.pagemenu {
    width: 90%;
    background-color: #eaffea; /* very pale green, (oddly called tint of 'blue romance') */
             /* used to be background-color: #b1d27b;  pale olive green */
    font-size: 16px;
    text-align: left;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #a52a2a;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 120, 0, 0.8);
}

.blogmain {
   max-width: 900px;
   margin: 2rem auto;
   padding: 20px;
   background-color: #ffffcc;
   border-color: black;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


.middleset {
    color: #333333; /* very dark gray, less harsh than black */
    font-size: 16px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: center;
    padding 10px;
 }


.reportage {
    color: #333333; /* very dark gray, less harsh than black */
    width: 90%; 
    background-color:#fcf2ef; /* very pale peach color */
    font-size: 16px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    font-style: italic;
    text-align: left;
    padding:10px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #a52a2a;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(160, 32, 240, 0.3);
}



.inset-100 {
    color: #333333; /* very dark gray, less harsh than black */
    font-size: 16px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    padding-left: 50px;
    margin-left: 0px; /* possibly want to change to set left-margin indent */
}

.note {
    color: #333333; /* very dark gray, use for footnote, exception or clarification */
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    background-color: #ffffff; /* white */
    padding: 0px;
    
}

/* (b) styles mostly to control tables */

.lime-90 {
    width: 90%; /* use for booking information and similar */
    background-color: #eaffea;
    border: 5px solid;
    border-color: #880000;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

}
 
.lemon-90 {
    width: 90%; /* use for payment information and similar */
    background-color: #ffffcc; /* pale lemon */
    border: 0px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

}

.lime-65 {
    width: 65%; /* add usage comment */
    background-color: #eaffea;
    border: 5px solid;
    border-color: #013220; /* dark green */
    padding: 10px;
}

.lime-98 {
    width: 98%; /* use for donate area */
    background-color: #eaffea;
    border: 5px solid;
    border-color: #013220; /* dark green */
    padding: 10px;
}

/* use for table nested in another table that has a solid color */
.white-98 {  
    width: 98%; 
    background-color: #ffffff; /* white */
    border: 1px solid #a52a2a;
    text-align: center;
    padding-left: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}


.rounded {
    width: 90%;
    color: #333333; /* very dark gray, less harsh than black */
    font-size: 16px;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    border: 1px solid #a52a2a;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.blank-space {
    height: 100em; /* Adjust the height as needed */
    background-color: inherit;
}


/* CSS properties to customize the button */

/* Button size */
.submit-button {
  padding: 20px 40px; /* Adjust padding as needed */
  font-size: 25px; /* Adjust font size as needed */
  border-radius: 10px;

}

/* Button colors */
.submit-button {
  background-color: #4CAF50; /* Green */
  color: white;
  border: 1px solid #a52a2a;
}

/* Hover effect */
.submit-button:hover {
  background-color: #45a049; /* Darker green */
}


.package-button-light {
  width: 250px;
  height: 150px;
  background-color: #ece6ff; /* pastel purple */
  color: black;
  border: 2px solid #a52a2a;
  border-radius: 10px;
  padding: 20px 40px;
  font-size: 25px;
  margin: 10px;
}  
/* Hover effect */
.package-button-light:hover {
  background-color: #fefabc; /* pale lemon */
}

.package-button-medium {
  width: 250px;
  height: 150px;
  background-color: #e0f3f7; /* pastel blue */
  color: black;
  border: 2px solid #a52a2a;
  border-radius: 10px;
  padding: 20px 40px;
  font-size: 25px;
  margin: 10px;
}  
/* Hover effect */
.package-button-medium:hover {
  background-color: #fefabc; /* pale lemon */
}

.package-button-full {
  width: 250px;
  height: 150px;
  background-color: #ddf2d1; /* pastel green */
  color: black;
  border: 2px solid #a52a2a;
  border-radius: 10px;
  padding: 20px 40px;
  font-size: 25px;
  margin: 10px;
}  
/* Hover effect */
.package-button-full:hover {
  background-color: #fefabc; /* pale lemon */
}  

.light-head {
  width: 90%; /* Adjust width as needed */
  height: 150px; /* Adjust height as needed */
  border: 2px solid #a52a2a;
  border-radius: 10px;
  background-color: #ece6ff; /* pastel purple */
  color: black;
  font-size: 18px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto; /* center text horizontally */
  margin-top: 10px;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Hover effect */
.light-head:hover {
  background-color: #fefabc; /* pale lemon */
}  

.medium-head {
  width: 90%; /* Adjust width as needed */
  height: 150px; /* Adjust height as needed */
  border: 2px solid #a52a2a;
  border-radius: 10px;
  background-color: #e0f3f7; /* pastel blue */
  color: black;
  font-size: 18px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto; /* center text horizontally */
  margin-top: 10px;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Hover effect */
.medium-head:hover {
  background-color: #fefabc; /* pale lemon */
}  


.full-head {
  width: 90%; /* Adjust width as needed */
  height: 150px; /* Adjust height as needed */
  border: 2px solid #a52a2a;
  border-radius: 10px;
  background-color: #ddf2d1; /* pastel green */
  color: black;
  font-size: 18px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto; /* center text horizontally */
  margin-top: 10px;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Hover effect */
.full-head:hover {
  background-color: #fefabc; /* pale lemon */
}  


/* Experimental styles for tall column headings */
.light-columnar {
  width: 70px; /* Adjust width as needed */
  height: 150px; /* Adjust height as needed */
  border: 2px solid #a52a2a;
  border-radius: 10px;
  background-color: #ece6ff; /* pastel purple */
  color: black;
  font-size: 18px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto; /* center text horizontally */
  margin-top: 10px;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Hover effect */
.light-columnar:hover {
  background-color: #fefabc; /* pale lemon */
}  

.medium-columnar {
  width: 70px; /* Adjust width as needed */
  height: 150px; /* Adjust height as needed */
  border: 2px solid #a52a2a;
  border-radius: 10px;
  background-color: #e0f3f7; /* pastel blue */
  color: black;
  font-size: 18px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto; /* center text horizontally */
  margin-top: 10px;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Hover effect */
.medium-columnar:hover {
  background-color: #fefabc; /* pale lemon */
}  


.full-columnar {
  width: 70px; /* Adjust width as needed */
  height: 150px; /* Adjust height as needed */
  border: 2px solid #a52a2a;
  border-radius: 10px;
  background-color: #ddf2d1; /* pastel green */
  color: black;
  font-size: 18px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto; /* center text horizontally */
  margin-top: 10px;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Hover effect */
.full-columnar:hover {
  background-color: #fefabc; /* pale lemon */
}  


/* End of Experimental styles for tall column headings */

.middle-it {
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #a52a2a;
  border-radius: 5px;
  background-color:#fcf4ee; /* very pale peach */
}


.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.midi {
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
 }

.ment-tall {
  background-color: #ece6ff; /* pastel purple */
}

.stan-tall {
  background-color: #e0f3f7; /* pastel blue */
}    
    
 .ment-tall {
  background-color: #ddf2d1; /* pastel green */  
}