/* start framework css here*/ 





 body {
            /* background: url('images/043.jpg') no-repeat center center fixed;*/ /* Winter picture */
			background: url('images/sp0000.jpg') no-repeat center center fixed;/* Spring picture */
			/* background: url('images/043.jpg') no-repeat center center fixed;*/ /* Summer picture */
			/* background: url('images/043.jpg') no-repeat center center fixed;*/ /* Fall picture */
            background-size: cover;
			font-family: Arial, sans-serif;
        }
			/* sidebar for members section*/
/* Sidebar styles */
.sidebar {
    position: fixed!important;            /* Fix the sidebar to the left side */
    top: 0 !important;                    /* Align the sidebar at the top of the page */
    left: 0 !important;                   /* Align the sidebar to the left side of the page */
    width: 20vw !important;               /* Set the sidebar width to 20% of the viewport */
    height: 100vh !important;             /* Set the height of the sidebar to full viewport height */
    background-color: #333 !important;    /* Dark background for sidebar */
    padding-top: 1.25rem !important;         /* Add some top padding */
    z-index: 1000 !important;             /* Ensure sidebar is on top of the content */
    color: white !important;              /* Text color inside the sidebar */
    display: flex !important;
    flex-direction: column !important;
	border: 0.1875rem solid #000 !important;    /* Make sure the links are stacked vertically */
}

.sidebar a {
    display: block;            /* Make the links take up the full width */
    padding: 0.9375rem;             /* Add padding to the links */
    text-decoration: none;     /* Remove underlines from links */
    color: white;              /* Text color */
    font-size: 1.125rem;           /* Font size for links */
}

.sidebar a:hover {
    background-color: #575757; /* Change the background color when hovering */
}
strong {
    font-weight: bold !important;  /* Ensures the text is bold */
    color: #000;  /* Custom color (change to fit your site's color scheme) */
    font-size: 1.25rem;
}

 .content-container {
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.625rem;
    max-width: 80%;
    margin: 0 auto;
    z-index: 4;
}
 
nav {
    background-color: #808080;
    padding: 0.625rem;
    display: flex;
    justify-content: center; /* Centers the navbar content */
    border: 0.125rem solid #000;
    width: 98%;
    max-width: 98%;
}

nav a {
    color: white;
    margin: 0 0.625rem; /* Add horizontal margin for spacing */
    font-size: 1.125rem;
    text-align: center; /* Center the text inside each link */
}

nav a:hover {
    color: #f0b74e;
}

/* Mobile responsiveness */
@media (max-width: 48rem) {
    nav {
        flex-direction: row; /* Stack links vertically on small screens */
        width: 89%; /* Ensure the navbar takes the full width on mobile */
    }

    nav a {
        margin: 0.625rem 0; /* Vertical spacing for stacked links */
        font-size: 1rem; /* Adjust font size for smaller screens */
    }
}


        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #444;
            min-width: 10rem;
            z-index: 1;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: white;
            padding: 0.625rem 0.9375rem;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #575757;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .main-content {
            padding: 1.25rem;
            background-color: transparent;
			border: 0.1875rem solid #333;
        }
		 .calendar-iframe {
        width: 79vw;
        height: 90vh; /* Adjust as needed */
        border: 0;
			
    }

        .section-title {
            font-size: 2rem;
            margin-bottom: 0.625rem;
            text-align: center;
            color: #000000;
        }

        .image-container {
            display: flex;
            align-items: center;
			 margin-bottom: 1.25rem;
			 max-width: 100%;
        }
		.map-image-container {
            background-color: transparent;
            padding: 1.25rem;
            border-radius: 0.5rem;
            max-width: 50rem;
            margin: 1.25rem auto;
            text-align: center;
        }

        .map-image-container img {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
        }

        .section-title {
            font-size: 2em;
            font-weight: bold;
            text-align: center;
            margin-bottom: 1.25rem;
        }

/*         p {
            font-size: 1.125rem;
            line-height: 1.6;
            font-weight: bold;
            text-align: center;
            max-width: 70%;
            margin: 0 auto;
            padding: 0.625rem;
        } */



.footer {
            background-color: #808080;
            color: white;
            padding: 0.625rem;
            text-align: center;
            width: 97%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
			border: 0.125rem solid #000;
			font-size: 0.875rem;
		/*margin-left: 8.0625rem;*/
        }

        .footer a {
            color: #ffa500;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }
		.copyright {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0.625rem;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: semi-transparent background */
    color: white; /* Adjust text color */
    font-size: 0.875rem; /* Adjust text size */
}

.copyright a {
    color: #fff; /* Adjust the link color */
    text-decoration: none;
}

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

.login-container {
    text-align: right;
    margin: 0.625rem 1.25rem 0 0;
}
.login-container1 {
    text-align: center;
    margin: 0.625rem 1.25rem 0 0;
}
.login-button {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0); /* Fully transparent white */
    color: black;
    padding: 0.625rem 1.25rem;
    border-radius: 0.3125rem;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #f0b74e;
    color: black;
}
h1 {
	  text-align: center;
	  font-size: 1.5rem;
	  
}
h2 {
	  text-align: center;
	  font-size: 1.5rem;
}
h3 {
    text-align: center;
    font-size: 1.5rem;

}

