@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	background-color: rgb(114,193,240);
}

.textPic-container {
    max-width: 1200px; 
    margin: 0 auto; 
}

.textPic-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.textPic-p {
 /*   font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px; */
    text-align: justify;
	font-family: 'Arial', sans-serif;
		font-size: 20px;
		color: black;
		margin-top: 10px;
		padding: 0 10px;  /* Padding creates extra space within an element - top, right, bottom, left - top and bottom, right and left */
		font-weight: bold;
}

/* Image styling for left and right */
.left-image {
    float: left;
    margin: 10px 15px 10px 0;
    width: 400px;
    height: auto;
}

.right-image {
    float: right;
    margin: 10px 0 10px 15px;
    width: 400px;
    height: auto;
}

figure {
      float: right;
      margin: 0 20px 20px 0;
      text-align: center;
    }

    figcaption {
      font-style: italic;
      text-align: center;
    }

    figure:last-of-type {
      clear: both;
    }

.yearDescription {
    font-family: 'Arial', sans-serif; /* Changed to Arial */
    font-weight: bold;
    font-size: 24px;
    color: black;
    text-decoration: none;
    text-align: center; /* Centers the text horizontally */
    margin-top: 10px; /* Optional: Adds some space at the top */
	margin-bottom: 10px; /* Optional: Adds some space at the top */
}

		/* Styling for the blog description */
	.blogDescription {
		font-size: 20px;
		color: black;
		margin-top: 20px;
		padding: 0 10px; /* Padding creates extra space within an element - top, right, bottom, left - top and bottom, right and left */
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.supportUs-container {
    display: flex;
    flex-wrap: nowrap;  /* Prevent items from wrapping */
    justify-content: space-between;
    padding: 20px;
	font-weight: bold;
	font-size: 20px;
}

.supportUs-item {
    flex: 1;  /* Each item takes equal width */
    margin: 10px;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: rgb(114,193,240);
	text-align: center;
}

.supportUs-item img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}

.support-link {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
}

.support-link:hover {
    background-color: #45a049;
}

.support-container {
    text-align: center;
    padding: 20px;
}

.support-container ul {
    list-style-type: none; /* Hides the list item icons */
    padding-left: 0; /* Removes the default indentation */
}

.payment-link {
    display: block;
    background-color: #008CBA;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    text-decoration: none;
}

.payment-link:hover {
    background-color: #005f7f;
}
		
		.headerLg {
			position: sticky; /* Ensures the header stays at the top */
			top: 0; /* Ensures the header stays at the top */
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8f8f8;
            padding: 0px;
			background-color: rgb(114,193,240);
        }

        /* Styling for individual header items */
        .headerLg-item {
            margin: 0 10px;
        }

        /* Styling for the "The Start", "Years, Videos, and Photos", "Merchandise" links */
        .headerLg-item a {
            font-family: 'Brush Script MT', cursive;
            font-weight: bold;
            font-size: 24px;
            color: black;
            text-decoration: none;
        }
		
		/* Ensure the image does not exceed 55px in height */
		.headerLg-item img {
			max-height: 55px; /* Set the maximum height of the image */
			width: auto; /* Maintain the aspect ratio */
		}

        /* Dropdown container */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* Dropdown menu */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 2;
        }

        /* Links inside the dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
			font-family: Arial, sans-serif !important; /* Apply Arial font */
            font-weight: normal !important; /* Remove bold */
            font-size: 16px !important; /* Make font smaller */
        }

        /* Show the dropdown when hovering */
        .dropdown:hover .dropdown-content {
            display: block;
        }

/* Header styles */
.header {
	position: sticky; /* Ensures the header stays at the top */
	top: 0; /* Ensures the header stays at the top */
    display: flex;
    justify-content: space-between;
    align-items: center;
	width: 100%; /* Make the header take up the full width of the screen */
    padding: 10px 20px; /* Adjust padding for responsiveness */
    background-color: rgb(114,193,240);
	box-sizing: border-box; /* Include padding in the total width */
}

.header-item {
    display: inline-block;
}

/* Ensure the image does not exceed 55px in height */
.header-item img {
    max-height: 55px; /* Set the maximum height of the image */
    width: auto; /* Maintain the aspect ratio */
 } 

