body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  /*  background-image: url('pictures/lightgreen.jpg');*/
    background-size: cover;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center; /* Adjusted to center items horizontally */
    padding-top:0px;
    padding-bottom: 40px;
 /*   max-width: 768px*/
}

.container-search {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: right; /* Adjusted to center items horizontally */
    padding-top: 5px;
 /*   max-width: 768px*/
}


.container-mobile-search {
    display: block
    visibility: visible
    z-index: 10;
    padding: 10px;
    border-top: 1px solid #ccc;
 /*   max-width: 768px*/
}

#search-mobile-box {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#search-mobile-button {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#search-mobile-button:hover {
  background-color: #0056b3;
}

/*#search-mobile-results {
  margin-top: 10px;
  font-size: 14px;
}*/
main {
    background-color:rgb(255, 255, 255);
/*    padding: 50px; /*space between the main text and the bottom of the menu bar*/
    max-width: 800px; /* Set a maximum width for the main content */
    margin: 0 auto;
    margin-top: 50px  /*space between the main text and the bottom of the menu bar*/

}

/*additional begins*/

nav {
   padding: 0px; /*distance between the menu bar and the top*/
   height: 30px;
}

/* Menu with Two Horizontal Rows */

/*
nav {
    background-color: navy; /* Set background color for the nav element
    padding: 20px; /* Add padding to extend the background color
    max-width: 800px; /* Set the max width of the menu
    margin: 0 auto; /* Center the nav element horizontally
}
*/
nav ul {
/*    background-image: url('pictures/darkblue.webp');*/
    background-color: rgb(0, 108, 169);
    list-style-type: none;
    padding: 20px;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap into two rows */
    justify-content: center; /* Centers items horizontally */
    max-width: 800px; /* Optional: Set a max width for the menu */
}

nav ul li {
    flex: 1 1 auto; /* Allows items to grow and shrink equally */
    text-align: center; /* Center align the text in each item */
    padding: 5px 10px; /* Add padding to space out the items,top and bottom, left and right */
    box-sizing: border-box; /* Include padding in the width calculation */
    border-right: 1px solid rgb(224, 224, 224); /*separation bar between menu items*/

}

nav ul li a {
    color: #000; /* White #000 for black */
    text-decoration: none;
    font-size: 20px;
   /* font-weight: bold;*/
    display: inline-block;
}

/* Mobile Menu Styles */

nav ul { /*computer menu*/
    list-style-type: none;
    padding: 10;
    margin: 0;
  
}

nav ul li {
    /*
    display: inline;
    margin-right: 20px;*/
    
    flex: 1 1 auto; /* Allows items to grow and shrink equally */
    text-align: center; /* Center align the text in each item */
    padding: 5px 10px; /* Add padding to space out the items,top and bottom, left and right */
    box-sizing: border-box; /* Include padding in the width calculation */
    border-right: 1px solid rgb(224, 224, 224);
   
}

nav ul li a{
    color: white; /* Set the color to black */
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
    /*font-weight: bold;*/ /*computer menu font*/

}

.mobile-menu-list li a {
    color: black; /* Set the color to black */
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
    /*font-weight: bold;*/ /*computer menu font*/

}
.mobile-menu {
    display: none;
}

.menu-icon {
   /* width: 30px;
    height: 30px;*/

    font-size: 30px;
    display: inline-block;
    margin-left: auto; /*original*/
    /*    background-color: lightgreen;*/
   /* background-image: url('pictures/lightgreen.jpg')*/
    cursor: pointer;
}

/* Container for the image and title+icon */
.menu-title-container {
    display: flex; /* Aligns the items horizontally */
    align-items: center; /* Vertically centers the items */
    justify-content: flex-start; /* Ensures equal spacing between items */
    background-color: lightgreen; /* Add background image */
    background-size: cover; /* Ensures the image covers the entire container */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center; /* Centers the image */
    /*padding: 10px; *//* Adds spacing around the content */
    /*ends*/
    height: auto;
}


/* Styling for the image */
.menu-image {
    width: 80vw;
    flex-shrink: 0;
    align-items: left;
    /*width: 100%;*/ /* Size of the image */
    /*height: 100%px; *//* Size of the image */
    margin-right: 0px; /* Space between image and title */
    height: 100%;/*add**/
    object-fit: cover;/*add**/
}

