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: 800px;
    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;
}

/* Gallery */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
  background: #EEE;
  width: 90%;
    margin: 20px auto 20px; /* Combined margin for top and bottom */
}

.gallery-cell {
  width: 20%;
  height: 80px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 80px;
  font-size: 10px;
  color: white;
}


/* 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>
}