body {
  display: flex;
  justify-content: center;
  align-items: start;
  min-height: 100vh;
  margin: 0;
  background-color: #2c2c2c;
}

.birthstone-regular {
  font-family: "Birthstone", cursive;
  font-weight: 400;
  font-style: normal;
}

.playwrite-cu-font {
  font-family: "Playwrite CU", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.albert-sans-font {
  font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.row {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  height: min-content;
}

.col {
  display: flex;
  flex-direction: column;
}

.w75 {
  width: 75%;
}

.w25 {
  width: 25%;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-right {
  justify-content: right;
}

.justify-content-left {
  justify-content: left;
}

.align-items-end {
  align-items: end;
}

.justify-self-end {
  justify-self: end;
}

.align-content-center {
  align-items: center;
}

.col-auto {
  width: auto;
}

.col-min {
  width: min-content;
}

.col-25 {
  width: 25%;
}

.col-35 {
  width: 35%;
}

.w-100 {
  width: 100%;
}

.p-abs {
  position: absolute;
}

.footer {
  margin-top: auto;
  position: absolute;
  bottom: 0;
}

.title-svg {
  width: auto;
  height: max(12vh, 200px);
}

.dates-svg {
  width: auto;
  height: max(15vh, 230px);
}

#book {
  aspect-ratio: 1080/1350;
  width: min(100vw, 80vh);
  position: relative;
}

.page-container {
  color: white;
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: min-content;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity: 0;
}

.left-side,
.right-side {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
}

.left-side {
  left: 0;
}

.right-side {
  right: 0;
}

#page001 {
  background-color: white;
  color: black;
  z-index: -2;
}

#bg-pic {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../imgs/IMG-20241124-WA0021.jpg") no-repeat center center;
  background-size: cover;
  opacity: 40%;
  z-index: -1;
}

.fs-2_8 {
  font-size: 2.8rem;
}

.fs-2 {
  font-size: min(2rem, 2.5vh);
}

.fs-2_5 {
  font-size: min(2.5rem, 3vh);
}

.fs-3 {
  font-size: min(3rem, 4vh);
}

.fs-3_5 {
  font-size: min(3.5rem, 5vh);
}

.fs-4 {
  font-size: min(4rem, 10vh);
}

.names-head {
  margin-left: -3rem;
}

.names-footer {
  margin-right: -2rem;
}

.names-labels {
  margin-top: min(6rem, 7vh);
}

.subtitle-labels {
  line-height: min(3rem, 4vh);
  margin-top: max(2.3rem, 4vh);
}

.names-labels.fs-4 {
  line-height: min(2rem, 5vh);
}

.date-labels {
  margin-top: min(6rem, 5vh);
  line-height: min(4rem, 12vh);
}

.date-labels .date-mid {
  line-height: min(6rem, 15vh);
}

.date-labels .date-footer {
  line-height: min(6rem, 15vh);
}

.fs-6 {
  font-size: min(6rem, 16vh);
}

.date-mid {
  border-top: 3px black solid;
  border-bottom: 3px black solid;
  font-weight: bold;
}

.swipe-svg {
  --swipe-distance: min(5rem, 200px);
  height: auto;
  width: var(--swipe-distance);
  animation: squish 0.5s ease-in-out infinite;
}

.swipe-box {
  width: auto;
  position: absolute;
  right: 0px;
  top: 40%;
  display: none;
  pointer-events: none;
}

@keyframes squish {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1.1, 0.9);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}
.fs-0_5 {
  font-size: min(1.2rem, 50px);
}

.fs-1_2 {
  font-size: min(1.2rem, 50px);
}

.fs-1 {
  font-size: min(1rem, 35px);
}

.fs-1_5 {
  font-size: min(1.5rem, 60px);
}

@keyframes swipe-animation {
  0%, 100% {
    margin-right: 0;
  }
  50% {
    margin-right: var(--swipe-distance);
  }
}
.text-center {
  text-align: center;
}

.msg-text {
  margin-top: max(2.5rem, 40px);
  font-size: min(1.3rem, 20px);
  z-index: -1;
}
.msg-text span {
  width: max(600px, 8vw);
}

