* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  display: flex;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  background-color: #EBD2AD;
  background-image: url("../assets/background.webp");
  background-size: cover;
  overflow-x: hidden;
  overflow-y: hidden;
}

main {
  width: 73.125rem;
  position: relative;
}

main .loader img {
  height: 16rem;
  width: 16rem;
}

main .language {
  background-color: transparent;
  border: none;
  outline: none;
  position: absolute;
  width: 7.1875rem;
  height: auto;
  right: 0rem;
  top: 4.375rem;
}

main .language:hover {
  cursor: pointer;
}

main .picture {
  display: flex;
  height: 52rem;
  width: 100%;
  position: relative;
  margin-top: 28.75rem;
  padding-left: 6.25rem;
}

main .picture .picture-main .house {
  position: relative;
  height: 52rem;
  width: 80.62rem;
  z-index: 1;
}

main .picture .frame-box {
  position: absolute;
  left: -1.25rem;
  top: -19.75rem;
  z-index: 4;
  width: 41.31rem;
  height: 49.31rem;
  z-index: 4;
}

main .picture .frame-box .frame {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: relative;
  z-index: 4;
}

main .picture .frame-box .pin-white {
  position: absolute;
  left: 2.12rem;
  top: 4.5rem;
  z-index: 5;
}

main .picture .frame-box video {
  width: 32.8rem;
  height: 32.8rem;
  position: absolute;
  left: 4.12rem;
  top: 4.5rem;
  z-index: 3;
  transform: rotate(-7.5deg);
}

main .picture .name {
  position: absolute;
  left: 35.9375rem;
  top: -14.5rem;
  height: 24.6875rem;
  width: 43.75rem;
  z-index: 2;
}

main .picture .name-top {
  position: absolute;
  left: 34.1875rem;
  top: -16.875rem;
  height: 2.5rem;
  width: 21.5625rem;
  z-index: 2;
}

main .picture .pine-branch {
  height: 35.93rem;
  width: 25rem;
  position: absolute;
  top: 2.75rem;
  left: -12.68rem;
  z-index: 5;
  pointer-events: none;
  transform: translateX(-50%);
}

main .picture .glasses {
  height: 40.5rem;
  width: 37.5rem;
  position: absolute;
  top: 29.06rem;
  left: -20rem;
  z-index: 6;
}

main .picture .brown-ribbon {
  height: 9.06rem;
  width: 35.25rem;
  position: absolute;
  top: 41.12rem;
  left: -2.18rem;
  z-index: 5;
}

main .picture .fabric {
  height: 5.87rem;
  width: 80.62rem;
  position: absolute;
  top: 44.68rem;
  left: 8.75rem;
  z-index: 4;
}

main .picture .leaves {
  height: 16.06rem;
  width: 17.87rem;
  position: absolute;
  top: 50.938rem;
  left: -11.75rem;
  z-index: 4;
}

main .picture .footsteps {
  height: 10.93rem;
  width: 5.5rem;
  position: absolute;
  top: -20.62rem;
  left: -9.5rem;
}

main .picture .pin-3 {
  height: 6.93rem;
  width: 4.25rem;
  position: absolute;
  top: -8.37rem;
  left: -5.68rem;
}

main .picture .play-button {
  height: 14.5rem;
  width: 14.5rem;
  position: absolute;
  left: -6.5rem;
  top: -3.25rem;
  z-index: -1;
}

main .picture .buttons {
  height: 13.125rem;
  width: 11.56rem;
  position: absolute;
  top: 2.3rem;
  right: -8.06rem;
  z-index: 2;
  transform: translateX(50%);
}

main .picture .scroll-active-right {
  animation: 1s linear 0s forwards slideRight;
}

main .picture .scroll-active-left {
  animation: 1s linear 0s forwards slideLeft;
}