h4 {
	text-align: center;
	font-size: 1.5rem;
}

ul {
    /*list-style-type: none;
    padding-left: 0;
    margin: 0 auto;
    text-align: left;
    display: block;
    width: 90%; */
    word-wrap: break-word;
}

/* Style for list items under each section */
 ul li {
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
    padding-left: 2.5rem; /* Space for the bullet point */
   text-indent: -2.5rem; /* Pull the wrapped text to align with the first line */
    padding-left: 3.75rem; /* Indent the wrapped lines to align them properly */
    white-space: normal;
    width: 100%;
	text-align: left;

} 








/*Start individual page css here. list each page name above that pages css. 
this way future editors know what you did */

#homepagemain {

    font-family: Arial, sans-serif;
    flex: 1; /* Makes the text section take up more space */
    padding: 0.1875rem;
}

/* Styling for the paragraph text */
#homepagemain p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #000;
	padding: 0.1875rem;
}
/* Style for the homepage images container */
.homepageimages {
    display: flex;
    flex-direction: column; /* Ensures image and text are stacked vertically */
    align-items: center; /* Centers the content */
    justify-content: center;
    text-align: center; /* Centers text */
}

/* Style for the homepage image container */
.homepageimage-container {
    max-width: 100vw;
    width: 100%; /* Ensure the image doesn't overflow */
    margin-bottom: 1.25rem; /* Add some space below the image */
}

/* Style for the image */
.homepageimage-container img {
    width: 30%; /* Make the image responsive */
    max-width: 100%; /* Max width for the image */
    height: auto;
    border-radius: 0.625rem; /* Optional: Rounded corners for the image */
}

/* Style for the Homepage text container */
.Homepage {
    font-family: Arial, sans-serif;
    max-width: 100%;
    margin: 0 auto; /* Center the text */
	text-align: center;
    padding: 0rem;
    background-color: #ffffff; /* White background */
   /* border-radius: 0.3125rem; /* Optional: Rounded corners for the text box */
    /*box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
    /*line-height: 1.6;
	Border: 0.125rem solid #000;*/
}

/* Add some specific styling for the paragraph */
.Homepage p {
    font-size: 1.25rem; /* Set a readable font size */
    color: #333; /* Dark text for better readability */
    text-indent: 0rem; /* Indent the paragraph for a cleaner look */
    margin: 0 auto;
}

/* Optional: Add a hover effect for the image */
.homepageimage-container img:hover {
    transform: scale(1.75); /* Slightly zoom in the image on hover */
    transition: transform 0.3s ease-in-out;
}
/* Main content layout with flexbox */
.main-content {
    display: flex; /* Enable flexbox layout */
    align-items: center; /* Aligns items vertically in the center */
    justify-content: space-between; /* Ensures space between the image and text */
    gap: 0.125rem; /* Adds space between the image and the text */
    padding: 0.25rem;
    flex-direction: column; /* Stacks the image and text vertically */
}

/* Style for the image section (homeimage) */
.homeimage {
    display: flex; /* Use flex to center the image */
    justify-content: center; /* Horizontally center the image */
    align-items: center; /* Vertically center the image */
    flex: 1; /* Makes the image section flexible */
}

.homeimage img {
    width: 40%; /* Makes the image responsive */
    max-width: 100%; /* Limits the maximum width of the image */
    height: auto; /* Keeps the aspect ratio intact */
    border-radius: 0.625rem; /* Optional: Rounded corners for the image */
	align-items: center;
	
}

/* Style for the text section (homecontent) */
.homecontent {
    text-align: center; /* Centers the text */
    font-size: 1rem; /* Default font size for text */
    max-width: 100%; /* Ensures the text takes up the full width */
}
/*Image Credit below images*/

.image-credit figcaption {
  font-size: 0.875rem;
  text-align: center;
  color: #777;
  margin-top: 0.625rem;
  align-items: center;
}


/*    */


.indent-first-line {
    display: inline-block;
    text-indent: 1.25rem; /* Indent the first sentence */
    padding-left: 1.25rem; /* Indent the first sentence */
}




.container {
    margin-bottom: 1.25rem;
}
.container1 {
	border: 0.1875rem solid #000;
	Background-color: #fff;
}
     .container1 .intro p,
.container1 .bylaws-section p,
.container1 .rules-section p {
    text-align: center; /* Optional: adjust text alignment */
	font-size: 1.375rem;
}  

/* Ensuring the bullets are back for the lists within the container1 */
.container1 ul {
     list-style-type: disc;
    padding-left: 0;
    margin: 0 auto;
    text-align: left;
    display: block;
    width: 90%;
    word-wrap: break-word;
}

/* Styling list items */
.container1 ul li {
    margin-bottom: 0.5rem; /* Adds space between list items */
}

/* Styling the first-line indentation for paragraphs */
.container1 .indent-first-line {
    text-indent: 1.875rem; /* Indentation for the first line */
}