/* Menu container styles */
.menu-container {
    position: relative; /* Must be relative for the menu icon to show up */
	top: 100%; /* Position directly below the header, does nothing */
	z-index: 9999; /* Ensure the menu appears above other content */
}

/* Hide the menu by default */
.menu {
    display: none;
    flex-direction: column;
    position: fixed; /* Changed to fixed to keep it centered */
    top: 30%;  /* positions the drop down menu at a % below the top of the display */
	left: 50%;
    transform: translate(-50%, -50%); /* Center the menu */
    background-color: #fff;
    border: 1px solid #ccc;
    width: 80%; /* Adjust width as needed */
    max-width: 400px; /* Maximum width for large screens */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999; /* Ensure the menu appears above other content */
	align-items: flex-start; /* Align menu items to the left */
}

.menu a {
    padding: 10px;
    text-decoration: none;
    color: #000;
	display: block;
    width: 100%; /* Ensure the menu items fill the width of the container */
	font-family: Arial, sans-serif !important;
    font-weight: normal !important;
    font-size: 16px !important;
	z-index: 9999; /* Ensure the menu appears above other content */
}

/* Style for the expandable link, checkbox, and + icon */
.expandable {
    display: block; /* Ensure expandable link and sub-menu are block elements */
    margin-top: 10px; /* Spacing above the expandable item */
}

.expandable > a {
    display: inline-flex; /* Flex for alignment of + icon and checkbox inline with text */
    align-items: center; /* Vertically align items on the same line */
    width: auto;
    cursor: pointer;
}

.expandable .expand-icon {
    cursor: pointer;
    margin-left: 10px; /* Space between the link and the + icon */
}

/* Hide both checkboxes (for hamburger menu and submenu) */
#menu-toggle, .expand-toggle {
    display: none; /* Hide both checkboxes */
}

.expandable input[type="checkbox"] {
    margin-left: 10px; /* Space between + icon and checkbox */
    vertical-align: middle; /* Align checkbox vertically with the text */
}

.menu .sub-menu {
    display: none;
    padding-left: 20px;
	margin-top: 10px; /* Add spacing between the top-level item and the sub-menu */
	list-style: none; /* Remove list bullets */
}

/* Change the icon using pseudo-element when checkbox is checked */
.expand-icon::before {
    content: "+";  /* Default icon */
}

.expand-toggle:checked + .expand-icon::before {
    content: "-";  /* Change icon when expanded */
}

/* When checkbox is checked, show the sub-menu */
.expand-toggle:checked + .expand-icon + .sub-menu {
    display: block;
}

/* Change the icon when checkbox is checked */
.expand-toggle:checked + .expand-icon {
    content: "-"; /* Change the label content to minus */
}


/* Hamburger icon styles */
.menu-icon {
    display: block;
    cursor: pointer;
    width: 30px;
    height: 20px;
    position: relative;
    transition: transform 0.3s ease;
}

.menu-icon span {
    display: block;
    height: 4px;
    background-color: #000;
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Show menu when checked */
.menu-toggle:checked ~ .menu {
    display: flex;
}

.banner {
		width: 100%; /* Banner takes full width */
		/* height: 200px; */ /* You can adjust the height of the banner */
		overflow: hidden; /* Hide anything overflowing */
	}
	
	.banner img {
		width: 100%; /* Make the banner image stretch to the full width */
		height: 100%;  /* Make the image cover the banner's height */
		object-fit: cover;  /* Ensure the image covers the area */
	}
	
	/* Container for the link items */
.smlinks-container {
    display: flex;
    justify-content: space-around; /* Space out items */
    align-items: center; /* Vertically center items */
    width: 100%; /* Full width */
    max-height: 70px; /* Limit vertical height */
    overflow: hidden; /* Hide anything that overflows */
}

/* Each individual link item */
.smlink-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Fill the height of the container */
}

/* Make images responsive */
.smlink-item img {
    max-height: 100%; /* Ensure the image does not exceed the container's height */
    width: auto; /* Maintain aspect ratio */
    max-width: 50px; /* Limit image width to 50px */
}
	
	/* Navigation Links */
	nav {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #f8f8f8;
	}

	nav a {
		margin-right: 15px;
		text-decoration: none;
		color: #333;
	}
	
