canvas { touch-action: none; }

@font-face {
  font-family: 'DMMono-Light';
  font-style: normal;
  font-weight: 300;
  src:
  url('assets/fonts/DMMono-Light.woff2') format('woff2'),
  url('assets/fonts/DMMono-Light.woff') format('woff'),
  url('assets/fonts/DMMono-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'BaiJamjuree-Light';
  font-style: normal;
  font-weight: 300;
  src:
    url('assets/fonts/BaiJamjuree-Light.woff2') format('woff2'),
    url('assets/fonts/BaiJamjuree-Light.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'BaiJamjuree';
  font-style: normal;
  font-weight: 400;
  src:
    url('assets/fonts/BaiJamjuree-Regular.woff2') format('woff2'),
    url('assets/fonts/BaiJamjuree-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Atype';
  font-style: normal;
  font-weight: 400;
  src:
    url('assets/fonts/ATYPE\ 2B.otf') format('opentype'),
    url('assets/fonts/ATYPE 2B.woff') format('woff');
  font-display: swap;
}




html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color:  #fff8e8;

}


/*Overlay Loader*/
#overlay {
  margin: 0;
  position: absolute;
  inset: 0;
  background-color: #951e20;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--fg);
  transition: transform 1s ease;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}
#overlay   h1{
    margin: 0;
    font-size: 10pt;
    font-family: 'DMMono-light', monospace;
    letter-spacing: 0.5pt;
}

/* Centered content */
.overlay-inner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width:70%;
  height: 100%;
}

/*Container 1: Image and captions*/
.container-1{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 30%;
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 0;
  opacity: 1;
  transition: fadeIn;
}
.container-1{
    margin-top: 10%
}
.overlay-inner .container-1 p {
    color:  #fff8e8;
    margin: 0;
    padding: 0;
    font-family: 'DMMono-Regular', monospace;
    font-size: .6rem;
}
.overlay-inner .container-1 .upper-caption{
  display: flex;
  flex-direction: row;
  width: 100%;
}
.overlay-inner .container-1 .upper-caption  p {
    padding-bottom: 5px;
    text-align: left;
}
.overlay-inner .container-1 .upper-caption .block{
  flex: 1;
}

.overlay-inner .container-1 img{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.overlay-inner .container-1 .lower-caption{
  display: flex;
  flex-direction: row;
  width: 100%;
}
.overlay-inner .container-1 .lower-caption  p {
    padding-top: 5px;
    text-align: right;
}
.overlay-inner .container-1 .lower-caption .block{
  flex: 1;
}

/*Container 2: Guest Name*/
.container-2{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 25%;
  margin: 0;
  padding: 0;
  text-align: left;
  color: #fff8e8;
}
.overlay-inner .container-2 .guest-name{
  width: 100%;
  margin: 0;
  padding: 0;
}
.overlay-inner .container-2 h1{
  margin: 0;
  padding: 0;
}
.overlay-inner .container-2 hr{
  border: 0.1px solid #fff8e8;
  width: 100%;
}

/*Container 3: Welcome Text and Open Button*/
.container-3{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  width: 100%;
  height: 30%;
  margin: 0;
  padding: 0;
  z-index: 0;
}
.container-3 .wellcome-text{
  width: 100%;
  margin: 0;
  padding: 0 0 1rem 0;
}
.container-3 .wellcome-text  h1{
    padding-top:3pt;
    color: #fff8e8;
}

/*helper classes for loader open button*/
#open-btn{
  background-color: #fff8e8;
  cursor: pointer; margin-bottom: 10px;
  height: 5vh;
  display: flex;
  justify-content: center; /* Centers h1 horizontally */
  align-items: center;
}
#open-btn h1{
  color: #951e20;
  text-align: center;
  font-family: 'DMMono', monospace;
  font-size: 10pt;
  letter-spacing: 0.5pt;
}
#open-btn .loader-base-color{
  color: #951f20;
}
#open-btn .loader-update-color{
  color: #951f20;
}
/* Progress bar container */
#overlay-progress {
  width: 100%;        
  height: 3px;  
  margin: 0;
  overflow: hidden;
}

/* The actual progress fill */
#overlay-progress-bar {
  width: 0%;
  height: 70%;
  background: #fff8e8;      /* neon green */
  transform-origin: left center;
  transition: width 0.15s ease-out;
}