/* Optional: Styling for buttons */

.container1 .button-container a {
    padding: 0.625rem 1.25rem;
    background-color: #007BFF; /* Blue background */
    color: white;
    text-decoration: none;
    border-radius: 0.3125rem;
}
.news-updates {
  max-width: 62.5rem;
  margin: 1.25rem auto;
  padding: 1.25rem;
  background-color: #f9f9f9;
  border-radius: 0.75rem;
  box-shadow: 0 0 0.625rem rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}

.news-updates h2 {
  text-align: center;
  margin-bottom: 1.25rem;
  color: #2E7D32;
}

.updates-container {
  display: flex;
  flex-direction: column; /* ✅ NEW */
  gap: 1.25rem;
  max-height: 31.25rem;
  overflow-y: auto;
  padding-right: 0.625rem;
} 

.update-post {
  background: #fff;
  padding: 0.9375rem 1.25rem;
  border-left: 0.25rem solid #4CAF50;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.05);
}
.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2.5rem 0;
  width: 100%;
}

.signup-button {
  padding: 0.875rem 1.75rem;
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  font-family: 'Segoe UI', sans-serif;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.2);
  transition: all 0.25s ease-in-out;
}

.signup-button:hover {
  background: linear-gradient(135deg, #66BB6A, #388E3C);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 0.9375rem rgba(0, 0, 0, 0.25);
}
/* Architectural */

.Architectural {
    padding: 0.9375rem;
    background-color: #f2f2f2;
    border: 0.125rem solid #000;
}

.Architectural ul {
    list-style-type: disc;
 
}
/*A-Frame Page*/
.aframeimage-container {
    display: flex;
    justify-content: center;          /* Centers the content horizontally */
    align-items: center;              /* Centers the content vertically */
    margin: 0 auto;                   /* Centers the container itself */
    margin-bottom: 1rem;
    max-width: 40vw;                 /* Maximum width */
    width: 40vw;
	height: auto;	/* Ensure it takes full available width */
    box-sizing: border-box;           /* Prevents padding from affecting total width */
}
.aframeimage-container img {
    width: 125%;        /* Makes the image fill the container’s width */
    height: auto;       /* Maintains aspect ratio */
    max-width: 125%;    /* Ensures it doesn’t overflow the container */
    display: block;     /* Removes inline spacing below image */
}

/* Adult Lounge Page */

.Overview {
    font-size: 1.25rem;
    line-height: 1.6;
    width: 100%; /* Use full width */
    max-width: 62.5rem; /* Ensure max width is set */
    margin: 1.25rem auto; /* Center it */
    padding: 1.25rem; /* Padding inside the box */
    box-sizing: border-box; /* Ensure padding and border don't add to width */
    background-color: #f5f5f5; 
    border: 0.1875rem solid #000; 
}
.adult-lounge-committee {
    font-size: 1.25rem; /* Adjust the size as needed */
    line-height: 1.6; /* Adjust line height if necessary */
    Background-color: #f5f5f5;
    border: 0.1875rem solid #000;
    width: 90%;
}

.Activities-Events {
    width: 100%;
    border-collapse: collapse;
	margin-top: 1.25rem;
}

.Activities-Events th, .Activities-Events td {
    border: 0.125rem solid #000000;
    padding: 0.625rem;
    text-align: center;
}

.Activities-Events th {
    background-color: #f4f4f4;
}

		.committee-container {
    text-align: center;
}


.committees {
    border: 0.1875rem solid #000;
    padding: 1.25rem;
    margin: 1.25rem auto;
    max-width: 50rem; /* Adjust to control width of the container */
    background-color: white;
    font-size: 1.25rem; /* Text size for the container */
    box-sizing: border-box;
    border-radius: 0.625rem; /* Optional for rounded corners */

}

.committees p, .committees ul {
    margin-bottom: 1.25rem;
}
/* Athletic Fields Page */

.baseball-field, .basketball-court, .bocce-court, .horseshoe-pits, .miniature-golf-course, .tennis-courts, .volleyball-court {
            border: 0rem solid #000; /* Adjust border color */
            padding: 1.25rem; /* Adds more space between the text and the border */
            margin: 1.25rem 0; /* Adds more space between the text blocks */
            background-color:  rgba(255, 255, 255, 0.9); /* Optional background color */
            width: 100%; /* Ensures the boxes expand to the full width of the container */
            box-sizing: border-box; /* Ensures padding and border are included in width */
            min-height: 9.375rem; /* Ensures the box has enough height for smaller content */
            overflow: auto; /* Prevents overflow issues with larger content */
        }
		/*Audit page*/
		
		.Audit {
    max-width: 50rem;
    margin: 1.25rem auto;
    padding: 1.25rem;
    background-color: rgba(255, 255, 255, 0.9);
    border: 0.1875rem solid #000; /* Adjust the color as needed */
    border-radius: 0.625rem; /* Optional: Rounded corners */
    color: #333;
}
.Audit and Budget {
    border: 0rem solid #000;
    padding: 1.25rem;
    margin: 1.25rem auto;
    max-width: 50rem; /* Adjust to control width of the container */
    background-color: transparent;
    font-size: 1.25rem; /* Text size for the container */
    box-sizing: border-box;
    border-radius: 0.625rem; /* Optional for rounded corners */
}

.Audit and Budget p, .Audit and Budget ul {
    margin-bottom: 1.25rem;
}
 .responsibilities {
            max-width: 50rem;
            margin: 1.25rem auto;
            padding: 1.25rem;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 0.625rem;
            color: #333;
	    border: 0.1875rem solid #000;
        }

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

        .responsibilities ul li {
            margin-bottom: 0.9375rem;
        }

        .responsibilities ul li strong {
            color: #000;
        }

        .responsibilities p {
            margin-top: 1.25rem;
        }
		 .Fields {
            max-width: 56.25rem;
            margin: 1.25rem auto;
            padding: 1.25rem;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 0.0625rem;
            color: #333;
			border: 0.0625rem solid #000;
		    overflow-wrap: break-word;
			text-align: center;
			font-size: 1.375rem;
        }
		.Field1 {
            max-width: 56.25rem;
            margin: 1.25rem auto;
            padding: 1.25rem;
            background-color: transparent;
            border-radius: 0.0625rem;
            color: #000;
		    overflow-wrap: break-word;	
			align-content: center;
			text-align: center;
			font-size: 1.375rem;
        }
		
		/* board of directors page */
		
		.board-of-directors {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 1.25rem; /* Add spacing between tables */
}

/* Styles for table cells */
.board-of-directors td {
    padding: 0.625rem;
    border: 0.25rem solid #000;
}

/* Styles for images */
.board-of-directors img {
    width: 9.375rem; /* Adjust size as needed */
    height: 9.375rem; /* Adjust size as needed */
    display: block;
    margin: 0 auto;
}

.button-container {
    margin-top: 1.25rem; /* Add spacing above the button */
}

/* bylaws and rules page */

.bylaws-button {
    display: inline-block;
    background-color: #5a3d1a; /* Rich brown color for the button */
    color: #fff; /* White text color */
    text-decoration: none; /* Remove underline */
    font-size: 2rem; /* Button text size */
    padding: 0.625rem 1.25rem; /* Button padding */
    border-radius: 0.3125rem; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    text-align: center; /* Center the text within the button */
    margin: 0 auto; /* Center the button horizontally */
    display: block; /* Make the button a block-level element so margin auto works */
    width: 11.25rem; /* Set width */
}

/*Rules-button*/

.bylaws-button:hover {
    background-color: #3d2912; /* Darker brown for hover effect */
}

.Rules-button {
    display: inline-block;
    background-color: #5a3d1a; /* Rich brown color for the button */
    color: #fff; /* White text color */
    text-decoration: none; /* Remove underline */
    font-size: 2rem; /* Button text size */
    padding: 0.625rem 1.25rem; /* Button padding */
    border-radius: 0.3125rem; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    text-align: center; /* Center the text within the button */
    margin: 0 auto; /* Center the button horizontally */
    display: block; /* Make the button a block-level element so margin auto works */
    width: 11.25rem; /* Set width */
	Margin-bottom: 1.25rem;
}


.Rules-button:hover {
    background-color: #3d2912; /* Darker brown for hover effect */
}
/* camp store */

.store-hours-container {
    background-color: #FAEBD7;
    /*padding: 1.25rem;*/
    border: 0.1875rem solid #000;
    border-radius: 0.5rem;
    width: 18.75rem;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: #333;
	margin-top: 1.25rem; 
	
}
/* this is for the menu button on the page */
.store-hours-containers {
    background-color: #transparent;
    /*padding: 1.25rem;*/
    border: 0rem solid #000;
    border-radius: 0.5rem;
    width: 18.75rem;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: #333;
	margin-top: 1.25rem; 
	align-items: center;
	
}

.store-hours {
    text-align: center;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
}

.store-contact {
    justify-content: space-between;
    align-items: center;
}

.store-phone {
	display: flex;
    font-size: 1.125rem;
    font-weight: bold;
    margin: 0;
}

.menu-button {
    background-color: #007bff;
	border: 0.1875rem solid #000;
    color: #fff;
    text-decoration: none;
	margin-left: 6.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 1.5rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
	align-items: center;
}

.menu-button:hover {
    background-color: #0056b3;
}
/* camp bathhouse page */

#bathhouse-status table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem; /* Adds space between the tables */
}