#page002 {
  background-image: url("../imgs/bg_008_l.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  color: black;
  --divider-height: 2rem;
}
#page002 .title-container .col {
  width: min(400px, 55%);
  margin-right: max(6%, 50px);
}
#page002 .itinerario-titulo .col::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: var(--divider-height);
  background-image: url("../imgs/divider.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  bottom: calc(-0.8 * var(--divider-height));
}
#page002 .itinerario-titulo .divider {
  position: absolute;
  width: 100%;
  bottom: 0;
}
#page002 .itinerario-titulo {
  position: relative;
  padding-bottom: calc(0.8 * var(--divider-height));
  margin-bottom: calc(0.2 * var(--divider-height));
  /* Make space for the divider */
}
#page002 .itinerario-titulo .col {
  position: relative;
}
#page002 .itinerario-icon img {
  width: auto;
  max-height: min(9rem, 12vh);
}
#page002 .itinerario-icon.dresscode-icon img {
  width: auto;
  max-height: min(8rem, 11vh);
}
#page002 #itinerario {
  width: 80%;
  margin-left: auto;
  padding-right: 4rem;
}
#page002 .itinerario-description {
  padding: 0.8rem;
  font-weight: bold;
}

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

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

.text-light {
  color: gray;
}

.align-self-end {
  align-self: flex-end;
}

.page-num-pair {
  color: gray;
  margin-top: auto;
}
.page-num-pair span {
  margin-right: max(2rem, 3vh);
  margin-bottom: max(1rem, 2vh);
  margin-left: auto;
}

.page-num-odd {
  color: gray;
  margin-top: auto;
}
.page-num-odd span {
  margin-left: max(2rem, 3vh);
  margin-bottom: max(1rem, 2vh);
  margin-right: auto;
}

#page003 {
  background-image: url("../imgs/bg_007_r.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  color: black;
  --divider-height: 1rem;
}
#page003 .title-container .col {
  width: min(300px, 40%);
  margin-left: max(6%, 50px);
}
#page003 .title-container-2 {
  margin-top: 2rem;
}
#page003 .title-container-2 .col {
  width: min(400px, 55%);
  margin-left: max(6%, 50px);
}
#page003 .menu-titulo .col::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: var(--divider-height);
  background-image: url("../imgs/divider.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  bottom: calc(-0.3 * var(--divider-height));
}
#page003 .menu-titulo .divider {
  position: absolute;
  width: 100%;
  bottom: 0;
}
#page003 .menu-titulo {
  position: relative;
  /* Make space for the divider */
}
#page003 .menu-titulo .col {
  position: relative;
}
#page003 .menu-icon img {
  width: auto;
  max-height: min(9rem, 12vh);
}
#page003 .menu-icon.dresscode-icon img {
  width: auto;
  max-height: min(8rem, 11vh);
}
#page003 #menu {
  width: 80%;
  margin-left: auto;
  padding-right: 4rem;
  flex-wrap: wrap;
}
#page003 .menu-description {
  padding: 0.8rem;
  font-weight: bold;
}

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

.fs-0_8 {
  font-size: min(0.8rem, 25px);
}

.w50 {
  width: 50%;
}

.confirmation-text {
  padding-inline: max(6%, 50px);
}
.confirmation-text span {
  margin-top: 0.8rem;
  font-weight: bold;
  text-align: center;
}

.btn {
  height: min-content;
  padding-inline: min(1.5rem, 60px);
  padding-top: min(0.7rem, 30px);
  padding-bottom: min(0.7rem, 30px);
  border: 3px solid #63353f;
  color: #63353f;
  background-color: #b98a9e;
  border-radius: min(1.5rem, 60px);
  margin-top: 2rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  background-color: rgba(136, 86, 97, 0.6509803922);
  color: #cfa6b8;
  cursor: pointer;
}

.btn:active {
  background-color: #2c2c2c;
  color: #c9c9c9;
  border-color: #c9c9c9;
}

