/* Font Family Reference
font-family: 'Adamina', serif;
font-family: 'Alegreya Sans SC', sans-serif;
font-family: 'Alegreya SC', serif;
font-family: 'MonteCarlo', cursive;
font-family: 'Rochester', cursive;
font-family: 'Updock', cursive; 
*/

@font-face {
  font-family: "Adamina";
  src: url("./Resources/fonts/Adamina-Regular.ttf");
}

@font-face {
  font-family: "Alegreya Sans SC";
  src: url("./Resources/fonts/AlegreyaSansSC-Regular.ttf");
}

@font-face {
  font-family: "Alegreya SC";
  src: url("./Resources/fonts/AlegreyaSC-Regular.ttf");
}

@font-face {
  font-family: "MonteCarlo";
  src: url("./Resources/fonts/MonteCarlo-Regular.ttf");
}

@font-face {
  font-family: "Rochester";
  src: url("./Resources/fonts/Rochester-Regular.ttf");
}

@font-face {
  font-family: "Updock";
  src: url("./Resources/fonts/Updock-Regular.ttf");
}

:root {
  --bg-1: #fffcf8;
  --bg-2: #fbf1df;
  --border-1: #d8b04241;
  --text-1: #b17a2b;
  --text-white: #ffffffbb;
  --page-5-bg: #fff8f8;
  --page-5-text: #f58021;
  --page-6-bg: #ffffff;
  --page-7-bg: #01182e;
  --page-7-text-primary: #b7d4ff;
  --page-7-text-secondary: #ffffff;
  --text-gold-from: #a9800d;
  --text-gold-to: #d8b042;
}

html {
  font-size: 12px;
}