/* Styling for table cells (th and td) within the bathhouse-status table */
#bathhouse-status th, #bathhouse-status td {
    border: 0.1875rem solid #000000;
    padding: 0.625rem;
    text-align: center;
	font-weight: bold;
	font-size: 1.25rem;
}

/* Styling for the header cells (th) */
#bathhouse-status th {
    background-color: #f4f4f4;
    font-weight: bold; /* Makes the header text bold */
}

/* Specific styling for the "open" class cells */
#bathhouse-status .open {
    background-color: #4CAF50; /* Green background for open */
    color: white; /* White text */
}

/* Specific styling for the "closed" class cells */
#bathhouse-status .closed {
    background-color: #f44336; /* Red background for closed */
    color: white; /* White text */
}
.images h2 {
    text-align: center;
}
.comfort-stations {
    border: 0.125rem solid #000;
    padding: 0.9375rem;
    background-color: #f9f9f9;
}

.comfort-stations ul {
    list-style-type: disc;
    padding-left: 1.25rem;
}
/* /committee page */

.committee-intro {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 1.25rem auto;
    align-items: center;
	font-weight: bold;
    color: #333;
    background-color: #ddd;
    border: 0.1875rem solid #000;
    width: 80%;
}

.committee-intro p {
    text-indent: 1.25rem;
    margin-bottom: 0.9375rem;
}
/* Container for the table */
.committee-container {
    width: 80%;                 /* Adjust container width */
    max-width: 75rem;          /* Prevent the container from becoming too wide */
    margin: 0 auto;             /* This centers the container horizontally */
    padding: 1.25rem;              /* Optional: Add padding inside the container */
    text-align: center;         /* Center text inside the container */
}