.smallImage-container {
    display: flex; /* This enables a flexbox layout for the container */
	 flex-direction: column; /* Stack items vertically */
    flex-wrap: wrap; /* Allow images to wrap when the screen is narrow */
    justify-content: flex-start; /* Left justify the container items */
    padding: 20px; /* Padding creates extra space within an element - top, right, bottom, left - top and bottom, right and left */
    box-sizing: border-box;
    z-index: auto; /* Prevent from overlapping other elements */
	
}

/* Remove default margin and padding for ul */
.smallImage-container ul {
    margin: 0; /* Remove any margin around the ul */
    padding: 0; /* Remove any padding inside the ul */
    list-style-type: none; /* Remove default list styling */
}

/* Styling for the small image containers */
.smallImage-item {
    display: flex; /* Ensure each item takes up a new line */
    align-items: center; /* Align items vertically centered */
    margin: 0; /* No margin around each item */
    padding: 0; /* No padding around each item */
    text-align: left; /* Align text to the left */
    z-index: auto; /* Prevent from overlapping other elements */
}

/* Styling for the content inside small image item */
.smallImage-content {
    display: flex; /* This enables a flexbox layout */
    align-items: center; /* Aligns content vertically in the center */
    justify-content: flex-start; /* Align the items to the left */
    /* border: 2px solid gold; */  /* A golden border */
    /* border-radius: 8px; */
    padding: 10px;
    box-sizing: border-box;
}

/* Styling for the small image */
.smallImage-item img {
    width: 100px; /* Image width of 10px */
    height: 100px; /* Image height of 10px */
    object-fit: cover; /* Ensures the image covers the small box, without stretching */
    margin-right: 10px; /* Space between the image and the description */
}

/* Add a bullet point as a menu indicator with no underline */
.smallImage-item::before {
    content: "•"; /* Bullet as the menu indicator */
    font-size: 20px; /* Bullet size */
    color: black; /* Bullet color */
    margin-right: 10px; /* Space between the bullet and the content */
    display: inline-block; /* Ensure the bullet behaves as an inline block */
    text-decoration: none; /* Remove any underline */
}
	
	/* Ensure no underline or styling for the bullet point */
.smallImage-item li {
    list-style-type: none; /* Remove any list item styling */
    display: inline-block; /* Bullet will act as an inline block */
    color: black; /* Bullet color */
    font-size: 20px; /* Bullet size */
    margin-right: 10px; /* Space between the bullet and the content */
}
	
	/* Ensure no underlining in anchor tags */
	.smallImage-item a {
		text-decoration: none; /* Ensures no underline on anchor links */
	}
	
		/* Styling for the description */
	.smallImageDescription {
		font-size: 16px;
		color: black;
		margin-top: 10px;
		padding: 0 10px; /* Padding creates extra space within an element - top, right, bottom, left - top and bottom, right and left */
		font-weight: bold;
		text-align: left;
		margin: 0; /* No extra margin for description */
		text-decoration: underline; /* Underline the text to indicate it is a link */
	}


