:root {
  --wrapper_image: url("");
  --experience-animation-display: none;
  --experience-warpper-flip-display: none;
  --experience-start-btn-display: none;
  --experience-canvas-display: none;
  --brand_image: url("");
  --wrapper-open-gift-page: block;
  --greetingcard_back_image: "";
  --experience-greetingcard-dsiplay: none;
}

svg {
  filter: drop-shadow(0 0 5px grey);
}

.gift-card-image {
  max-width: 50%;
  z-index: 2;
  opacity: 1;
}

/* Main content */

.section-main-content {
  z-index: 1;
  width: 100%;
  margin-top: 4em;
  min-height: auto;
}

.section-main-content__div {
  height: 100px;
  width: 100%;
}

.main-content {
  margin: 0px auto;
  z-index: 1;
  max-width: 1200px;
}

@media (max-width: 780px) {
  .main-content {
    width: 100%;
  }
}

.main-content__div {
  position: relative;
  top: -5.5em;
}

.preview__page {
  display: grid;
  grid-template-rows: repeat(2, auto);
  gap: 2em;
  background: white;
  border-radius: 3px;
  box-shadow: 0 0px 12px 0px #354a51;
  margin: 0 3em;
  padding: 3em;
}

@media (max-width: 500px) {
  .preview__page {
    margin: 0px;
    border-radius: 0px;
    box-shadow: none;
    padding: 0px;
  }
}

.experience-page__back-replay-btn {
  padding: 0px 1em;
}

.back-btn__wrapper {
  float: left;
}

.back-btn__wrapper__div {
  display: grid;
  justify-items: center;
}

.back-btn__wrapper__div button {
  position: relative;
  background: none;
  outline: none;
  width: 65px;
  height: 65px;
  border: none;
  text-transform: uppercase;
  font-family: var(--secondary-medium-font), georgia, serif;
  font-size: 1rem;
}

.back-btn__wrapper__div button::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: -0.25em;
  width: 10px;
  height: 10px;
  background: none;
  border-left: 3px solid var(--primary-color);
  border-bottom: 3px solid var(--primary-color);
  border-top: transparent;
  border-right: transparent;
  transform: rotate(45deg);
}

.replay-btn__wrapper {
  float: right;
  margin-right: 1em;
}

.replay-btn__wrapper__div {
  display: grid;
  justify-items: center;
}

.replay-btn {
  position: relative;
  background: none;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border-top: 5px solid var(--primary-color);
  border-right: 5px solid transparent;
  border-bottom: 1px solid var(--primary-color);
  border-left: 5px solid var(--primary-color);
  text-transform: uppercase;
  font-family: var(--secondary-medium-font), georgia, serif;
  font-size: 1rem;
  outline: none;
}

.replay-btn::before {
  content: "";
  position: absolute;
  top: 0px;
  right: -10px;
  width: 0px;
  height: 0px;
  border-top: 10px solid var(--primary-color);
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: rotate(-45deg);
}
.replay-btn:focus {
  outline: none;
}
/* Experience */
.experience__wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  display: grid;
  place-items: center;
  -webkit-box-align: center;
  overflow: hidden;
}

@media (max-width: 600px) {
  .experience__wrapper {
    width: auto;
  }
}
/* @media (max-width: 550px) {
    .experience__wrapper {
        width: 500px;
    }
} */
@media (max-width: 500px) {
  .experience__wrapper {
    height: 400px;
    width: 450px;
    margin: 0px auto;
  }
}
@media (max-width: 450px) {
  .experience__wrapper {
    width: 400px;
  }
}
@media (max-width: 400px) {
  .experience__wrapper {
    width: 350px;
  }
}
@media (max-width: 350px) {
  .experience__wrapper {
    width: 300px;
  }
}

@media (max-width: 300px) {
  .experience__wrapper {
    width: 250px;
  }
}

.gift-experience__animation {
  margin: 0px auto;
  width: 100%;
  display: var(--experience-animation-display);
}

.experience-start__btn {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(20, 160, 179, 0.19);
  z-index: 98;
}

.experience__start__btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #14a0b3;
  border: none;
  outline: none;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  transition: transform 0.3s ease-in;
}

.experience__start__btn::before {
  content: "";
  width: 0px;
  height: 0px;
  border-top: 25px solid transparent;
  border-right: none;
  border-bottom: 25px solid transparent;
  border-left: 37.5px solid rgb(45, 45, 45);
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 12.5px);
  transition: transform 0.2s ease-in 0s;
}

.experience__start__btn:hover {
  transform: scale(0.9);
}

/* .experience__start__btn::before {
    transform: scale(0.9);
} */

.canvas__div__item {
  display: var(--experience-canvas-display);
  -webkit-box-align: start;
  place-items: start center;
  width: 100%;
  height: 100vh;
  text-align: center;
}

.animated-giftcard__wrapper {
  position: relative;
  top: 30%;
  z-index: 2;
}

.animated-giftcard__wrapper img {
  opacity: 1;
  max-width: 50%;
  z-index: 2;
}
#myCanvas {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.greeting-message-without-card {
  text-align: center;
  padding: 0 10px;
}
.greeting-message-without-card h3 {
  font-family: var(--secondary-bold-font);
}
.greeting-message-without-card p {
  white-space: pre-line;
  font-family: var(--primary-font);
}

@media (max-width: 500px) {
  .animated-giftcard__wrapper {
    top: 20%;
  }
}