/* Style for the table inside the container */
.committee-table {
    width: 100%;                /* Make the table take up 100% of the container width */
    border-collapse: collapse;  /* Removes space between table borders */
    background-color: #f9f9f9;  /* Light background for the table */
    margin-top: 1.25rem;           /* Adds space above the table */
}

/* Add borders and spacing to table cells */
.committee-table th, td {
    border: 0.1875rem solid #000;     /* Black border for table cells */
    padding: 0.625rem;              /* Add padding inside cells */
    text-align: center;         /* Center text inside the table cells */
    font-weight: bold;          /* Bold text for table headers */
    background-color: #f9f9f9; /* Light background for the cells */
}

/* Hover effect for rows */
.committee-table tr:hover td {
    background-color: #f0f0f0;  /* Light background when hovering over rows */
}

/* Style for the header row */
.committee-table th {
    background-color: #f5deb3;  /* Light parchment color for headers */
    font-size: 1.25rem;             /* Font size for header text */
}
/* Committee page */
.address-box {
    margin-top: 1.25rem;
    padding: 0.9375rem;
    background-color: #ffffff;
    border: 0.1875rem solid #000;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
	width: 37.5rem;
	margin-left: 18.75rem;
}

.address-box p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
	text-align: center;
}

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

.address-box a:hover {
    text-decoration: underline;
/* Style for the Emergency-Table */
    padding: 1.25rem;                  /* Padding around the content */
    border-radius: 0.5rem;             /* Rounded corners */
    box-shadow: 0rem 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* Subtle shadow for effect */
    margin-bottom: 1.25rem;            /* Space below the section */
}
/* Emergency Services Page */
/* Styling the title inside Emergency Services */
#emergency-services h2 {
    color: #d9534f;                /* Red color for the title */
    font-size: 1.75rem;                /* Larger font size for the title */
    text-align: center;             /* Centered title */
    margin-bottom: 0.9375rem;            /* Space below the title */
}

/* Styling the paragraph inside Emergency Services */
#emergency-services p {
    font-size: 1.125rem;                /* Font size for the paragraph */
    color: #333333;                 /* Dark grey color for the text */
    line-height: 1.6;               /* Line spacing for readability */
    text-align: center;             /* Center aligned text */
    margin-bottom: 1.25rem;            /* Space below the paragraph */
}

/* Styling the unordered list */
#emergency-services ul {
    list-style-type: none;          /* Remove default bullets */
    padding: 0;
    margin: 0;
    text-align: center;             /* Center the list items */
}

/* Styling each list item */
#emergency-services ul li {
    font-size: 1.125rem;                /* Font size for list items */
    color: #333;                    /* Dark grey color */
    margin-bottom: 0.625rem;            /* Space between list items */
}

/* Optional: Add some hover effect to list items */
#emergency-services ul li:hover {
    color: #d9534f;                 /* Change color on hover */
    cursor: pointer;                /* Change cursor to pointer */
}

.Emergency-Table {
    width: 100%;                  /* Table width to 100% of the container */
    border-collapse: collapse;    /* Removes space between borders */
    text-align: center;           /* Centers the text inside the table cells */
}

/* Styling for table cells (th and td) */
.Emergency-Table th, .Emergency-Table td {
    border: 0.1875rem solid #000;       /* Black border for table cells */
    padding: 0.625rem;                /* Adds padding inside cells */
    text-align: center;           /* Centers text inside cells */
}

/* Styling for header cells */
.Emergency-Table th {
    background-color: #f4f4f4;    /* Light grey background for table headers */
    font-weight: bold;             /* Makes header text bold */
}
.team-description, .committee-description {
    padding: 0.9375rem;
    background-color: #f5f5f5;
    border: 0.125rem solid #000;
}

.team-responsibilities, .committee-responsibilities {
    padding: 0.9375rem;
    background-color: #f5f5f5;
    border: 0.125rem solid #000;
}
/* forms and documents page */