#overlay.open {
transform: translate(0, -100%);
}
/*THREE JS CANVAS STYLES*/
/* App Canvas container */
#main-page {
    margin: 0;
    max-width: 500px;
    background: #fff8e8;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform 1s;
    overflow: hidden;
    z-index: 2;
    transform: translateY(0);
}

.wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width:100%;
  height: 100%;
}
.wrapper .container-1{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 70%;
  height: 30%;
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 0;
}
.wrapper .container-3{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 70%;
  height: 30%;
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 0;
}
.wrapper .container-3 .test-1{
  position: relative;
  width: 100%;
  height: 50%;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-upper-1{
  position: relative;
  width: 100%;
  height: 50%;
  z-index: 3;
  
  display: flex;
  justify-content:center;
  align-items:center;  
}
.test-upper-1 img{
  width: 50%;
  height: auto;
}
.test-upper-2{
  position: relative;
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: flex-start;
  align-items:center;  
  flex-direction: column;
  line-height: 12pt;
}
.test-upper-2 h3{
  text-align: center;
  margin: 0;
  width: 100%; 
  color: #473e26;
  font-family: 'BaiJamjuree', sans-serif;
  font-size: 10pt;
  font-kerning: none;
  letter-spacing: 0.5pt;
  
}
.test-1{
  position: relative;
  width: 100%;
  height: 50%;
  cursor: pointer;
  z-index: 3;
}
.test-2{
  position: relative;
  width: 100%;
  height: 50%;
  z-index: 3;

  display: flex;
  justify-content: flex-end;
  align-items:center;  
  flex-direction: column;
}
.test-2 a{
  text-decoration: none;
  width: 100%;
  z-index: 3;
}
#open-invitation { 
  background-color: #8d8b4f;
  width: 100%;
  height: 5vh;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  display: flex;
  justify-content: center; 
  align-items: center;  
  flex-direction: column;
  z-index: 3;
  
}

#open-invitation h1 {
  text-align: center;
  font-family: 'DMMono', monospace;
  font-size: 10pt;
  padding: 0;
  margin: 0;
  width: 100%; /* Retained */
  color: #fff8e8;
  letter-spacing: 0.5pt;
}

.test-2 .line{
  background-color: #8d8b4f;
  width: 100%;
  height: 1%;
  position: absolute;
  display: flex;
}




/*ANIMATION*/

/* Slide in captions from top */
.container-1 img,
.guest-name h1,
.container-1 .test-upper-1,
.container-1 .test-upper-2
.container-2 .guest-name hr{
  opacity: 0;
  transform: translateY(-20px);
  animation: slideDownFade 1s ease forwards;
}
#app { 
  z-index: 1; 
  width: 100%;
  height:  60vh;
  }

/* Canvas behavior */
canvas {
  touch-action: none;
}
.upper-caption .block p,
.lower-caption .block p,
.wellcome-text h1 {
  opacity: 0;
  transform: translateY(-20px);
  animation: slideDownFade 1s ease forwards;
  animation-delay: 0.2s;
}
/*
.container-3 {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: .25s;
}

.container-3 .wellcome-text,
#loader-status {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: .5s;
}
*/
/* Keyframes */
@keyframes overlay-progress-bar {
  from { width: 0; }
  to   { width: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}




#card-caption {
  bottom:0;
  position: absolute;
  display: flex;
  z-index: 100;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  margin: 0;
  font-size: 9pt;
  font-family: 'DMMono-light';
  color:#8d8b4f;
}
/*
#card-caption.visible {
  opacity: 1;
}

/*GETTING THE MAIN PAGE*//*
.get-back{
  position:relative;
  width: 100px;
  height: 20px;
  background: rgb(128, 128, 128);
  transform:translate(-50%,-50%);
  left: 50%;
  cursor: pointer;
  z-index: 99;
  text-align: center;
  font-family: 'DMMono-Regular';

}
*/

