body {
    padding: 0;
    margin: 0;
    font-family: sans-serif ;
    background: rgb(239, 238, 228);
}

/* NOTE: Resolves empty p tag (see https://discourse.gohugo.io/t/empty-p-p-tags-generated-when-using-shortcodes/3439/4) */
p:empty {
    display:none;
}

.center-text {
    text-align: center;
}

h1:empty,
h2:empty,
h3:empty {
    display: none;
}


img {
    max-width: 100%; 
}

header h1 {
    text-align: center;
}

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.grey-block {
  background: #eee;
  padding: 1rem;
  border-radius: 4px;
}

/* default inner blocks */
.block {
  flex: 1;
  padding: 0.75rem;
  background: #ddd;
  border-radius: 3px;
}

/* override for the middle block */
.third-color {
  background: #c8e6c9;
}

figure {
    margin: 1em;
}

.btn-outline {
  display: inline-block;
  padding: 0.5em 5em;
  border: 2px solid currentColor;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  color: inherit;        /* button text will inherit surrounding color */
  background: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-outline:hover {
  background-color: rgba(0, 0, 0, 0.1);      /* subtle overlay */
  border-color: rgba(0, 0, 0, 0.6);          /* faded border */
  color: inherit;                            /* keep text color */
}
.hstack, .vstack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-gap, 1rem);
}

.hstack {
  flex-direction: row;
}

.vstack {
  flex-direction: column;
}

.spacer {
  flex-grow: 1;
}
.center-header h1,
.center-header h2,
.center-header h3,
.center-header h4,
.center-header h5,
.center-header h6 {
  text-align: center;
}

h1 {
    font-size: 4em;
    font-weight: 700;
}

h2 {
    font-size: 3em;
    font-weight: 700;
}

h3 {
    font-size: 2em;
    font-weight: 700;
}

h4 {
    font-size: 1.5em;
    font-weight: 700;
}

p {
    font-size: 1em;
}

ul, ol {
    font-size: 1em;
}


/* .p1 class */
.p1 p {
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.5;
    margin: 1em 0;
}

.p1 ul, .p1 ol {
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.5;
    margin: 1em 0;
}

.p1 ul li, .p1 ol li {
    margin-bottom: 0.5em;  /* Optional: adjust spacing between list items */
}

/* .p2 class */
.p2 p {
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.3;
    margin: 1em 0;
}

.p2 ul, .p2 ol {
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.3;
    margin: 1em 0;
}

.p2 ul li, .p2 ol li {
    margin-bottom: 0.5em;
}
.content-container {
    max-width: 1400px;
    margin: 0 auto;
}
.darktheme {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 2rem;
    padding-left: 2rem;
    background-color: #2e322d;
    color: #fff;
}
.lighttheme {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 2rem;
    padding-left: 2rem;
    background: rgb(239, 238, 228)
}
.block0style {
    padding-top: 4rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
 }

.image-container {
  position: relative;
}

.moon-image {
  transform: rotate(180deg);
  max-width: 860px;
  width: 100%;
  height: auto;
}

#logo-text-div {
  position: relative;
  top: -2em;
  margin: 1rem;
}

.logo-main-text {
  font-size: clamp(1.5rem, 5vw, 3em);
  font-weight: 700;
  font-style: normal;
  color: rgb(46, 50, 45);
  font-kerning: none;
  text-decoration: none;
}

.logo-subtext {
  font-size: clamp(0.3rem, 5vw, 1em);
  font-weight: 400;
  font-style: normal;
}

@media (max-width: 480px) {
  #logo-text-div {
    top: 0em;
  }
}
.block1grid {
    padding-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr auto;
    gap: 1rem;
 }


@media (max-width: 768px) {
    .block1grid {
        grid-template-columns: 1fr;
    }
}

.block1grid figure {
    display: flex;
    margin: 0;
}

.block1grid img {
     /* constrain to the cell’s height and width without cropping */
    max-height: 100%;
    width: 100%;
    height: auto;
    /* width: auto; */
    /* no object-fit here – we want the whole image */
    /* display: block; */
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr auto;
  gap: 1rem;
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.gallery-image {
  /* make the cell a flex‐box so we can center the image */
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* allow the flex‐item (img) to shrink below its intrinsic size */
  overflow: hidden;
}


.gallery2-image {
  /* make the cell a flex‐box so we can center the image */
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* allow the flex‐item (img) to shrink below its intrinsic size */
  overflow: hidden;
}

.gallery-image img {
  /* constrain to the cell’s height and width without cropping */
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  /* no object-fit here – we want the whole image */
  display: block;
}

.align-p p {
  text-align: center;
}
.block3container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.block3container-item {
    flex: 1 1 200px;
    max-height: 600px;
}

.block3container img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
}

.block3container figure {
    margin: 1rem;
}

.mywrap {
    display: flex;
    flex-direction: column;
    place-items: center;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sunimg {
   height: 5em;
   width: 5em;
}

.moonwheatimg {
   height: 3em;
   max-width: 100%;
}

.moonwheatimg figure {
    align-items: center;
}

@media (max-width: 768px) {
  .block3container  {
    grid-template-columns: 1fr;
  }
}

/* .gallery-image { */
/*   grid-row: 1;   */
/*   /\* make the cell a flex‐box so we can center the image *\/ */
/*   display: flex; */
/*   justify-content: center; */
/*   align-items: center; */
/*   /\* allow the flex‐item (img) to shrink below its intrinsic size *\/ */
/*   overflow: hidden; */
/* } */

/* .gallery-image img { */
/*   /\* constrain to the cell’s height and width without cropping *\/ */
/*   max-height: 100%; */
/*   max-width: 100%; */
/*   height: auto; */
/*   width: auto; */
/*   /\* no object-fit here – we want the whole image *\/ */
/*   display: block; */
/* } */
.b4-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 1rem;                           
  align-items: center;
}

@media (max-width: 768px) {
    .b4-container  {
        grid-template-columns: 1fr;
    }
}

  
.b4-container h2 {
  margin-bottom: 0;
}

.gallery4-image {
  /* make the cell a flex‐box so we can center the image */
  display: flex;
  justify-content: center;
  align-items: center;
  /* allow the flex‐item (img) to shrink below its intrinsic size */
  overflow: hidden;
}


.b4-button-div {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
}
.bf-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* four equal columns */
  gap: 1rem;                              /* adjust as needed */
}

@media (max-width: 768px) {
    .bf-container {
        grid-template-columns: 1fr;
    }
}