.forms {
    border: 0.125rem solid #000;
    padding: 0.625rem;
    display: block;
    background-color: #f5f5f5;
}
.formspage {
    border: 0.125rem solid #000;
    padding: 0.625rem;
    display: block;
    background-color: #f5f5f5;
}

.custom-bullets {
    list-style-type: none;
    padding-left: 1.25rem;
}

.custom-bullets li {
    margin-bottom: 0.5rem;
}

.bullet-icon {
    display: inline-block;
    width: 0.0625rem;  /* Set to 0.0625rem initially */
    height: 0.0625rem; /* Set to 0.0625rem initially */
    background-color: #000;
    margin-right: 0.625rem;
    border-radius: 50%;
    transform: scale(0.5); /* Scale down to 50% of the original size */
}
/* Style the overall container for Halloween section */
#Halloween {
    padding: 1.25rem;
    background-color: transparent; /* Light background color */
    margin-bottom: 2.5rem;
}


/* Set the default size of the image */
.zoom-image img {
    transition: transform 0.3s ease; /* Smooth transition on zoom */
}

/* Hover effect for zoom-in */
.zoom-image img:hover {
    transform: scale(1.0); /* Zoom in on hover */
}

}
.close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 2rem;
  height: 2rem;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 0.9375rem;
  content: ' ';
  height: 2.0625rem;
  width: 0.125rem;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}





/* Lake page */

.boating-text, .fishing-text, .island-text, .memorial-text, .swimming-area-text {
    padding: 0.625rem; /* Adds padding around text */
    background-color: rgba(255, 255, 255, 0.7); /* Optional: Adds background color with transparency */
    border-radius: 0.5rem; /* Optional: Round corners */
    margin-top: 0.625rem; /* Space above the text container */
    text-align: center; /* Justify the text for better readability */
	border: 0.1875rem solid #000;
	item-align: center;
}

/* Optional: Style for individual sections */
.images h2 {
    font-size: 1.5rem;
    color: #333;
    text-align: center; /* Center the heading */
    margin-top: 1.25rem;
}

.image-container img {
    width: 100%; /* Ensure image is responsive */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;
}

/* Optional: Additional image container styles */
.image-container1 {
    position: relative;
    margin-bottom: 1.25rem; /* Space between sections */
	text-align: center;
	width: 30vw;
	height: auto;
	max-width: 50vw;
}
.memorial-text {
    padding: 0.625rem; /* Adds padding around the text */
    background-color: rgba(255, 255, 255, 0.7); /* Optional background color */
    border-radius: 0.5rem; /* Optional rounded corners */
    text-align: justify; /* Justify the text */
}
.fishing-text {
    padding: 1.25rem;                /* Adds padding around the text */
    background-color: #fff;    /* Light background color */
    border-radius: 0.5rem;           /* Rounded corners */
    text-align: justify;          /* Justifies the text */
    max-width: 80%;               /* Restricts the width for better readability */
    margin: 0 auto;               /* Centers the text container horizontally */
    font-size: 1rem;              /* Sets a comfortable font size for reading */
    color: #333;                  /* Text color */
}

/* Island Text Container */
.island-text {
    padding: 1.25rem;                /* Adds padding around the text */
    background-color: #fff;    /* Light blue background color */
    border-radius: 0.5rem;           /* Rounded corners */
    text-align: justify;          /* Justifies the text */
    max-width: 80%;               /* Restricts the width for better readability */
    margin: 0 auto;               /* Centers the text container horizontally */
    font-size: 1rem;              /* Sets a comfortable font size for reading */
    color: #333;                  /* Text color */
}

/* Memorial Text Container */
.memorial-text {
    padding: 1.25rem;                /* Adds padding around the text */
    background-color: #fff;    /* Light yellow background color */
    border-radius: 0.5rem;           /* Rounded corners */
    text-align: justify;          /* Justifies the text */
    max-width: 80%;               /* Restricts the width for better readability */
    margin: 0 auto;               /* Centers the text container horizontally */
    font-size: 1rem;              /* Sets a comfortable font size for reading */
    color: #333;                  /* Text color */
}

/* Optional: Add spacing between paragraphs inside the text containers */
.fishing-text p, .island-text p, .memorial-text p {
    margin-bottom: 0.9375rem; /* Adds space between paragraphs */
}

/* Optional: Add hover effect on the text containers */
.fishing-text:hover, .island-text:hover, .memorial-text:hover {
    background-color: #fff; /* Slightly lighter background on hover */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Adds shadow for a subtle effect */
}
/*membership benefits page */
#background-check {
    background-color: #333333; /* Dark gray background */
    padding: 0.625rem;
    border-radius: 0.5rem; /* Rounded corners */
    margin-top: 1.25rem;
    text-align: left;
}

#background-check a {
    color: #61dafb; /* Light blue link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold;
}

#background-check a:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #ffffff; /* Change link color on hover */
}
 .topic-point {
    font-size: 1.125rem; /* Adjust size as needed */
    font-weight: bold;
    color: #333; /* Optional: Change the text color */

}