body {
  margin: 0;
  padding: 0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
  /* cursor: url(Resources/icon/cursor.png), auto; */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.body-container {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.music-control {
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 1;
  margin: 0;
}

a {
  /* cursor: url(Resources/icon/location.png), auto; */
  color: inherit;
  text-decoration: none;
}

.music-control button {
  border: none;
  background-color: var(--bg-2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: transform 0.5s;
}

.music-control button:hover {
  animation-duration: 5s;
  transform: scale(1.2);
}

.music-control img {
  height: 14px;
  margin: 10px;
  opacity: 30%;
}

.page-1 .gold-text,
.page-2 .gold-text,
.page-3 .gold-text,
.page-4 .gold-text,
.page-5 .gold-text,
.page-7 .gold-text {
  background: radial-gradient(var(--text-gold-from), var(--text-gold-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-1,
.page-2,
.page-3,
.page-4,
.page-5,
.page-6,
.page-7 {
  position: relative;
  width: 100%;
  display: flex;
}

.page-1,
.page-4,
.page-5,
.page-6,
.page-7 {
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.page-3 {
  z-index: -100;
  height: 50vh;
  align-items: center;
  justify-content: center;
}

.page-2 {
  height: 70vh;
  align-items: center;
  justify-content: end;
}

.page-1,
.page-2,
.page-3,
.page-4 {
  background-color: var(--bg-1);
}

.page-5 {
  background-color: var(--page-5-bg);
  flex-direction: column;
  color: var(--page-5-text);
}

.page-7 {
  background: rgb(0, 10, 19);
  background: linear-gradient(
    180deg,
    rgba(0, 10, 19, 1) 0%,
    rgba(8, 53, 99, 1) 100%
  );
  flex-direction: column;
  color: var(--page-7-text-primary);
  z-index: 2;
}

.page-1 .bg-img {
  max-height: 90%;
  opacity: 50%;
  transform-origin: 50% 49%;
  animation: rotation 60s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.page-1 {
  position: relative;
}

.page-1 .text-container {
  position: absolute;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  background-color: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-1);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid var(--border-1);

  /* padding: 0 10rem; */
}

.page-1 .text-container h1:nth-child(1),
.page-1 .text-container h1:nth-child(3) {
  position: absolute;

  margin: 0px;
  padding: 0px;
  margin-right: 1.5rem;
  margin-left: 1.1rem;
  font-family: "MonteCarlo", cursive;
  font-weight: 400;
}

.page-1 .text-container h1:nth-child(1) {
  top: 1rem;
  left: 4rem;
  font-size: 9rem;
}

.page-1 .text-container h1:nth-child(3) {
  bottom: 1rem;
  right: 4rem;
  font-size: 8rem;
}

.page-1 .text-container h1:nth-child(2) {
  position: absolute;
  font-size: 18rem;
  margin: 0px;
  top: 0rem;
  left: 33%;
  padding: 0px;
  font-family: "Updock", cursive;
  font-weight: 200;
  opacity: 15%;
  padding: 0;
}

.page-2 {
  flex-direction: column;
  text-align: center;
  color: var(--text-1);
  font-size: 2.6rem;
  font-family: "Alegreya SC", serif;
}

.page-2 img {
  max-width: 80%;
  width: 700px;
}

.page-2 p {
  max-width: 90%;
  margin-top: 30px;
}

.page-3 img {
  width: 40%;
}

.page-3 span {
  width: 50%;
}

.page-3-phone-img-1,
.page-3-phone-img-2 {
  display: inline;
  position: absolute;
  width: 30%;
  overflow: visible;
  z-index: 1000;
}

.page-3-phone-img-1 {
  top: 140vh;
  left: -15%;
}

.page-3-phone-img-2 {
  top: 190vh;
  right: -15%;
}

.page-3-phone-img-1 {
  animation: rotation-page-3-phone-1 55s infinite linear;
}

.page-3-phone-img-2 {
  animation: rotation-page-3-phone-2 55s infinite linear;
}

@keyframes rotation-page-3-phone-1 {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes rotation-page-3-phone-2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.page-3 p {
  position: absolute;
  width: 50%;
  text-align: center;
  font-size: 3rem;
  color: var(--text-1);
  font-family: "Alegreya SC", serif;
  z-index: 1;
}

.page-4 {
  flex-direction: column;
  text-align: center;
  color: var(--text-1);
  font-size: 2.6rem;
  font-family: "Alegreya SC", serif;
  padding: 0;
  margin: 0;
}

.page-4 h1 {
  font-family: "MonteCarlo", cursive;
  font-size: 11rem;
  font-weight: 400;
  padding: 2vw 100px;
  margin: -2vw auto -2vw auto;
  line-height: 15rem;
}

.page-4 p:nth-child(2),
.page-4 p:nth-child(5) {
  margin: 0vw auto 0vw auto;
}

.page-4 p:nth-child(3) {
  font-family: "Updock", cursive;
  font-size: 20.8rem;
  opacity: 20%;
  padding: 0;
  margin-top: -100px;
  margin-bottom: -60px;
}

/* Page 5 */

.page-5 .holud-flowers {
  max-width: 100%;
}

.page-5 .holud-flowers img:nth-child(1) {
  z-index: 2;
}

.page-5 .holud-flowers img:nth-child(2) {
  z-index: 1;
  position: absolute;
  width: 12rem;
  height: auto;
  z-index: 1;
  opacity: 90%;
  top: -20rem;
  right: 5rem;
  transform-origin: bottom center;
  animation: flower-animate-2 5s infinite linear;
  transform: scaleY(-1);
}

@keyframes flower-animate-2 {
  0% {
    transform: scaleY(-1) rotate(0deg);
  }
  25% {
    transform: scaleY(-1) rotate(2deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  75% {
    transform: scaleY(-1) rotate(-2deg);
  }
  100% {
    transform: scaleY(-1) rotate(0deg);
  }
}

.page-5 .holud-flowers-2 {
  z-index: 10;
  max-width: 100%;
  transform: scaleX(-1);
}

.page-5 .flower-container img:nth-child(1) {
  position: absolute;
  width: 12rem;
  height: auto;
  z-index: 1;
  opacity: 90%;
}

.page-5 .flower-container img:nth-child(1) {
  bottom: 0rem;
  left: 5rem;
  animation: flower-animate-1 10s infinite ease-in-out;
  transform-origin: bottom center;
}

@keyframes flower-animate-1 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.page-5 .heading h1,
.page-6 .heading h1,
.page-7 .heading h1 {
  font-size: 8.5rem;
  font-weight: 400;
  margin: 0;
  padding: 20px 0px;
  text-align: center;
  line-height: 10rem;
}

.page-5 .heading h1 {
  font-family: "Rochester", cursive;
}

.page-5 .date-time,
.page-6 .date-time,
.page-7 .date-time {
  width: 83.3rem;
  max-width: 90%;
  font-family: "Adamina", serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-5 .date-time .day,
.page-5 .date-time .time,
.page-6 .date-time .day,
.page-6 .date-time .time,
.page-7 .date-time .day,
.page-7 .date-time .time {
  text-align: center;
  font-size: 3.5rem;
  padding: 0px 50px;
}

.page-5 .date-time .day,
.page-5 .date-time .time {
  border-top: 2px solid var(--page-5-text);
  border-bottom: 2px solid var(--page-5-text);
}

.page-5 .date-time .date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-5 .date-time .date p:nth-child(1),
.page-5 .date-time .date p:nth-child(3),
.page-6 .date-time .date p:nth-child(1),
.page-6 .date-time .date p:nth-child(3),
.page-7 .date-time .date p:nth-child(1),
.page-7 .date-time .date p:nth-child(3) {
  font-size: 2.6rem;
  margin: 20px;
}

.page-5 .date-time .date p:nth-child(2),
.page-6 .date-time .date p:nth-child(2),
.page-7 .date-time .date p:nth-child(2) {
  margin: 0px;
  font-size: 10rem;
}

.page-5 .address,
.page-6 .address,
.page-7 .address {
  font-family: "Alegreya Sans SC", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-5 .address h3,
.page-6 .address h3,
.page-7 .address h3 {
  margin-bottom: -10px;
  font-size: 4rem;
  font-weight: 400;
}

.page-5 .address p,
.page-6 .address p,
.page-7 .address p {
  font-size: 2rem;
  max-width: 95%;
  text-align: center;
  text-transform: lowercase;
  z-index: 0;
  transition: z-index 1s ease;
}

.page-5 .address p:hover {
  z-index: 1;
  background-color: var(--page-5-bg);
}

/* Page 6 */

.break-orange-white {
  width: 100%;
  height: 30vh;
  transform: scale(1.05);
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 248, 248, 1) 0%,
    rgba(238, 145, 107, 1) 100%
  );
}

.break-ombre-blue {
  width: 100%;
  height: 50vh;
  transform: scale(1.05);
  background: rgba(0, 12, 23, 1);
  background: linear-gradient(
    180deg,
    rgba(0, 12, 23, 1) 0%,
    rgba(0, 10, 19, 1) 100%
  );
}

.page-6 {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(238, 145, 107, 1) 0%,
    rgba(164, 73, 114, 1) 20%,
    rgba(50, 26, 60, 1) 50%,
    rgba(0, 12, 23, 1) 100%
  );
  flex-direction: column;
  color: var(--text-white);
}

.page-6 .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-6 .heading h1 {
  font-family: "MonteCarlo", cursive;
}

.page-6 .date-time .day,
.page-6 .date-time .time {
  border-top: 2px solid var(--text-white);
  border-bottom: 2px solid var(--text-white);
}

.page-6 .date-time .date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-6 .flower-container {
  position: absolute;
  top: -15rem;
  z-index: 10;
}

.page-6 .flower-top {
  position: relative;
  width: 100vw;
  max-height: 50rem;
  z-index: 10;
}

.page-6 .lamp {
  position: absolute;
  transform-origin: 50% 0%;
  z-index: 1;
}

.page-6 .lamp-1 {
  max-width: 7%;
  bottom: 0%;
  right: 20%;
  animation: lamp-anim-1 5s infinite ease-in-out;
}

.page-6 .lamp-2 {
  max-width: 4%;
  bottom: 10%;
  left: 22%;
  animation: lamp-anim-2 4s infinite ease-in-out;
}

.page-6 .side-flower-1 {
  max-width: 300px;
  position: absolute;
  bottom: 0;
  right: 2rem;
  z-index: 2;
}

@keyframes lamp-anim-1 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  /* 50% {
    transform: rotate(0deg);
  } */
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes lamp-anim-2 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  /* 50% {
    transform: rotate(0deg);
  } */
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Page 7 */

.page-7 .heading h1 {
  font-family: "MonteCarlo", cursive;
}

.page-7 .date-time .day,
.page-7 .date-time .time {
  color: var(--page-7-text-secondary);
  border-top: 2px solid var(--page-7-text-primary);
  border-bottom: 2px solid var(--page-7-text-primary);
}

.page-7 .date-time .date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-7 .date-time .date p:nth-child(1),
.page-7 .date-time .date p:nth-child(3) {
  color: var(--page-7-text-secondary);
}

.page-7 .stars {
  max-width: 60%;
  min-height: 55%;
  max-height: 60%;
  position: absolute;
  z-index: -1;
  overflow: hidden;
}

.page-7 .stars-1 {
  bottom: 0%;
  left: 0%;
  animation: star-anim 6s infinite ease-in-out;
}

.page-7 .stars-2 {
  bottom: 0%;
  right: 0%;
  animation: star-anim 3s infinite ease-in-out;
}
.page-7 .stars-3 {
  top: 0%;
  right: 0%;
  animation: star-anim 5s infinite ease-in-out;
}

.page-7 .stars-4 {
  top: 0%;
  left: 0%;
  animation: star-anim 4s infinite ease-in-out;
}

@keyframes star-anim {
  0% {
    opacity: 30%;
  }
  25% {
    opacity: 100%;
  }
  50% {
    opacity: 30%;
  }
  75% {
    opacity: 100%;
  }
  100% {
    opacity: 30%;
  }
}

/* Break config */

.break-golden-orange {
  width: 100%;
  height: 30vh;
  background: rgb(255, 252, 248);
  background: linear-gradient(
    180deg,
    rgba(255, 252, 248, 1) 0%,
    rgba(255, 248, 248, 1) 100%
  );
}