#page-two-wrapper {
    /*
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 500px;
    z-index: 20;
    overflow: hidden; 
    transition: opacity 0.5s;
    opacity: 0;
    pointer-events: none; */
    display: none;
    z-index: 0;
    opacity: 0;
}
#page-two-wrapper.show{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 500px;
  z-index: 20;
  overflow: hidden; 
  transition: opacity 0.5s;
  background-color: #fff8e8;
  animation: slideDown 1s ease forwards;
  z-index: 1;
  opacity: 1;
  transition: fadeIn 1s ease;
}
@keyframes slideDown {
  from {transform: translateY(100vh); }
  to   {transform: translateY(0); }
}


/*
.page-two-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    height: 100vh;
    background-color: #fff8e8;
}*/
.h1{
  animation: slideDownFade 1s ease forwards;
}

#section-zero{
  width: 100%;
  height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
#section-zero .page0-parent1 {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
#section-zero .page0-parent1 img{
  width: 40%;
  margin-bottom: 10%;
}
#section-zero .page0-parent1 .quotes{
  width: 100%;
  margin-bottom: 10%;
}
#section-zero .page0-parent1 h1{
  font-family: 'BaiJamjuree', sans-serif;
  font-size: 11.5pt;
  text-align: center;
  margin: 0;
  color: #473e26;
  padding-top: 2pt;
  letter-spacing: 0.5pt;
}


#section-one{
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  height: auto;
}
.page1-parent2{
  display: flex;
  width: 100%;
  height: auto;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  align-content: space-between;
  justify-content: center;
  padding: 10% 0;
}
.page1-parent2 h1{
  font-family: 'BaiJamjuree-Light', sans-serif;
  font-size: 25pt;
  letter-spacing: 1pt;
}
.page1-parent2 p{
  font-family: 'BaiJamjuree-Light', sans-serif;
  font-size: 15pt;
}
.page1-parent2 .box1{
  padding-bottom: 10%;
  display: flex;
  width: 80%;
  height: auto;
  flex-direction: row;
  align-items: flex-end;
}
.page1-parent2 .box1 .pic{
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  
}
.page1-parent2 .box1 .pic img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page1-parent2 .box1 .caption{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: flex-start;
  width: 50%;
  height: 100%;
  text-align: left;
  padding-left: 5%;
  color: #473e26;
}
.page1-parent2 .box1 .caption h1{
  font-family: 'DMMono-medium', monospace;
  margin: 0;
  padding-bottom: 5px;
}
.page1-parent2 .box1 .caption p{
    font-family: 'BaiJamjuree', sans-serif;
    font-size: 8pt;
    margin: 0;
    letter-spacing: 0.5pt;
    color: #473e26;
    font-weight: 600;
}

.page1-parent2 .box2{
  margin-top: 10%;
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.page1-parent2 .box2 .pic{
  width: 50%;
  height: auto;
  display: flex;
  align-content: flex-end;
}
.page1-parent2 .box2 .pic img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page1-parent2 .box2 .caption{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: flex-start;
  width: 50%;
  height: 100%;
  text-align: right;
  padding-right: 5%;
  color: #473e26;
}
.page1-parent2 .box2 .caption h4{
  text-align: right;
  font-family: 'DMMono-Light', monospace;
  font-weight: 100;
  font-size: 90pt;
  color: #e5d3b5;
  position:absolute;
  transform: translateY(-5%);

}
.page1-parent2 .box2 .caption h1{
  font-family: 'DMMono-Medium', monospace;
  margin: 0;
  padding-bottom: 5px;
}
.page1-parent2 .box2 .caption p{
    font-family: 'BaiJamjuree', sans-serif;
    font-size: 8pt;
    margin: 0;
    letter-spacing: 0.5pt;
    color: #473e26;
    font-weight: 600;
}



#section-two{
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    align-content: space-between;
    padding: 2rem;
    height: auto;
    margin: 0;
    padding: 0;
    color:  #473e26;
}

#section-two h1{
  font-family: 'DMMono-Medium', monospace;
  font-size: 25pt;
  margin: 0;
  letter-spacing: 1pt;
}
#section-two h2{
  font-family: 'DMMono-Medium', monospace;
  font-size: 20pt;
  margin: 0;
}
#section-two h3{
  font-family: 'BaiJamjuree', sans-serif;
  font-size: 11.5pt;
  font-kerning: none;
  margin: 0;
  letter-spacing: 0.5pt;
}
#section-two p{
  font-family: 'BaiJamjuree', sans-serif;
  font-size: 8pt;
  margin: 0;
  letter-spacing: 0.5pt;
  color: #473e26;
  font-weight: 600;
}

