body
{
  margin: 0;
  overflow-x: hidden;
}

.section1
{
  height: 100vh;
  width: 100vw;
  background-image: url('../img/bg.jpg');
  background-size: cover;
  animation-name: FadeIn;
  animation-duration: 2s;
}

@keyframes FadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.s1HeaderWrapper
{
  position: absolute;
  top: 50vh;
  left: 25vw;
  width: 50vw;
}

.s1HeaderWrapper svg
{
  animation-name: headerBeforeAnimation;
  animation-duration: 3s;
}


@keyframes headerBeforeAnimation {
  0% { opacity: 0;}
  99% { opacity: 0;}
  100% {opacity: 1;}
}

@media (max-device-width: 767px) {
  .s1HeaderWrapper
  {
    position: absolute;
    top: 50vh;
    left: 5vw;
    width: 90vw;
  }
}

.s1InteractionWrapper
{
  position: absolute;
  width: 2.5vw;
  bottom: 5vh;
  left: 45vw;
  text-align: center;
  animation-name: highlightarrow;
  animation-duration: 2s;
  animation-delay: 8s;
  animation-iteration-count: infinite;
  cursor: pointer;
}

@media (max-device-width: 767px) {
  .s1InteractionWrapper
  {
    left: 45vw;
    width: 10vw;
  }
}

@keyframes highlightarrow {
  0% {bottom: 6vh;}
  50% {bottom: 4vh;}
  100% {bottom: 6vh;}
}

.s1InteractionWrapper img
{
  animation-name: fadeinarrow;
  animation-duration: 5s;
  display: block;
  width: 100%;
}

@keyframes fadeinarrow {
  0% {opacity: 0;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

.section2
{
  height: 150vh;
  width: 100vw;
}

.section2 h2
{
  font-family: Dancing Script;
  color: #2F4858;
  margin: 0 auto;
  text-align: center;
  font-size: 4em;
  margin-top: 2em;
}

.section2 p
{
  font-family: Dancing Script;
  color: #2F4858;
  font-size: 2em;
  text-align: center;
  font-weight: bold;
}

.s2InteractionWrapper
{
  text-align: center;
  margin-top: 5em;
  animation-name: highlightgiftlink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  cursor: pointer;
}

@keyframes highlightgiftlink {
  0%{margin-top: 5em;}
  50%{margin-top: 7em;}
  100%{margin-top: 5em;}
}

.s2InteractionWrapper img
{
  width: 3vw;
}

@media (max-device-width: 767px) {
  .s2InteractionWrapper img
  {
    width: 5vw;
  }
}

/* GALLERY */
.wrapper {
  display: flex;
  width: 100%;
  max-width: 800px;
  height: 75%;
  max-height: 600px;
  perspective: 500px;
  transform-style: preserve-3d;
  transition: opacity 150ms ease-in-out;
  margin: 0 auto;
  margin-top: 6em;
}

.wrapper.loading {
  opacity: 0;
}

.destination {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: white;
  text-shadow: 0 0 6px #00080e;
  transition: all 150ms ease-out;
  font-family: Dancing Script;
}
.destination h1 {
  font-size: 2.5em;
  text-align: center;
}
.destination hr {
  height: 1px;
  background-color: white;
  border: none;
  width: 50px;
}
.destination p {
  font-size: 1.2em;
}
.destination button {
  border: none;
  background-color: #b71c1c;
  font-family: inherit;
  color: white;
  font-size: 1em;
  padding: 0.5em 1em;
  margin-top: 1em;
  border-radius: 2em;
  cursor: pointer;
}
.destination button:hover {
  background-color: #d32f2f;
}
.destination img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
}
.destination::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 100ms ease-in;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}
.destination.unfolded {
  flex: 8 1;
}
.destination.unfolded.front {
  transform: translateZ(20px);
}
.destination.unfolded.back {
  transform: translateZ(-20px);
}
.destination.unfolded.back::after {
  background: linear-gradient(to right, black 0%, white 25%, white 75%, black 100%);
  opacity: 0.5;
}
.destination.folded {
  flex: 1 8;
}
.destination.folded h1, .destination.folded hr, .destination.folded p, .destination.folded button {
  display: none;
}
.destination.folded::after {
  opacity: 0.6;
}
.destination.folded.right {
  transform: rotateY(-30deg) scaleX(1.16);
}
.destination.folded.right::after {
  background: linear-gradient(to left, white, black);
}
.destination.folded.left {
  transform: rotateY(30deg) scaleX(1.16);
}
.destination.folded.left::after {
  background: linear-gradient(to right, white, black);
}

.giftWrapper
{
  height: 70vh;
  width: 100vw;
  background-image: url('../img/bg.jpg');
  text-align: center;
  padding-top: 30vh;
  animation: FadeIn;
  animation-duration: 2s;
}

.giftContent
{
  width: 50vw;
  margin: 0 auto;
  border: 1px solid white;
  padding: 2em;
}

.giftWrapper h1
{
  font-family: Dancing Script;
  color: white;
  font-size: 6em;
}

.giftWrapper p
{
  font-family: Roboto;
  color: white;
  font-size: 1.2em;
}