/* Pavalion page*/
#pavilions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.25rem;
    background-color: transparent;
    border: 0rem solid #ddd;
    border-radius: 0.5rem;
   
}

.pavilion {
    flex: 1 1 calc(50% - 1.25rem);
    background-color: #f0f0f0; /* this one does the pavalion boxes */
    border: 0.1875rem solid #ccc;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    padding: 1.25rem;
    transition: transform 0.3s ease;
}

.pavilion:hover {
    transform: translateY(-0.3125rem);
}

.pavilion h2 {
    font-size: 1.5rem;
    color: #000;
    text-align: center;
    margin-bottom: 0.9375rem;
}

.pavilion ul {
    list-style: disc inside;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

.pavilion ul li {
    margin-bottom: 0.625rem;
}

.pavilion ul li strong {
    font-weight: bold;
    color: #333;
}
/* home page */
/* Calendar Container Styling */
/* Calendar Container Styling */
.calendar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
	border: 0.1875rem solid #000;

}


section .Honor-Guard-container {
    margin-bottom: 1.25rem;  /* Adds spacing between containers */
    padding: 1.25rem;        /* Adds padding inside each container */
    background-color: #ffffff;  /* White background for contrast */
    border: 0.0625rem solid #ddd;   /* Light gray border around the container */
    border-radius: 0.375rem;  /* Slight rounded corners */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);  /* Soft shadow for the containers */
}

/* Styling for paragraphs inside containers */
section .Honor-Guard-container p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Styling for lists inside containers */
section .Honor-Guard-container ul {
    list-style-type: disc;
    margin-left: 1.25rem;
    padding-left: 1.25rem;
}

/* Styling for list items */
section .Honor-Guard-container li {
    font-size: 1rem;
    margin-bottom: 0.625rem;
    color: #555;
}

/* Optional: Add hover effect for containers to enhance interactivity */
section .Honor-Guard-container:hover {
    background-color: #fafafa;  /* Light gray background on hover */
    border-color: #ccc;  /* Slightly darker border on hover */
}
.Recreational-Facilities, .Laundry-Mat1 {
    padding: 0.625rem; /* Adds padding around text */
    background-color: rgba(255, 255, 255, 0.7); /* Optional: Adds background color with transparency */
    border-radius: 0.5rem; /* Optional: Round corners */
    margin-top: 0.625rem; /* Space above the text container */
    text-align: justify; /* Justify the text for better readability */
	border: 0.1875rem solid #000;
}


/*Laundry Mat Page*/

/* Styling for the inner Laundry-Mat container (operating hours section) */
/* Main section */
#Laundry-Mat {
    padding: 0.1875rem;
    text-align: center;
    border-radius: 0.0625rem;
    background-color: rgba(255, 255, 255, 0.7); /* Optional: Adds background color with transparency */
}

/* Styling for the laundry hours */
.laundry-hours {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 10vh; /* Make the container take up the full viewport height */
	Width: 78vw;
    background-color: transparent; /* Optional: Adds background color with transparency */
}

.hours-info {
    border: 0.1875rem solid black; /* 0.1875rem border around the content */
    padding: 0.1875rem; /* Some space around the text */
    text-align: center; /* Center the text inside the box */
    font-size: 1.25rem; /* Adjust font size */
    background-color: rgba(255, 255, 255, 0.7); /* Optional: Adds background color with transparency */
}


/* Styling for the laundry description text */
.laundry-text {
    text-align: justify;
    font-size: 1.25rem;
    line-height: 1.0;
    color: #333;
    max-width: 75vw;  /* Optional: controls the width for better readability */
    margin: 1.25rem auto;  /* Centers the text container */
	border: 0.125rem solid #000;
    background-color: rgba(255, 255, 255, 0.7); /* Optional: Adds background color with transparency */
}

/* Lots for Sale Page */


/* Style for the section containing the table */
.property-listing-section {
    margin: 2.5rem 0;   /* Space above and below the section */
    padding: 1.25rem;    /* Padding inside the section */
    background-color: #fafafa;  /* Light background for the section */
    border: 0.125rem solid #ddd;     /* Border around the section */
    border-radius: 0.5rem;         /* Rounded corners for the section */
	text-align: center;
	width: 75rem;
}

/* Style the entire table */
.property-listing {
    width: 75rem;            /* Make table span the entire width */
    border-collapse: collapse; /* Remove spacing between cells */
    margin-top: 1.25rem;       /* Space above the table */
}

.property-listing th, .property-listing td {
    padding: 0.625rem;
    text-align: center;
    border: 0.0625rem solid #ddd; /* Light grey border for the cells */
}

/* Style for the header row */
.property-listing thead {
    background-color: #f4f4f4; /* Light background for the header */
	width: 75rem;
}

.property-listing th {
    font-weight: bold;
	width: 3.125rem;
    color: #333;
}

/* Add hover effect to rows */
.property-listing tbody tr:hover {
    background-color: #f9f9f9; /* Light grey on hover */
}

