* {
  box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background: #F5F5F5; /* Light grey background */
    color: #333; /* Dark grey text color for better readability */
}

a {
    font-weight: bold;
}

a:link {
    color: #1A73E8; /* Blue link color */
    text-decoration: none;
}

a:visited {
    color: #4A90E2; /* Slightly darker blue for visited links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* Underline on hover for better accessibility */
    color: #1A73E8;
}

a:active {
    color: #FF4081; /* Pink color for active links */
    background-color: transparent;
}

li {
    font-size: small;
    list-style-type: none;
    padding: 0.5em 2em;
    margin-top: 0.5em;
    background: rgba(255, 192, 203, 0.3); /* Lighter pink background for list items */
    border-radius: 4px; /* Rounded corners for list items */
}

ul.hlist {
    display: flex;
    margin: 0;
    justify-content: center;
    padding: 1em 0; /* Padding around the list */
}

#toc ul.hlist {
    display: flex;            /* Required to activate Flexbox */
    flex-direction: column;   /* Stack items vertically */
    align-items: center;      /* Center items horizontally */
    padding: 1em 0;
    margin: 0;
    list-style: none;
}

#toc li {
    font-size: small;
    list-style-type: none;
    padding: 0.5em 2em;
    margin-top: 0.5em;
    background: none; /*  background for list items */
    border-radius: 4px; /* Rounded corners for list items */
}
h1 {
    margin: 0;
    padding: 1em 10%;
    line-height: 1.2;
    font: italic normal x-large Georgia, serif;
    font-size: 2.5em; /* Adjusted font size for better readability */
    letter-spacing: 1px;
    color: #FFA726; /* Orange color for the header */
    text-align: center; /* Centered text for the header */
}

video {
    border: #FFA726 solid 1px; /* Orange border for videos */
    margin: 0;
    display: block;
    max-width: 100%;
}

.galleryphoto {
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.galleryphoto img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
}

/* .galleryphoto img {
    max-width: 400px;
    height: auto;
    padding: 5px;
} */

.galleryphoto iframe {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 16 / 9; /* Optional modern approach */
}


#header {
    width: 100%;
    padding: 3em 1em;
    background: url('gallery/sakura-2160666_1280.jpg') no-repeat center center;
    background-size: cover; /* Ensures the image covers the entire background */
    color: white; /* Text color for readability */
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */
    border-bottom: 3px solid #FFA726; /* Orange border at the bottom */
}

#header p {
    font: 1em Verdana, Georgia, sans-serif;
    color: #E6B162; 
    padding: 0.5em 0;
}

#navigation {
    width: 100%;
    padding: 0.5em 0;
    background: rgba(255, 192, 203, 0.3); /* Lighter pink background */
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #FF4081; /* Pink border at the bottom */
}

/*#header, #navigation {
  border-left: 2px solid red;
  border-right: 2px solid red;
} */  /* This is just to troubleshoot*/

#toc {
    width: 100%;
    padding: 0.5em 0;
    background: rgba(240, 230, 140, 0.3); /* background */
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #FF4081; /* Pink border at the bottom */
}

.galleryphoto {
    padding: 1em;
    display: flex;
    flex-wrap: wrap; /* Wraps items to the next line if necessary */
    justify-content: center; /* Centers gallery items */
}

#bodycontent {
    margin: 1em;
    padding: 1em;
    background: #FFF; /* White background for body content */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#bodycontent h4 {
    background: #E3F2FD; /* Light blue background for headings */
    padding: 1em;
    margin: 0.5em 0;
    border-radius: 4px; /* Rounded corners */
    font-size: 1.5em;
    color: #1976D2; /* Blue color for the heading text */
}

#bodycontent p {
    padding: 1em;
    color: #36454F;
    font-weight: normal; /* Normal font weight for body text */
    margin: 0.5em 0; /* Margin around paragraphs */
    line-height: 1.6; /* Improved line height for readability */
    background: #FAFAFA; /* Very light grey background for paragraphs */
    border-radius: 4px; /* Rounded corners */
}