/* Container for the title and icon together */
.menu-title-icon-container {
    display: flex; /* Aligns the title and icon horizontally */
    align-items: center; /* Vertically centers the items */
    flex-shrink: 1; /* Allow the title and icon to shrink if necessary */
}


.mobile-menu-list {
    position: fixed;
  /*  display: none;*/
    top: 0;
    left: 0;
    height: 100%;
    width: 60%; /* Adjust width as needed */
    background-color: #fff; /* Adjust as needed */
    padding: 10px;
    border-right: 1px solid #ccc; /* Adjust as needed */
    z-index: 1000; /* Ensure it's above other content */
    flex-direction: column; /* Display items vertically */
    /*transition: width 0.3s;*/
    opacity: 0;
    pointer-events: none; /*additional*/
    transition: opacity 0.3s ease-in-out;
/*    background-color: lightgreen;*/
   /* background-image: url('pictures/lightgreen.jpg')*/
}

.mobile-menu-list.active {
    /*display: flex;  /*originally here*/
    opacity: 1;
    pointer-events: auto; /* Interactable *//*additional*/
}

.mobile-menu-list li {
    display: block; /* Display list items vertically */
    padding: 10px;
}

@media (max-width: 768px) {
     nav {
         background-color:rgb(0, 108, 169); /* Set the background image */
  
     }

     .menu-title {
         font-size: 16px; /* Font size of the title */
         font-weight: bold; /* Makes the title bold */
         margin-left: 5px;
         margin-right: 5px; /* Space between title and icon */
         flex-grow: 1; /* Allows the title to use any extra space */
         writing-mode: vertical-rl;  /* Makes the text vertical, from right to left */
         white-space: nowrap; /* Prevents title from breaking into multiple lines */
         overflow: hidden; /* Ensures the text doesn't overflow */
         text-overflow: ellipsis; /* Adds ellipsis for overflowing text */
      }
     
    .menu {
        display: none;
    }

    .mobile-menu {
        display: block;
        position: fixed;  /* Fix the mobile menu at the top */
        top: 0; /* Stick the menu to the top */
        left: 0;
        width: 100%; /* Full width */
        padding: 0px;
        border-right: 1px solid #ccc;
        z-index: 1000; /
    }

    .mobile-menu-list {
        display: block;
        padding-top: 50px; /
    }
    
    .container-search {
      display: none;
    }
    
    .icon-picture{
      display: none;
    }
    
    main {
            margin-top: 0px; /* Override margin-top for smaller screens */
            padding-top: 0px
            top: 0;
            padding-left: 15px;
            padding-right: 15px;
        }
    
    .container {
        padding-bottom: 0px;
     /*   max-width: 768px*/
    }
    
}



.linebreak {
  border: none;
  border-top: 1px solid black;  /* Creates a thin horizontal line */
  margin: 10px 0;               /* Adjusts space above and below the line */
  height: 0;                    /* Ensures no extra height */
}


/*additional ends*/
/*.container {
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
}*/

.content {
    max-width: 800px;
    margin: 0 auto; /* Center the container horizontally */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    text-align: left;
}
/*

.text-container {
    max-width: 500px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    text-align: center;
}*/

.picture-container {
    margin-top: 20px
    text-align: center;
    margin: 20px;
}



/* Adjust size for mobile screens */
/*
@media (max-width: 767px) {
    .responsive-image-icon {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}
*/


.picture-icon {
   /* width: 80%;*/ /* Adjust the width as needed */
    max-width: 1000px; /* Maximum width of the image */
    max-height: 500px;
    display: block;
    margin: 0 auto;
}
/*
.picture {
    width: 100%;
    max-width: 500px; /* 500px */
 /*   max-height: 500px;*/
   /* cursor: pointer;
    display: block;
    margin: 0 auto;
}
*/

.picture {
    max-width: 500px;
    max-height: 500px;
    width: 100%;
    height: auto;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    aspect-ratio: auto; /* Allow natural aspect ratio */
}

/* Adjust portrait images (height > width) */
@media (min-aspect-ratio: 1/1) {
    .picture {
        max-width: auto;
        max-height: 500px;
    }
}