#page004 {
  background-image: url("../imgs/bg_008_l.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  color: black;
  --divider-height: 2rem;
}
#page004 .title-container .col {
  width: min(400px, 55%);
  margin-right: max(6%, 50px);
}
#page004 .description-text {
  font-size: 1rem;
  line-height: 1.6rem;
  padding-inline: 1.5rem;
}
#page004 .description-icon {
  padding-inline: 1.5rem;
}
#page004 .title-svg-2 {
  margin-top: 2rem;
  margin-bottom: 1.6rem;
}

.w75 {
  width: 75%;
}

.w70 {
  width: 70%;
}

.w30 {
  width: 30%;
}

.redirect-button,
.request-button {
  font-weight: bold;
  border-radius: min(0.9rem, 70px);
}

/* Carousel container */
.carousel-container {
  position: relative;
  max-width: 100%;
  max-height: max(40%, 40vh);
  margin: auto;
}

/* Hide the images by default */
.carousel-slide img {
  display: none;
  max-width: 100%;
  max-height: 100%;
}

.carousel-slide {
  height: 100%;
  width: 100%;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

#page005 {
  background-image: url("../imgs/bg_007_r.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  color: black;
}
#page005 .title-container .col {
  width: min(300px, 40%);
  margin-left: max(6%, 50px);
}
#page005 .title-container-2 {
  margin-top: 2rem;
}
#page005 .title-container-2 .col {
  width: min(400px, 55%);
  margin-left: max(6%, 50px);
}
#page005 .description-item {
  margin-top: max(2rem, 6%);
  margin-bottom: max(6rem, 16%);
}
#page005 .description-text span {
  margin-left: min(30vw, 40%);
}

.w75 {
  width: 75%;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

#prev-btn {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  text-align: center;
}

#next-btn {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 15%;
  text-align: center;
}

.fade-out {
  animation: fadeOutAnimation 1s forwards;
  /* The "forwards" value ensures the animation's final state is maintained */
  pointer-events: none;
}

.fade-in {
  animation: fadeInAnimation 1s forwards;
  /* The "forwards" value ensures the animation's final state is maintained */
}