@keyframes slideRight {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

main .picture .envelope {
  height: 57.18rem;
  width: 58.31rem;
  position: absolute;
  top: 25.12rem;
  left: -16.68rem;
  z-index: -1;
}

main .picture .text {
  height: 39.81rem;
  width: 63.81rem;
  position: absolute;
  top: 45.81rem;
  left: -2rem;
  z-index: 4;
}

main .picture .pin-4 {
  height: 6.93rem;
  width: 4.25rem;
  position: absolute;
  top: 47.37rem;
  left: 54.5rem;
  z-index: 4;
}

main .picture .chamomile1 {
  height: 13.81rem;
  width: 12.62rem;
  position: absolute;
  top: 71.25rem;
  left: 3.37rem;
  z-index: 4;
  transform: translateX(-50%);
}

main .picture .butterfly {
  height: 13.87rem;
  width: 14.5rem;
  position: absolute;
  top: 71.87rem;
  left: 0.81rem;
  z-index: 5;
  transform: translateX(50%);
}

main .picture .flower {
  height: 23rem;
  width: 23.5rem;
  position: absolute;
  top: 44.37rem;
  left: 61.93rem;
  z-index: 5;
  transform: translateX(50%);
}

main .picture .branch {
  height: 13.43rem;
  width: 10.62rem;
  position: absolute;
  top: 47.5rem;
  left: 80.31rem;
  z-index: 4;
}

main .picture .pixel {
  height: 26.31rem;
  width: 26.31rem;
  position: absolute;
  top: 61.68rem;
  left: 52.31rem;
  z-index: 3;
  transform: translateX(-50%);
}

main .picture .melodia {
  height: 16.25rem;
  width: 16.12rem;
  position: absolute;
  top: 59.56rem;
  left: 69.68rem;
  z-index: 2;
}

main .picture .scrunchy {
  height: 19.68rem;
  width: 16.68rem;
  position: absolute;
  top: 67.81rem;
  left: 62.93rem;
  z-index: 3;
}

main .picture .chamomile2 {
  height: 8.81rem;
  width: 8.81rem;
  position: absolute;
  top: 85.75rem;
  left: -3.25rem;
  z-index: 3;
  transform: translateX(-50%);
}

main .picture .back-card {
  height: 73.12rem;
  width: 61.18rem;
  position: absolute;
  top: 11.25rem;
  left: 18.56rem;
  z-index: -1;
}

main .picture .red-ribbon {
  height: 19.62rem;
  width: 48.75rem;
  position: absolute;
  top: 67.5rem;
  left: 11.93rem;
  z-index: 2;
}

main .picture .heart-ribbon {
  height: 58.62rem;
  width: 23rem;
  position: absolute;
  top: 30.43rem;
  left: 30.25rem;
  z-index: 1;
}

main .menu {
  margin-top: 52.3rem;
  width: 100%;
  position: relative;
  height: 25.18rem;
  transition: .3s;
}

main .menu a, main .menu img {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

main .menu a {
  transition: .3s;
}

main .menu a:hover {
  transform: translate(0, -5%);
  transition: .3s;
}

main .menu .navbook {
  height: 25.25rem;
  width: 85.37rem;
  position: absolute;
  top: 0;
  left: -8.81rem;
  z-index: 3;
}

main .menu .milestones {
  height: 24.25rem;
  width: 14.25rem;
  position: absolute;
  top: -8.25rem;
  left: 1.87rem;
  z-index: 1;
}

main .menu .milestones img {
  position: absolute;
  top: 0;
  left: 0;
}

main .menu .stories {
  height: 19rem;
  width: 14.06rem;
  position: absolute;
  top: -4.21rem;
  left: 12.5rem;
  z-index: 2;
}

main .menu .stories img {
  position: absolute;
  top: 0;
  left: 0;
}

main .menu .gallery {
  height: 18.37rem;
  width: 13.56rem;
  position: absolute;
  top: -9rem;
  left: 19.75rem;
  z-index: 1;
}

main .menu .gallery img {
  position: absolute;
  top: 0;
  left: 0;
}

main .menu .my-granny {
  height: 20.37rem;
  width: 15.62rem;
  position: absolute;
  top: -4.87rem;
  left: 29.68rem;
  z-index: 2;
}

main .menu .my-granny img {
  position: absolute;
  top: 0;
  left: 0;
}

main .menu .remember {
  height: 20.75rem;
  width: 16.1rem;
  position: absolute;
  top: -10.25rem;
  left: 34.5rem;
  z-index: 1;
}

main .menu .remember img {
  position: absolute;
  top: 0;
  left: 0;
}

main .menu .map {
  height: 24.75rem;
  width: 15.06rem;
  position: absolute;
  top: -5rem;
  left: 45.75rem;
  z-index: 2;
}

main .menu .map img {
  position: absolute;
  top: 0;
  left: 0;
}

main .menu .nanas-words {
  height: 16.31rem;
  width: 13.31rem;
  position: absolute;
  top: -8.87rem;
  left: 57.43rem;
  z-index: 1;
}

main .menu .nanas-words img {
  position: absolute;
  top: 0;
  left: 0;
}

main .loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #EBD2AD;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

@media (max-width: 1366px) {
  html {
    font-size: 14px;
    overflow-x: hidden;
  }
  html body main .language {
    right: 0;
  }
  html body main .picture .butterfly {
    top: 29.97rem;
    left: 74.81rem;
  }
  html body main .picture .chamomile1 {
    left: -6.63rem;
  }
  html body main .picture .chamomile2 {
    left: -15.25rem;
  }
  html body main .picture .flower {
    top: 58.37rem;
    left: 53.93rem;
  }
  html body main .picture .branch {
    top: 43.5rem;
    left: 74.31rem;
  }
  html body main .picture .pixel {
    top: 49.68rem;
    left: 64.31rem;
    z-index: -1;
  }
  html body main .picture .melodia {
    top: 72.56rem;
    left: 69.68rem;
  }
  html body main .picture .fabric {
    display: none;
  }
  html body main .picture .brown-ribbon {
    display: none;
  }
  html body main .picture .envelope {
    display: none;
  }
  html body main .picture .back-card {
    display: none;
  }
  html body main .picture .red-ribbon {
    display: none;
  }
  html body main .picture .heart-ribbon {
    display: none;
  }
}

@media (max-width: 1150px) {
  html {
    font-size: 13px;
    overflow-x: hidden;
  }
}

@media (max-width: 980px) {
  html {
    font-size: 11px;
    overflow-x: hidden;
  }
  html body main .language {
    right: 5.5rem;
  }
}

@media (max-width: 820px) {
  html {
    font-size: 11px;
    overflow-x: hidden;
  }
  html body main {
    padding-top: 2.125rem;
  }
}

@media (max-width: 800px) {
  html {
    font-size: 32px;
    overflow-x: hidden;
  }
  html body {
    overflow-y: visible;
  }
  html body main {
    width: 24.375rem;
  }
  html body main .language {
    top: 1rem;
    right: 2rem;
    width: 3rem;
  }
  html body main .picture {
    display: flex;
    height: 1px;
    width: 100%;
    position: relative;
    margin-top: 0;
    padding-left: 0;
  }
  html body main .picture .picture-main {
    position: absolute;
    width: 24.5625rem;
    height: 16.0625rem;
    left: 2.875rem;
    top: 47.6875rem;
  }
  html body main .picture .picture-main .house {
    width: 100%;
    height: 100%;
  }
  html body main .picture .frame-box {
    width: 19.5625rem;
    height: 23.3125rem;
    left: 1.75rem;
    top: 2.375rem;
  }
  html body main .picture .frame-box .pin-white {
    width: 2.3125rem;
    height: 2.3125rem;
    left: 0.12rem;
    top: 1.5rem;
  }
  html body main .picture .frame-box video {
    width: 16rem;
    height: 16rem;
    position: absolute;
    left: 2rem;
    top: 1.5rem;
    z-index: 3;
    transform: rotate(-7.5deg);
  }
  html body main .picture .name-top {
    width: 14.8125rem;
    height: 1.6875rem;
    left: 4.5625rem;
    top: 1.5rem;
  }
  html body main .picture .name {
    width: 21.125rem;
    height: 11.9375rem;
    left: 1.8125rem;
    top: 21.875rem;
  }
  html body main .picture .pine-branch {
    position: absolute;
    width: 11.1875rem;
    height: 16.125rem;
    left: 16.3125rem;
    top: 0.6875rem;
  }
  html body main .picture .play-button {
    width: 3.75rem;
    height: 3.75rem;
    left: 19.375rem;
    top: 14.9375rem;
  }
  html body main .picture .melodia {
    width: 4.375rem;
    height: 4.375rem;
    left: 20.75rem;
    top: 17.5rem;
  }
  html body main .picture .buttons {
    width: 6.5625rem;
    height: 7.4375rem;
    left: -3.6856rem;
    top: 19.6875rem;
    transform: rotate(52.99deg);
  }
  html body main .picture .flower {
    width: 8.75rem;
    height: 8.4375rem;
    left: 18.6875rem;
    top: 28.0625rem;
  }
  html body main .picture .text {
    width: 27.75rem;
    height: 17.4325rem;
    left: -4.0625rem;
    top: 31.8125rem;
  }
  html body main .picture .chamomile1 {
    width: 7.125rem;
    height: 8.75rem;
    left: -1.625rem;
    top: 45.625rem;
  }
  html body main .picture .pixel {
    width: 9.5625rem;
    height: 9.5625rem;
    left: -4.0625rem;
    top: 54.375rem;
    z-index: -1;
  }
  html body main .picture .glasses {
    width: 21.5rem;
    height: 23.1875rem;
    left: -7.0625rem;
    top: 58.625rem;
  }
  html body main .picture .envelope {
    display: block;
    width: 28.0625rem;
    height: 27.6875rem;
    left: 3.9rem;
    top: 55.8125rem;
    z-index: -2;
    transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  html body main .picture .leaves {
    width: 6.25rem;
    height: 5.5625rem;
    left: 18.125rem;
    top: 62.3125rem;
    z-index: -1;
  }
  html body main .picture .branch {
    width: 5.375rem;
    height: 6.9375rem;
    left: -1.6875rem;
    top: 75.375rem;
    z-index: 6;
  }
  html body main .picture .scrunchy {
    width: 8.625rem;
    height: 10.0625rem;
    left: 8.6875rem;
    top: 72.25rem;
  }
  html body main .picture .back-card {
    display: block;
    width: 20.8125rem;
    height: 25rem;
    left: 5.125rem;
    top: 55.9375rem;
    z-index: -3;
  }
  html body main .picture .fabric {
    display: block;
    width: 22.5rem;
    height: 1.6875rem;
    left: 3.2125rem;
    top: 77.8125rem;
    z-index: -2;
    transform: rotate(22.67deg);
  }
  html body main .picture .brown-ribbon {
    display: none;
  }
  html body main .picture .pin-4 {
    display: none;
  }
  html body main .picture .heart-ribbon {
    display: none;
  }
  html body main .picture .red-ribbon {
    display: none;
  }
  html body main .picture .butterfly {
    display: none;
  }
  html body main .picture .chamomile2 {
    display: none;
  }
  html body .menu {
    margin: 0;
  }
  html body .menu .navbook {
    width: 30.625rem;
    height: 10.3150rem;
    left: -4.0625rem;
    top: 90.5519rem;
  }
  html body .menu .milestones {
    width: 4.9919rem;
    height: 9.5431rem;
    left: -0.2006rem;
    top: 87.5494rem;
  }
  html body .menu .milestones img {
    position: absolute;
    top: 0;
    left: 0;
  }
  html body .menu .stories {
    width: 4.925rem;
    height: 6.6481rem;
    left: 3.58rem;
    top: 88.9031rem;
  }
  html body .menu .stories img {
    position: absolute;
    top: 0;
    left: 0;
  }
  html body .menu .gallery {
    width: 4.7631rem;
    height: 6.4337rem;
    left: 6.2044rem;
    top: 87.3081rem;
  }
  html body .menu .gallery img {
    position: absolute;
    top: 0;
    left: 0;
  }
  html body .menu .my-granny {
    width: 5.4763rem;
    height: 7.1306rem;
    left: 9.3794rem;
    top: 88.8631rem;
  }
  html body .menu .my-granny img {
    position: absolute;
    top: 0;
    left: 0;
  }
  html body .menu .remember {
    width: 5.665rem;
    height: 7.265rem;
    left: 11.7075rem;
    top: 87rem;
  }
  html body .menu .remember img {
    position: absolute;
    top: 0;
    left: 0;
  }
  html body .menu .map {
    width: 5.2744rem;
    height: 8.6719rem;
    left: 15.6094rem;
    top: 89.0506rem;
  }
  html body .menu .map img {
    position: absolute;
    top: 0;
    left: 0;
  }
  html body .menu .nanas-words {
    width: 4.6694rem;
    height: 5.7231rem;
    left: 19.7944rem;
    top: 87.8175rem;
  }
  html body .menu .nanas-words img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media (max-width: 760px) {
  html {
    font-size: 30px;
    overflow-x: hidden;
  }
}

@media (max-width: 710px) {
  html {
    font-size: 28px;
    overflow-x: hidden;
  }
}

@media (max-width: 670px) {
  html {
    font-size: 26px;
    overflow-x: hidden;
  }
}

@media (max-width: 610px) {
  html {
    font-size: 22px;
    overflow-x: hidden;
  }
  html body main .language {
    width: 3.5rem;
    height: auto;
    top: 0.6rem;
    right: 1rem;
  }
  html body main .language img {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 535px) {
  html {
    font-size: 20px;
    overflow-x: hidden;
  }
}

@media (max-width: 475px) {
  html {
    font-size: 18px;
    overflow-x: hidden;
  }
  html body main .language {
    width: 4rem;
    height: auto;
  }
}

@media (max-width: 430px) {
  html {
    font-size: 16px;
    overflow-x: hidden;
  }
}

@media (max-width: 380px) {
  html {
    font-size: 14px;
    overflow-x: hidden;
  }
  html body main .language {
    width: 60px;
    height: auto;
  }
}

@media (max-width: 330px) {
  html {
    font-size: 11px;
    overflow-x: hidden;
  }
}
/*# sourceMappingURL=style.css.map */