.page2-parent1{
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 0;
  margin-top: 10%;;
  width: 100%;
  margin-bottom: 10%;
}
.page2-parent2{
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 80%;
}
.page2-parent2 .date{
  width: 100%;
  margin: 0 100px;
}
.page2-parent2 .line{
  background-color: #8d8b4f;
  width: 100%;
  height: 2px;
  margin-bottom: 20px;;
  margin-top: 20px
}
.page2-parent2 .location{
  margin-bottom: 10px;
}
.page2-parent2 .address{
  margin: 0 10px;
}
.page2-parent2 .QR a{
  margin: 0;
  display: flex;
  justify-content: center;
}
.page2-parent2 .QR{
  margin: 0;
  display: flex;
  justify-content: center;
}
.page2-parent2 .QR img{
  width: 100px;
  height: 100px;
  margin-top: 15pt;
  margin-bottom: 10px;
}
.page2-parent2 .caption{
  width: 80%;
}

.page2-parent3{
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 80%;
  margin-top: 10%;
  margin-bottom: 10%;

}
.page2-parent3 .matrimony{
  width: 100%;
}
.page2-parent3 .matrimony h3{
  padding-bottom: 2pt;
}
.page2-parent3 .celebration{
  margin: 10px 0;
}
.page2-parent3 .celebration h3{
  padding-bottom: 2pt;
}
.page2-parent3 .notes{
  width: 70%;
  margin-top: 5%;
}

#section-three{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    flex-direction: column;
    height: auto;
    margin: 0;
    padding: 0;
    color:  #8d8b4f;
}
#section-three .box-1{
  width: 80%;
  margin-top: 10%;
}
#section-three .box-1 p{
  font-family:'BaiJamjuree', sans-serif;
  font-size: 11.5pt;
  letter-spacing: 0.5pt;
  margin: 0;
  color: #473e26;
}
#section-three .box2{
  width: 80%;
  margin-top: 10pt;
  margin-bottom: 10%;
}

#section-three .box2 h2{
  font-family: 'DMMono-Medium', monospace;
  font-size: 15pt;
  margin: 0;
  text-decoration: none;
  color: #473e26;
}

#section-four{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    flex-direction: column;
    height: auto;
    margin: 0;
    padding: 0;
    color:  #8d8b4f;
    background-color: #951e20;
}
#section-four .action-button{
  height: 40%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 10% 0;
  
}

#section-four .action-button  #go-up{
  background-color: #fff8e8;
  width: 80%;
  height: 5vh;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  display: flex;
  justify-content: center; 
  align-items: center;  
  flex-direction: column;
  z-index: 3;
  border: none;
}

#section-four .action-button  #go-up h1{
  width: 80%;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  color: #951e20;
  text-align: center;
  font-family: 'DMMono', monospace;
  font-size: 10pt;
  letter-spacing: 0.5pt;
}
#section-four .action-button .line{
  background-color: #fff8e8;
  width: 80%;
  height: 2px;
}
#section-four .logo{
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10%;
}
#section-four .logo img{
  width: 40%;
}
#section-four .copyright{
  height: auto;
  margin-bottom: 5%;
}
#section-four .copyright a{
  text-decoration: none;
  color:  #fff8e8;
  font-family: 'BaiJamjuree-Light', sans-serif;
  font-size: 7pt;
  padding: 0 3px;
}






@keyframes marquee-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(50%);
    }
}

.marquee-container {
  width: 100%;
  display: flex;
  justify-items: center;
  align-content: center;
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee-left 30s linear infinite;
}
.marquee-track > span {
  padding-right: 4rem;
  font-family: 'Atype';
  font-size: 44px;
  padding: 0;
  margin: 0;
  color: #e5d3b5
}
.marquee-container-right {
  width: 100%;
  display: flex;
  justify-items: center;
  align-content: center;
}
.marquee-track-right {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee-right 5s linear infinite;
}
.marquee-track-right > span {
  font-family: 'Atype';
  font-size: 44px;
  padding: 0;
  margin: 0;
  color: #e5d3b5
}
/* END LANDING */
/*NEW LANDING PAGE*/