/* Style for the container of the images */
    .image-container {
		display: flex; /* This enables a flexbox layout for the container */
		flex-wrap: wrap; /* Allow images to wrap when the screen is narrow */
		justify-content: space-evenly; /* This spaces the images evenly across the width of the container, ensuring an equal gap between them */
		padding: 20px; /* Padding creates extra space within an element - top, right, bottom, left - top and bottom, right and left */
		box-sizing: border-box;
		z-index: auto; /* Prevent from overlapping other elements */
    }
	
	/* Styling for the image containers */
	.image-item {
		flex: 1 1 calc(20% - 20px); /* This rule makes each image container flexible. Each image takes 1/3 of the width, minus margin */
		margin: 0px 10px 10px 10px; /* Margins are used to create space around elements, outside of any defined borders. - top, right, bottom, left */
		display: block;
		flex-direction: column; /* Stack image, caption, and description vertically */
		align-items: center; /* Center the items horizontally */
		text-align: center; /* center the caption */
		/* position: relative; */   /* Allow positioning inside container */
		z-index: auto; /* Prevent from overlapping other elements */
	}
	
	.image-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border: 2px solid gold;
		border-radius: 8px;
		padding: 10px;
		box-sizing: border-box;
		max-width: 300px;
		height: 100%;  /* Important to make the image fill the box, cropping as necessary */
		z-index: auto; /* Prevent from overlapping other elements */
	}

	.image-item img {
		width: 100%; 
		/* height: 100%; */ /* ensure the image fills the entire container without distorting its aspect ratio, height and width, will crop if necessary */
		height: 100%; /* makes all the images be the same height, and fill the image container, although some of the width is cropped to do so */
		object-fit: cover;   /* ensures that the image will cover the container while maintaining its aspect ratio, even if that means cropping the image slightly */
		/* transition: transform 0.3s ease; */ /* The transition and transform properties create a zoom effect on hover, which is optional. */
	}
	
		/* Styling for the description */
	.description {
		font-size: 16px;
		color: black;
		margin-top: 10px;
		padding: 0 10px; /* Padding creates extra space within an element - top, right, bottom, left - top and bottom, right and left */
		font-weight: bold;
		text-align: left;
	}
	
			/* Styling for the description */
	.dancingDescription {
		font-family: 'Arial', sans-serif;
		font-size: 20px;
		color: black;
		margin-top: 10px;
		padding: 0 10px; /* Padding creates extra space within an element - top, right, bottom, left - top and bottom, right and left */
		font-weight: bold;
		text-align: left;
	}
	
			/* Styling for the description */
	.centeredDescription {
		font-size: 16px;
		color: black;
		margin-top: 10px;
		padding: 0 10px; /* Padding creates extra space within an element - top, right, bottom, left - top and bottom, right and left */
		font-weight: bold;
		text-align: center;
	}

	/* Mobile (phone) styles - images stacked vertically */	
/* Apply Media Queries to adjust the layout based on the screen size (e.g., vertically on mobile and horizontally on desktop) */
/* For small screens (mobile devices) */
/* The images will stack vertically, one below the other */
/* The width of each image is reduced (optional) to fit better on smaller screens */
/* Mobile (phone) styles - images stacked vertically */
@media (max-width: 768px) {
	
    .right-image {
        max-width: 250px;
        margin: 10px 0px 10px 10; 
    }
	
	.left-image {
        max-width: 250px;
        margin: 10px 10px 10px 0; 
    }

/*    .textPic-p {
        font-size: 1rem;
    } */
	
	.menu-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu {
        top: 50%; /* Center the menu vertically */
        left: 50%;
        width: 90%; /* Take up most of the screen width */
        max-width: none; /* Remove max-width for full-screen width */
        border-radius: 0;
        box-shadow: none;
		padding-top: 20px; /* Space above the menu */
    }

    .menu a {
        padding: 15px;
        text-align: left;
    }

    .expandable > a {
        justify-content: flex-start; /* Left justify the expandable link */
    }
	
	/* Ensure there is no hidden overflow */
		body, .header, .menu {
			overflow: visible; /* Prevent overflow */
		}
		
	.smlinks-container {
        flex-direction: row; /* Ensure items stay in a horizontal row */
        justify-content: center; /* Center items vertically */
        max-height: none; /* Remove max-height restriction on mobile */
    }

    .smlink-item {
        margin-bottom: 10px; /* Add space between items on mobile */
		margin-right: 10px; /* Add space between items on mobile */
    }

    .smlink-item img {
        max-width: 40px; /* Reduce image size on mobile */
    }
		
      .image-container {
        flex-direction: column;   /* The images are stacked vertically by setting flex-direction: column; */
		display: block; /* Stack images vertically */
        align-items: center; /* ensures the images are horizontally centered within the container. */
		padding: 0;  /* No padding for mobile */
	 }
	

	  .image-item {
		width: 80%; */   /* Allow image containers to take 80% of the screen width */
        margin-bottom: 20px;  /* Space between stacked images */
      }
	  
	   /* Ensure the banner is not aligned with the columns of images */
		.banner img {
			object-fit: cover;
		}
		
		/* Stack links in tables horizontally on mobile */
		.links-table td {
			display: inline-block; /* Align table cells in a row */
			width: auto;
		}
		
		.links-table {
			margin: 10px 0;
		} 
		
		.supportUs-container {
        flex-direction: column; /* Stack the items vertically on smaller screens */
    }
		
		.supportUs-item {
        flex: 1 1 100%; /* Items take full width on small screens */
        margin: 10px 0;
    }
}