/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v43-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v43-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-jp-300 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/noto-sans-jp-v54-japanese-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html, body {
      margin: 0;
      padding: 0;
      background-color: #fffefc; /* warm white page background */
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-family: 'Open Sans', sans-serif;
  font-weight: 300; /* Light */
    }
a {
color: #6d6d6d;
text-decoration: none;
}

a:hover{
color: #9575cd;
text-decoration: underline;
}

a:visited{
color: #9575cd;
}

a.button{
  background-color: #cddc39;
  color: #000000;
  margin: 30px;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 3px;
}

a.button:hover{
  background-color: #cddc39;
  color: #000000;
  margin: 30px;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 3px;
  transform: scale(1.05);         /* Slight zoom on hover */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Optional: use cursive for specific elements */
.cursive {
  font-family: 'Open Sans', cursive;
}

/* For Japanese text blocks */
.jp {
  font-family: 'Noto Sans JP', 'Open Sans', sans-serif;
  font-weight: 300;
}

.data {
  text-align: left;
  display: inline-block;      /* Makes the block shrink to fit lines */
  margin: 0 auto;        /* Centers the block horizontally */
  white-space: pre-line;      /* Respects line breaks */
  line-height: 1.4;          /* Adjust line spacing (default is ~1.6) */
  max-width: 100%;            /* Never overflow the circle */
  text-transform: uppercase;
}

.quote {
  font-family: 'Open Sans', cursive;
  font-style: italic;
  text-align: left;
  display: inline-block;      /* Makes the block shrink to fit lines */
  margin: 0 auto;        /* Centers the block horizontally */
  white-space: pre-line;      /* Respects line breaks */
  line-height: 1.4;          /* Adjust line spacing (default is ~1.6) */
  max-width: 100%;            /* Never overflow the circle */
}

.poem {
  text-align: left;
  display: inline-block;      /* Makes the block shrink to fit lines */
  margin: 0 auto;        /* Centers the block horizontally */
  white-space: pre-line;      /* Respects line breaks */
  line-height: 1;          /* Adjust line spacing (default is ~1.6) */
  max-width: 100%;            /* Never overflow the circle */
}

    /* === CIRCLE === */
    .circle-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fffefc; /* slightly lighter warm white inside the circle */
      border: 2px solid black;
      border-radius: 50%;
      width: min(90vmin, 90vmax);
      height: min(90vmin, 90vmax);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .circle-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 2rem 3rem;
      text-align: center;
      color: black;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
  max-width: 100%;
    }

.circle-scroll p {
  max-width: 90%;
}


    /* === GALLERY === */
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
      margin-top: 2rem;
    }

    .gallery-item {
      width: 100px;
      height: 100px;
      object-fit: cover;
      cursor: pointer;
      border: none;
      border-radius: 3px;             /* Rounded corners */
  transition: transform 0.3s ease;/* Smooth zoom on hover */
    }

.gallery-item:hover {
  transform: scale(1.05);         /* Slight zoom on hover */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

    /* === SPEAKER ICON === */
    .speaker-icon {
      margin-top: 1rem;
      cursor: pointer;
      width: 24px;
      height: 24px;
      transition: color 0.3s;
    }

/* On = black */
.speaker-icon.speaker-on {
  color: black;
}

/* Off = grey */
.speaker-icon.speaker-off {
  color: #888;
}

    /* === OVERLAY === */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none; /* hidden by default */
      align-items: center;
      justify-content: center;
      z-index: 100;
      flex-direction: column;
    }

.overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90%;
  max-height: 80%;
  margin: auto;
  z-index: 101;
}


    .overlay.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }

   /* Center image/video */
#media-container {
  width: 90vw;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  margin: auto;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image and video */
#media-container img,
#media-container video,
#media-container iframe {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  display: block;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  border: none;
}

.media-description {
  color: white;
  font-size: 16px;  /* ≈ 12pt */
  font-style: italic; /* cursive appearance */
  font-family: 'Open Sans', cursive; /* matches your setup */
  text-align: center;
  margin-top: 0.5rem;
  padding: 0 1rem;
  max-width: 90%;
  z-index: 101;
}

    /* Arrows */
.control-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem;
  pointer-events: all;
  cursor: pointer;
  z-index: 103;
  width: 24px;
  height: 24px;
  display: inline-block;
  color: white;
}
.control-icon:hover {
  color: #555; /* color on hover */
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

/* Close icon */
#close {
  top: 0;
  right: 0;
  transform: none;
}

    /* === INVISIBLE CORNER LINKS === */
    .link-area {
      position: absolute;
      width: 25%;
      height: 25%;
      z-index: 10;
    }

    .top-left     { top: 0; left: 0; }
    .top-right    { top: 0; right: 0; }
    .bottom-left  { bottom: 0; left: 0; }
    .bottom-right { bottom: 0; right: 0; }

/* === TABLE === */

/* General table styling */
table {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: 'Open sans', sans-serif;
}

/* Table header styling */
table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: 'Open sans', sans-serif;
}

th, td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

thead th, tfoot {
    background-color: #f4f4f4;
    font-style: italic;
}