body, html {
    margin: 0;
    padding: 0;
    font-family: 'Shippori Mincho', sans-serif;
}

.container {
    max-width: 800px;
    margin: 20px auto 50px; /* Combined margin for top and bottom */
    padding: 0 15px; /* Add padding to prevent content from touching the edges */
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em;
}

.logo {
    font-size: 1em;
    text-decoration: none;
    color: #000;
}

.nav-links a {
    text-decoration: none;
    margin: 0 .5em;
    color: #000;
    padding: 0em .5em;
}

.dark-mode-toggle {
    text-decoration: none;
    margin: 0 .5em;
    color: #fff;
    background: #555;
    padding: .5em 1em;
    cursor: pointer;
    float: right;
    border-radius: 12px;
}

.main-text {
    font-size: 1rem; /* Using rem for font sizes */
    color: #333;
    text-align: center;
    margin: auto;
}

.container2 {
    max-width: 800px;
    margin: 20px auto 20px; /* Combined margin for top and bottom */
    padding: 0 15px; /* Add padding to prevent content from touching the edges */
}

.main-text h1 {
    font-size: 5.75rem; /* Increased font size */
    font-weight: bold;
}

.main-text h2 {
    font-size: 1.75rem; /* Increased font size */
}

.bannerphoto {
    padding: 0px;
    width: 100%; /* Makes the div take the full width of its parent */
    max-width: 800px; /* Maximum width of the image */
    margin: 0 auto 30px; /* Centers the div */
    text-align: center; /* Centers the image inside the div */
}

.bannerphoto img {
    width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains the aspect ratio */
    max-width: 800px; /* Maximum width of the image */
}

.container3 {
    max-width: 800px;
    margin: 20px auto 50px; /* Combined margin for top and bottom */
    padding: 0 15px; /* Add padding to prevent content from touching the edges */
}

.main-text p1 {
    font-size: 1rem; /* Increased font size */
}

ul.a {
    list-style-type: square;
    padding: 1.5em;
    margin: 0 auto 0; /* Center the list */
    display: inline-block;
    text-align: left;
}

body.light-mode {
    background-color: #ddd;
    color: #111;
}

body.light-mode .nav-links a,
body.light-mode .light-mode-toggle {
    color: #ddd;
    background-color: #111; /* Or any light color you prefer */
}

body.light-mode .container,
body.light-mode .container2,
body.light-mode .container3 {
    background-color: #ddd; /* Light background for containers */
    color: #111; /* Dark text color for dark mode */
}

body.dark-mode {
    background-color: #111;
    color: #fff;
}

body.dark-mode .nav-links a {
    color: #ddd;
  /*  background-color: #ddd;  Or any dark color you prefer */
}
body.dark-mode .dark-mode-toggle {
    color: #111;
    background-color: #ddd; /* Or any dark color you prefer */
}

body.dark-mode .container,
body.dark-mode .container2,
body.dark-mode .container3 {
   /* background-color: #111;  Dark background for containers */
    color: #ddd; /* Light text color for dark mode */
}
 
.carousel {
    position: relative;
    max-width: 700px;
    margin: auto;
    overflow: hidden;
}
/*
.carousel-images a {
    display: inline-block;  Ensure the links behave as inline-block elements 
    width: 80%;  Full width to contain the image 
}
*/
.carousel-images img {
    max-width: 70%; /* Responsive image size */
    display: block; /* Remove any default inline spacing */
  /*  width: 100%;  Ensure the image fills the anchor element */
}


.carousel-images {
    display: flex;
}
/*
.carousel-images img {
    max-width: 80%;
    display: block;
    transition: transform 0.5s ease;
}
*/
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 100;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}


/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .container {
        max-width: 95%;
        margin: 0 auto 0; 
		font-size: .8rem;
    	padding: 0;
    }
	.dark-mode-toggle {
	    border-radius: 12px;
	}  
  
	.container2 {
        max-width: 90%;
        margin-bottom: 20px; /* Adjust for mobile */
    }
    .container3 {
        max-width: 90%;
        margin-bottom: 20px; /* Adjust for mobile */
       	text-align: justify;
    }

    .main-text h1 {
        font-size: 2.5rem; /* Smaller size for mobile screens */
    }

    .main-text h2 {
        font-size: 1.25rem; /* Adjust text size for readability */
    }
	.main-text p1 {
        font-size: 1rem; /* Adjust text size for readability */
    }

    .bannerphoto img {
        max-width: 90%;
    }
    .carousel-button {
        padding: 5px;
        font-size: 12px;
    }
</body>
</html>
}