/* Define the fade-out keyframes */
@keyframes fadeOutAnimation {
  from {
    opacity: 1;
    /* Start with full opacity */
  }
  to {
    opacity: 0;
    /* End with zero opacity */
  }
}
/* Define the fade-in keyframes */
@keyframes fadeInAnimation {
  from {
    opacity: 0;
    /* Start with zero opacity */
  }
  to {
    opacity: 1;
    /* End with full opacity */
  }
}
/* Media queries for fine-tuning on different screen sizes */
@media (max-width: 768px) {
  #book {
    aspect-ratio: 2430/4320;
    width: min(100vw, 56.25vh);
    position: relative;
  }
  .names-labels {
    margin-top: min(2rem, 2vh);
  }
  .title-svg {
    width: auto;
    height: max(10vh, 130px);
  }
  .subtitle-labels {
    line-height: min(2.5rem, 2.5vh);
    margin-top: max(1.5rem, 1.5vh);
  }
  .fs-2 {
    font-size: min(2.2rem, 2.2vh);
  }
  .date-labels {
    margin-top: min(2rem, 5vh);
  }
  .dates-svg {
    width: auto;
    height: max(12vh, 180px);
  }
  .msg-text {
    margin-top: max(2rem, 30px);
    font-size: min(2rem, 2vh);
    z-index: -1;
  }
  .msg-text span {
    width: max(300px, 85vw);
  }
  #page001 .subtitle-labels {
    line-height: min(3rem, 4vh);
    margin-top: max(1.5rem, 1.5vh);
  }
  #page002 {
    --divider-height: 1.8rem;
  }
  #page002 .title-container .col {
    width: min(230px, 55%);
    margin-right: max(5%, 25px);
  }
  #page002 .itinerario-titulo {
    padding-bottom: calc(0.8 * var(--divider-height));
    margin-bottom: calc(0.2 * var(--divider-height));
  }
  #page002 .itinerario-titulo .col {
    font-size: min(2.6rem, 3vh);
    line-height: max(2rem, 2.2vh);
  }
  #page002 #itinerario {
    width: 90%;
    margin-left: auto;
    padding-right: max(6%, 25px);
  }
  #page002 .itinerario-item {
    margin-bottom: 0.6rem;
  }
  #page003 #menu {
    width: 90%;
    margin-left: max(5%, 30px);
    margin-right: max(4%, 25px);
    flex-wrap: wrap;
  }
  #page003 .title-svg {
    height: max(8vh, 100px);
  }
  #page003 .title-container .col {
    width: min(300px, 40%);
    margin-left: max(5%, 30px);
  }
  #page003 .menu-description {
    padding: 0.4rem;
  }
  #page003 .title-container-2 {
    margin-top: 1rem;
  }
  #page003 .title-container-2 .col {
    width: min(300px, 65%);
    margin-left: max(5%, 30px);
  }
  #page003 .confirmation-text {
    font-size: min(1rem, 30px);
    line-height: min(1.5rem, 50px);
    padding-left: max(5%, 30px);
    padding-right: max(4%, 25px);
  }
  #page003 .confirmation-text span {
    font-size: min(1.4rem, 25px);
    font-weight: bold;
  }
  #page003 .btn {
    margin-top: 0.3rem;
  }
  #page004 .title-container .col {
    width: min(300px, 55%);
    margin-right: max(5%, 30px);
  }
  #page004 .description-text {
    font-size: 1rem;
    line-height: 1.3rem;
    padding-left: 1.5rem;
    padding-right: 0.7rem;
  }
  #page004 .description-icon {
    padding-left: 0.6rem;
    padding-right: max(5%, 30px);
    width: 20%;
  }
  #page004 .btn {
    font-size: 1rem;
    margin-top: 1rem;
  }
  #page005 .description-item {
    margin-top: max(2rem, 5vh);
    margin-bottom: max(3rem, 5vh);
  }
  #page005 .description-text {
    font-size: min(1.2rem, 50px);
    line-height: min(1.8rem, 30px);
  }
}
.pulse-anim {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    background-color: rgba(255, 204, 204, 0.1215686275);
    /* Initial color */
  }
  50% {
    background-color: #d39090;
    /* Pulse color */
  }
  100% {
    background-color: rgba(255, 204, 204, 0.1215686275);
    /* Return to initial color */
  }
}
.itinerario-item a {
  text-decoration: none;
  color: black;
}

#progress-bar-container {
  display: flex;
  flex-direction: column;
  /* Changed to column to stack progress bar and button */
  justify-content: center;
  /* Centers content vertically */
  align-items: center;
  /* Centers content horizontally */
  min-height: 100vh;
  /* Ensures the body takes up the full viewport height */
  min-width: 100vw;
  background-color: #f1cda9;
  position: absolute;
}

.progress-container {
  width: 80%;
  /* Takes up 80% of the screen width */
  max-width: 500px;
  /* Limits the maximum width on larger screens */
  height: 20px;
  background-color: #e9ecef;
  /* The light gray track of the bar */
  border-radius: 10px;
  /* Applies rounded corners to the container */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  /* Gives it a slight inner shadow for depth */
  overflow: hidden;
  /* Ensures the inner bar respects the rounded corners */
}

/* The actual progress bar that fills the container */
.progress-bar {
  height: 100%;
  width: 0%;
  /* Initial width is now 0% to start */
  background: linear-gradient(to right, #63353f, #b98a9e);
  /* A nice gradient fill */
  border-radius: 10px;
  /* Applies rounded corners to the progress bar itself */
  /* Add a transition for a smooth animation effect when the width changes */
  transition: width 0.4s ease;
}

/* Styling for the toast notification */
#safari-toast {
  position: fixed;
  top: 75vh;
  width: 100vw;
  max-width: 100vw;
  word-wrap: break-word;
  background-color: #5a0b0b;
  color: white;
  padding: 15px 55px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: 1000;
  font-size: 14px;
}

#safari-toast.show {
  opacity: 1;
  visibility: visible;
}

/*# sourceMappingURL=index.css.map */