/*
.responsive-iframe {
    width: 100%;
    max-width: 700px;
    height: auto;        
    display: block;
    margin: 0 auto;
}*/

.iframe-container {
    position: relative;
    width: 90%;         /* Full width */
    max-width: 500px;    /* Cap width at 500px */
    padding-bottom: 75%; /* 4:3 aspect ratio (75% of width) */
    margin: 0 auto;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;          /* Optional: Remove iframe border */
}


.image-container {
  text-align: center; /* Centers the image horizontally */
}
.picture-maps {
   /* width: 80%;*/ /* Adjust the width as needed */
 /*   max-width: 1800px; *//* Maximum width of the image */
    max-height: 100%;
    width: 100%
    max-width:100%
  /*  cursor: pointer;*/
  display: inline-block;
}

.enlarged-picture {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.enlarged-picture.active {
    display: block;
}

.enlarged-picture img {
    width: 800px; /* Adjust the width as needed */
    cursor: pointer;
}

.image_caption, .lead_image_caption, #storytext figcaption, #storypagemaincol p.slideshow_caption {
    font-family: "Merriweather Sans", Sans-serif;
    font-weight: 600;
    line-height: 17px;
    font-size: 18px;
    display: block;
    caption-side: bottom;
    margin:.1em .5em .7em .1em;
    text-align: center; /* Center text within its container */
}

.red {
    color: red;
}

p {
    margin: 20px 0;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-img {
    max-width: 90%;
    max-height: 90%;
}

.overlay img {
    border: 5px solid #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.video-container {
    text-align: center; /* Center the video horizontally */
    margin-bottom: 20px
}

.video-container video {
    display: inline-block; /* Ensure the video is treated as an inline block element */
     width: 40%
}

.video-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
}

.rotate-left {
    transform: rotate(-90deg);  /* Rotate 90 degrees to the left (counterclockwise) */
    transform-origin: center;  /* Rotate around the center of the image */
}

.image-container {
    position: relative;
}

#search-box {
  width: 300px; /* Adjust width */
  height: 30px; /* Adjust height */
  font-size: 16px; /* Adjust font size */
  padding: 5px 10px; /* Add padding for better spacing */
  border: 1px solid #ccc; /* Add border */
  border-radius: 5px; /* Rounded corners */
}

#search-button {
  height: 40px; /* Match the height of the search box */
  padding: 0 15px; /* Add padding for horizontal spacing */
  font-size: 16px; /* Adjust font size */
  border: 1px solid #007bff; /* Add border with color */
  background-color: #007bff; /* Button background color */
  color: white; /* Text color */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
}

#search-button:hover {
  background-color: #0056b3; /* Darker shade on hover */
}

.info-panel {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400px;
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    text-align: center;
}



.close-btn {
/*    background: gray;
    background-color: gray*/
    color: black;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 15px;
}

.close-btn:hover {
    background: lightgray;
}

#close-panel-yuki,
#close-panel-akitakada,
#close-panel-higashihiroshima,
#close-panel-shirokiyama,
#close-panel-higashihiroshima,
#close-panel-takehara,
#close-panel-mihara,
#close-panel-kamikamagari,
#close-panel-etajima,
#close-panel-kurahashi,
#close-panel-sera,
#close-panel-onomichi,
#close-panel-fuchu,
#close-panel-shinseki,
#close-panel-shobara,
#close-panel-ounan,
#close-panel-izumo,
#close-panel-okuizumo,
#close-panel-matsue,
#close-panel-ota,
#close-panel-unnan,
#close-panel-kumakogen,
#close-panel-iyo,
#close-panel-ikata,
#close-panel-seiyo,
#close-panel-touon,
#close-panel-ainan,
#close-panel-yusuhara,
#close-panel-shimanto,
#close-panel-sukumo,
#close-panel-uguru,
#close-panel-maniwa,
#close-panel-daizen,
#close-panel-yamaguchiken,
#close-panel-kitakyushu,{
    
    margin-top: 1px;
    cursor: pointer;
    background-color: darkgray; /* Green */
    border: 1px solid white; /* Darker Green */
    color: white;
    padding: 10px 10px;
    border-radius: 5px;
    font-size: 10px;
}