.property-listing tbody tr:nth-child(odd) {
    background-color: #f7f7f7; /* Light stripe for odd rows */
}

.lot-card {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    border: 0.0625rem solid #ccc;
    border-radius: 0.75rem;
    margin: 1.25rem auto;
    max-width: 50rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.1);
}

.lot-info h2 {
    margin-top: 0;
    font-family: 'Georgia', serif;
}

.lot-info p {
    margin: 0.375rem 0;
}

.lot-info button {
    margin-top: 0.625rem;
    padding: 0.625rem 0.9375rem;
    background: #eee;
    border: 0.0625rem solid #888;
    border-radius: 0.3125rem;
    cursor: pointer;
}



 @media (max-width: 30rem) {
    body::before {
        content: "Media Query Applied";
        color: red;
        position: fixed;
        top: 0;
        left: 0;
    }
} 
/* Adjustments for smaller screens (e.g., phones) */
/* /* @media screen and (max-width: 48rem) {
    nav {
        flex-direction: row; /* Stack nav items vertically */
        /*align-items: center; /* Center nav items */
      /*  padding: 0.0625rem; /* Adjust padding for mobile */
/*         width: fit-content;
    }

    nav ul {
        display: block; */
        /*flex-direction: row; /* Stack list items vertically */
        /*align-items: left; /* Center items */
      /* width: 100%; /* Ensure the nav takes up the full width */
/*         padding: 0;
        margin: 0;
    } */

    /* nav ul li { */
   /*     width: 100%; /* Ensure each list item takes the full width */
 /*       padding: 0.125rem 0 !important; /* Reduce padding between list items and add !important */
 /*         text-align: center; /* Center text */ 
    /* } */

    /* nav ul li a {  */
        /* display: flex; /* Make links block-level for full width */ 
        /* padding: 0.25rem 0; */
        /* text-align: center; /* Center text */
/*         font-size: 0.1rem;
    } */

    /* Adjust the space between dropdown items */
  /*   nav ul li ul li {
        padding: 0.125rem 0 !important; /* Reduce padding between dropdown items and add !important */
   /*  }
	    header {
        font-size: 0.5rem;
        padding: 0.625rem;
    }

    h1 {
        font-size: 0.5rem;
    }

    p {
        font-size: 0.3rem;
    }

    .button {
        font-size: 0.4rem;
        padding: 0.5rem;
    }
		.homepagemain {
	font-size: 1.0rem; 
	} */
	
  /* Make images responsive */
 /*    .homeimage img, .homepageimages img {
        width: 100%;
        height: auto;
    } */

    /* Prevent body from overflowing horizontally */
   /* body {
        overflow-x: hidden;
    }*/
/* 
    

    .dropdown-content {
        width: 100%;
    }

    .login-container {
        text-align: right;
    }

    .footer p {
        font-size: 0.3rem;
    }

    .calendar-container iframe {
        width: 100%;
        height: auto;
    }

    .homepageimages img {
        max-width: 100%;
    }
} */
 
/* Adjustments for very small screens (e.g., under 30rem width) */
@media screen and (max-width: 30rem) {
    nav {
        padding: 1em; /* Smaller padding for very small screens */
    }
	nav a {
		font-size: 0.5em;
	}
	
    nav ul li {
        padding: 0.2rem;  /* Reduce padding for smaller screens and add !important */
    }

    nav ul li a {
        font-size: 1.2rem; /* Adjust font size for small screens */
    }

    /* Reduce space between dropdown items further */
    nav ul li ul li {
        padding: 0.0625rem 0; /* Adjust to reduce space even more and add !important */
		font-size: 1.5rem;
	}
	  .homepagemain {
        font-size: 0.4rem; /* Adjust font size for mobile */
    }
    
    .homepagemain p {
        font-size: 0.5em;
    }

    .button {
        font-size: 0.1rem;
        padding: 0.5rem;
    }


    .dropdown-content {
        width: 100%; /* Make dropdown content span full width */
    }

    .dropdown {
        text-align: left; /* Align dropdown links to the left */
    }

    .login-container {
        display: block;
        text-align: right-side;
    }

    .footer p {
        font-size: 0.4rem;
    }

}
    /* Prevent body from overflowing horizontally */
   /* body {
        overflow-x: hidden;
    }*/

    /* Make sure no content overflows */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }


/* For screens 64rem or smaller (small desktop screens) */
/* @media screen and (max-width: 64rem) {
    .homepagemain {
        font-size: 2.5rem;  *//* Adjust font size for larger tablets */
/*     }
    
    nav a {
        font-size: 1.6rem; */ /* Adjust navigation font size */
/*     }

    .footer p {
        font-size: 1.0rem;
    }
} */

/* Larger screen (default styles for desktop) */
/* @media screen and (min-width: 64.0625rem) {
    .homepagemain {
        font-size: 3.0rem;
    }

    nav a {
        font-size: 1.8rem; */ /* Larger navigation links for desktop */
 /*    } */

/*     .footer p {
        font-size: 1.0rem;
    }
}
 */

/*end mobile css here */