@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Patrick+Hand&family=Comic+Neue:wght@400;700&family=Homemade+Apple&display=swap');

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #fff8fb;
  color: #222;
  font-family: 'Patrick Hand', cursive;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.music-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  border: 3px solid #222;
  border-radius: 999px;
  padding: 10px 16px;
  background: #ff9fc6;
  color: white;
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
}

/* PAGE 1 */
.page-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px 18px;
  background: #fff9fb;
}

.paper-texture {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    radial-gradient(#ff85bb 1px, transparent 1px),
    radial-gradient(#111 1px, transparent 1px);
  background-size: 95px 120px, 180px 170px;
  background-position: 10px 20px, 80px 100px;
}

.page-1-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 900px;
}

.main-title {
  margin: 0 0 38px;
  font-family: 'Gaegu', cursive;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 0.96;
  font-weight: 700;
}

.main-title span {
  text-decoration: underline;
  text-decoration-color: #71c5ec;
  text-decoration-thickness: 7px;
  text-underline-offset: 5px;
}

.open-word {
  border: 0;
  background: #f483b9;
  color: white;
  padding: 0 10px 3px;
  font-family: 'Gaegu', cursive;
  font-size: 0.9em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 -6px rgba(255, 255, 255, 0.25);
}

.mail-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-bottom: 32px;
}

.envelope {
  position: relative;
  width: min(410px, 78vw);
  height: min(255px, 49vw);
  margin: 0 auto;
  background: #fffef7;
  border: 6px solid #222;
  border-radius: 10px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.08);
}

.envelope::before,
.envelope::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 51%;
  height: 62%;
  border-top: 5px solid #222;
}

.envelope::before {
  left: 0;
  transform: skewY(28deg);
  transform-origin: bottom left;
}

.envelope::after {
  right: 0;
  transform: skewY(-28deg);
  transform-origin: bottom right;
}

.envelope-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: #f7f5b1;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 5px solid #222;
  z-index: 2;
}

.heart {
  position: absolute;
  top: 35%;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%) rotate(-8deg);
  color: #f38ab8;
  font-size: clamp(34px, 7vw, 54px);
  -webkit-text-stroke: 2px #222;
}

.mail-text {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 4;
  width: 100%;
  text-align: center;
  font-family: 'Gaegu', cursive;
  font-size: clamp(46px, 10vw, 78px);
  font-weight: 700;
  letter-spacing: 18px;
}

.answer-row {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.answer-row button {
  min-width: 112px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 5px solid #222;
  background: #f0a374;
  color: white;
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  font-size: 23px;
  cursor: pointer;
  box-shadow: inset 0 -7px rgba(255, 255, 255, 0.18);
}

/* PAGE 2 */
.page-2 {
  min-height: 100vh;
  padding: 90px 18px 60px;
  background:
    repeating-linear-gradient(
      90deg,
      #ffb9da 0 20px,
      #ffcbe3 20px 40px,
      #ffafd3 40px 48px
    );
}

.pink-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #e33f8f;
  color: white;
  text-align: center;
  padding: 14px 10px;
  font-family: 'Gaegu', cursive;
  font-weight: 700;
  font-size: clamp(22px, 4vw, 40px);
  box-shadow: 0 6px 15px rgba(111, 0, 60, 0.22);
}

.book {
  width: min(1220px, 96%);
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: stretch;
  filter: drop-shadow(0 12px 15px rgba(111, 0, 60, 0.18));
}

.book-page {
  position: relative;
  min-height: 650px;
  background: #fffdfa;
  overflow: hidden;
}

.book-left {
  padding: 126px 30px 86px 112px;
}

.green-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 82px;
  height: 100%;
  background:
    repeating-linear-gradient(
      0deg,
      #e8f6d4 0 24px,
      #d8efc0 24px 48px
    );
}

.paper-clip {
  position: absolute;
  top: 28px;
  left: 116px;
  width: 56px;
  height: 84px;
  background: linear-gradient(to bottom, #b7b7b7, #666);
  border-radius: 18px 18px 12px 12px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.24);
}

.paper-clip::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 22px;
  height: 22px;
  border: 4px solid #777;
  border-radius: 50%;
}

.small-note {
  position: absolute;
  top: 24px;
  left: 195px;
  right: 24px;
  margin: 0;
  color: #ff63a9;
  font-family: 'Gaegu', cursive;
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
}

.polaroid-area {
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 16px 16px 34px;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  transform: rotate(-2deg);
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.18);
}

.polaroid-card {
  position: relative;
  background: #fff;
  padding: 8px 8px 28px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.13);
}

.polaroid-card img {
  aspect-ratio: 1 / 1;
  height: auto;
  background: #ff72b3;
}

.polaroid-card p {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  margin: 0;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  text-align: center;
  color: #e45094;
  font-family: 'Gaegu', cursive;
  font-size: 16px;
}

.left-star {
  position: absolute;
  left: 22px;
  bottom: 90px;
  color: #ff53a6;
  font-size: 58px;
  transform: rotate(-12deg);
}

.left-flower {
  position: absolute;
  right: 46px;
  bottom: 74px;
  color: #bde28d;
  font-size: 38px;
}

.quote-note {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(390px, 76%);
  margin: 0;
  text-align: center;
  background: #e33f8f;
  color: white;
  padding: 7px 12px;
  font-family: 'Gaegu', cursive;
  font-size: 20px;
  line-height: 1.05;
}

.book-ring {
  background:
    repeating-linear-gradient(
      to bottom,
      #7e7e7e 0 13px,
      transparent 13px 28px
    ),
    #eeeeee;
  border-left: 5px solid #d6d6d6;
  border-right: 5px solid #d6d6d6;
}

.book-right {
  padding: 34px 36px 38px;
  background:
    linear-gradient(#ececec 1px, transparent 1px),
    #fffdfa;
  background-size: 100% 26px;
}

.sparkle {
  position: absolute;
  color: #aaa;
  font-size: 25px;
}

.sp-1 {
  top: 52px;
  left: 62px;
}

.sp-2 {
  top: 78px;
  right: 78px;
}

.sp-3 {
  top: 48px;
  right: 160px;
}

.book-right h2 {
  margin: 14px 0 24px;
  text-align: center;
  color: #ea5399;
  font-family: 'Gaegu', cursive;
  font-size: clamp(36px, 4.5vw, 54px);
  text-shadow: 0 4px #ffd1e6;
}

.letter-text {
  width: min(560px, 100%);
  margin: 0 auto;
  color: #e35a9a;
  font-family: 'Gaegu', cursive;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.16;
}

.letter-text p {
  margin: 0 0 12px;
}

.signature {
  margin-top: 16px;
}

/* PAGE 3 */
.page-3 {
  min-height: 100vh;
  padding: 60px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    repeating-linear-gradient(
      90deg,
      #ffffff 0 32px,
      #ffd6e7 32px 48px,
      #ffffff 48px 68px
    );
}

.birthday-card {
  position: relative;
  width: min(900px, 92vw);
  min-height: 540px;
  padding: 30px 28px 108px;
  background: #b7d3ee;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

.photo-box {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #ccc;
}

.photo-box img {
  filter: grayscale(100%) contrast(1.05);
}

.photo-top,
.photo-bottom {
  margin-top: 28px;
}

.mini-tag {
  position: absolute;
  z-index: 8;
  background: #ffe4ee;
  color: #c86593;
  padding: 4px 11px;
  font-family: 'Gaegu', cursive;
  font-size: 18px;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
}

.tag-edward {
  top: 22px;
  left: -8px;
  transform: rotate(-4deg);
}

.tag-birthday {
  left: 50%;
  bottom: 138px;
  transform: translateX(-50%) rotate(3deg);
}

.love-circle {
  position: absolute;
  left: 28px;
  bottom: 170px;
  z-index: 7;
  width: 112px;
  height: 132px;
  background: #ffeaf2;
  border: 4px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  font-size: 20px;
  line-height: 0.98;
}

.soft-bubble {
  position: absolute;
  right: 30px;
  bottom: 136px;
  z-index: 7;
  background: #fffbe1;
  border: 4px solid #333;
  border-radius: 999px;
  padding: 15px 23px;
  text-align: center;
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.08;
}

.yellow-star {
  position: absolute;
  top: 22px;
  right: 6px;
  z-index: 6;
  color: #fff59c;
  font-size: 54px;
  -webkit-text-stroke: 3px #333;
  transform: rotate(22deg);
}

.happy-word {
  position: absolute;
  left: 58px;
  bottom: 54px;
  color: white;
  font-family: 'Homemade Apple', cursive;
  font-size: clamp(44px, 7vw, 78px);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.birthday-word {
  position: absolute;
  left: 34px;
  bottom: 14px;
  color: white;
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  font-size: clamp(42px, 7vw, 72px);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.42);
}

/* PAGE NOTE */
.page-note {
  min-height: 100vh;
  padding: 70px 18px 80px;
  background:
    repeating-linear-gradient(
      90deg,
      #ffffff 0 18px,
      #cfeeff 18px 31px,
      #ffffff 31px 48px
    );
  position: relative;
  overflow: hidden;
}

.note-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 151, 197, 0.35) 0 2px, transparent 3px) 20px 30px / 95px 95px;
  opacity: 0.35;
  pointer-events: none;
}

.note-card-back {
  position: absolute;
  top: 55px;
  left: 5%;
  width: min(390px, 70vw);
  height: 430px;
  background: #fffef2;
  border: 4px solid #f5b8d6;
  transform: rotate(-10deg);
  box-shadow: 8px 12px 0 rgba(0, 0, 0, 0.06);
  z-index: 1;
  opacity: 0.92;
}

.note-card-back::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 3px solid #f6b6d2;
}

.side-text {
  position: absolute;
  left: 18px;
  top: 80px;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #e36fa8;
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05;
}

.note-card-back h2 {
  position: absolute;
  left: 120px;
  top: 95px;
  margin: 0;
  color: #e798bf;
  font-family: 'Homemade Apple', cursive;
  font-size: 43px;
  line-height: 1.05;
  transform: rotate(-2deg);
}

.tiny-vertical {
  position: absolute;
  right: 22px;
  top: 95px;
  width: 145px;
  margin: 0;
  writing-mode: vertical-rl;
  color: #d998b7;
  font-family: 'Gaegu', cursive;
  font-size: 16px;
}

.toast-card {
  position: relative;
  z-index: 10;
  width: min(520px, 88vw);
  margin: 150px auto 0;
  transform: rotate(1deg);
}

.toast-paper {
  min-height: auto;
  padding: 72px 42px 46px;
  background:
    radial-gradient(circle, #6b6b6b 0 1.1px, transparent 1.5px) 15px 15px / 42px 42px,
    #fffde9;
  border: 16px solid #ff6d9f;
  border-radius: 46% 46% 10% 10% / 12% 12% 5% 5%;
  box-shadow: 9px 12px 0 rgba(0, 0, 0, 0.08);
}

.toast-paper p {
  margin: 0 0 14px;
  color: #d95d97;
  font-family: 'Gaegu', cursive;
  font-size: 20px;
  line-height: 1.18;
  text-align: center;
}

.toast-paper .note-sign {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  color: #e14489;
}

.photo-strip {
  position: absolute;
  right: 4%;
  top: 165px;
  z-index: 5;
  width: 175px;
  padding: 12px 12px 0;
  background: #ff99c8;
  transform: rotate(4deg);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.08);
}

.strip-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 8px solid #fff8fb;
  margin-bottom: 11px;
  overflow: hidden;
}

.strip-footer {
  height: 50px;
  display: grid;
  place-items: center;
  color: #333;
  font-family: Georgia, serif;
  font-size: 28px;
  letter-spacing: 2px;
  background: #ffb3d1;
}

.pink-it {
  position: absolute;
  left: 8%;
  bottom: 150px;
  z-index: 6;
  background: #ffd2e6;
  border: 3px solid #e5a2c1;
  border-radius: 50%;
  padding: 13px 30px;
  color: #333;
  font-family: Georgia, serif;
  font-size: 25px;
  transform: rotate(-6deg);
}

.music-label {
  position: absolute;
  right: 5%;
  top: 105px;
  z-index: 6;
  background: #ff9dcc;
  color: #fffbe8;
  border-left: 38px solid #9adcf7;
  padding: 8px 15px;
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  font-size: 22px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.09);
}

.angelic-love {
  position: absolute;
  left: 8%;
  bottom: 45px;
  z-index: 6;
  color: #8f8f8f;
  font-family: 'Patrick Hand', cursive;
  font-size: 31px;
  line-height: 0.95;
  letter-spacing: 5px;
}

.angelic-love::first-line {
  letter-spacing: 7px;
}

.note-star {
  position: absolute;
  z-index: 2;
  font-size: 50px;
}

.star-a {
  top: 35px;
  left: 10%;
  color: #ff7fbd;
}

.star-b {
  top: 45px;
  right: 11%;
  color: #9f9f9f;
}

.star-c {
  bottom: 95px;
  right: 5%;
  color: #a0a0a0;
  font-size: 38px;
}

/* PAGE 4 */
.page-4 {
  min-height: 100vh;
  padding: 34px 18px 40px;
  background: #a9d9f4;
}

.cloud-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.58) 0 35%, transparent 36%) 25px 40px / 210px 120px,
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35) 0 35%, transparent 36%) 110px 180px / 260px 130px,
    #a9d9f4;
  opacity: 0.8;
}

.call-title {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  text-align: center;
  font-family: 'Homemade Apple', cursive;
  color: white;
  font-size: clamp(31px, 5.5vw, 62px);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.38);
  transform: rotate(2deg);
}

.info-cloud {
  position: absolute;
  z-index: 5;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: white;
  border: 4px dotted #333;
  border-radius: 42px;
  padding: 17px 22px;
  text-align: center;
  box-shadow: 0 6px 0 rgba(255, 255, 255, 0.35);
}

.info-cloud h3 {
  margin: 0 0 6px;
  font-family: 'Homemade Apple', cursive;
  font-size: 25px;
}

.info-cloud p {
  margin: 0;
  font-family: 'Patrick Hand', cursive;
  font-size: 19px;
  line-height: 1.14;
}

.cloud-one {
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
}

.toast-decor {
  position: absolute;
  left: 8%;
  bottom: 225px;
  z-index: 7;
  width: 155px;
  transform: rotate(-7deg);
  pointer-events: none;
}

.toast-decor img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.phone-button {
  position: absolute;
  left: 12%;
  bottom: 130px;
  z-index: 8;
  width: 170px;
  height: 108px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.phone-icon {
  width: 100%;
  height: 100%;
  fill: #2d2d2d;
  transform: rotate(16deg);
  filter: drop-shadow(0 7px 0 rgba(0, 0, 0, 0.14));
}

.phone-button:hover .phone-icon,
.phone-button.playing .phone-icon {
  animation: phoneWiggle 0.22s infinite alternate;
}

@keyframes phoneWiggle {
  from {
    transform: rotate(11deg);
  }

  to {
    transform: rotate(22deg);
  }
}

.phone-line {
  position: absolute;
  left: 26%;
  bottom: 102px;
  z-index: 2;
  width: 48%;
  height: 74px;
  border-bottom: 10px dotted #333;
  border-radius: 50%;
}

.hotline {
  position: absolute;
  right: 12%;
  bottom: 146px;
  z-index: 6;
  background: #ffbfd7;
  padding: 10px 15px;
  transform: rotate(-7deg);
  font-family: 'Homemade Apple', cursive;
  font-size: 23px;
  line-height: 1.1;
}

.footer-text {
  position: absolute;
  left: 0;
  bottom: 22px;
  z-index: 6;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 20px;
  text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .page {
    min-height: 100svh;
  }

  .main-title {
    font-size: clamp(36px, 11vw, 58px);
  }

  .mail-text {
    letter-spacing: 12px;
    bottom: 22px;
  }

  .answer-row {
    gap: 18px;
  }

  .answer-row button {
    min-width: 100px;
    font-size: 21px;
    border-width: 4px;
  }

  .page-2 {
    padding: 82px 12px 45px;
  }

  .book {
    width: min(620px, 96%);
    grid-template-columns: 1fr;
  }

  .book-ring {
    height: 24px;
    border-left: 0;
    border-right: 0;
    border-top: 4px solid #d6d6d6;
    border-bottom: 4px solid #d6d6d6;
    background:
      repeating-linear-gradient(
        90deg,
        #7e7e7e 0 13px,
        transparent 13px 28px
      ),
      #eeeeee;
  }

  .book-left {
    min-height: 620px;
    padding: 112px 18px 86px 92px;
  }

  .book-right {
    min-height: auto;
    padding: 28px 22px 40px;
  }

  .green-strip {
    width: 68px;
  }

  .paper-clip {
    left: 84px;
    transform: scale(0.82);
    transform-origin: top left;
  }

  .small-note {
    top: 20px;
    left: 128px;
    right: 12px;
    font-size: 17px;
    line-height: 1.1;
  }

  .polaroid-area {
    width: min(385px, 100%);
    gap: 10px;
    padding: 12px 12px 30px;
    transform: rotate(-1deg);
  }

  .polaroid-card {
    padding: 7px 7px 25px;
  }

  .polaroid-card p {
    font-size: 15px;
  }

  .quote-note {
    width: 78%;
    font-size: 18px;
  }

  .letter-text {
    font-size: 18px;
  }

  .birthday-card {
    width: 94vw;
    min-height: 620px;
    padding: 24px 18px 118px;
    gap: 16px;
  }

  .photo-top,
  .photo-bottom {
    margin-top: 38px;
  }

  .love-circle {
    width: 92px;
    height: 108px;
    font-size: 15px;
    left: 16px;
    bottom: 175px;
  }

  .soft-bubble {
    right: 12px;
    bottom: 150px;
    font-size: 13px;
    padding: 12px 16px;
  }

  .yellow-star {
    top: 8px;
    right: 2px;
    font-size: 45px;
  }

  .tag-birthday {
    left: 50%;
    bottom: 118px;
  }

  .page-note {
    min-height: 1120px;
    padding: 42px 14px 70px;
  }

  .note-card-back {
    top: 45px;
    left: -54px;
    width: 340px;
    height: 405px;
    transform: rotate(-11deg);
    opacity: 0.9;
  }

  .note-card-back h2 {
    left: 108px;
    top: 96px;
    font-size: 36px;
  }

  .side-text {
    font-size: 20px;
  }

  .tiny-vertical {
    right: 18px;
    top: 98px;
    font-size: 14px;
  }

  .toast-card {
    width: min(390px, 88vw);
    margin-top: 415px;
    transform: rotate(0deg);
  }

  .toast-paper {
    padding: 62px 28px 40px;
    border-width: 14px;
  }

  .toast-paper p {
    font-size: 17px;
    line-height: 1.16;
    margin-bottom: 12px;
  }

  .toast-paper .note-sign {
    font-size: 21px;
  }

  .photo-strip {
    top: 165px;
    right: 8px;
    width: 128px;
    padding: 9px 9px 0;
    transform: rotate(5deg);
  }

  .strip-photo {
    border-width: 7px;
    margin-bottom: 9px;
  }

  .strip-footer {
    height: 40px;
    font-size: 22px;
  }

  .music-label {
    top: 118px;
    right: 8px;
    font-size: 16px;
    border-left-width: 28px;
    padding: 6px 9px;
  }

  .pink-it {
    left: 18px;
    bottom: 135px;
    font-size: 20px;
    padding: 11px 24px;
  }

  .angelic-love {
    left: 24px;
    bottom: 36px;
    font-size: 26px;
  }

  .note-star {
    font-size: 40px;
  }

  .star-a {
    top: 24px;
    left: 7%;
  }

  .star-b {
    top: 42px;
    right: 8%;
  }

  .star-c {
    bottom: 82px;
    right: 7%;
  }

  .page-4 {
    min-height: 760px;
  }

  .info-cloud {
    width: min(280px, 85vw);
  }

  .cloud-one {
    top: 210px;
  }

  .toast-decor {
    width: 115px;
    left: 6%;
    bottom: 195px;
  }

  .phone-button {
    width: 138px;
    height: 88px;
    left: 8%;
    bottom: 112px;
  }

  .phone-line {
    left: 27%;
    width: 42%;
    height: 62px;
    bottom: 92px;
    border-bottom-width: 9px;
  }

  .hotline {
    right: 8%;
    bottom: 122px;
    font-size: 18px;
  }

  .footer-text {
    font-size: 17px;
  }
}

@media (max-width: 560px) {
  .pink-header {
    font-size: 20px;
  }

  .book-left {
    padding-left: 82px;
  }

  .left-star {
    font-size: 45px;
  }

  .left-flower {
    right: 28px;
    font-size: 32px;
  }

  .book-right h2 {
    font-size: 34px;
  }

  .letter-text {
    font-size: 17px;
    line-height: 1.15;
  }

  .birthday-card {
    min-height: 560px;
    padding: 22px 14px 112px;
  }

  .happy-word {
    left: 34px;
  }

  .birthday-word {
    left: 20px;
  }

  .page-note {
    min-height: 1090px;
  }

  .note-card-back {
    left: -72px;
    width: 320px;
    height: 390px;
  }

  .note-card-back h2 {
    left: 100px;
    top: 100px;
    font-size: 32px;
  }

  .photo-strip {
    width: 118px;
    right: 9px;
    top: 178px;
  }

  .toast-card {
    margin-top: 395px;
  }

  .toast-paper {
    padding: 58px 23px 36px;
  }

  .toast-paper p {
    font-size: 16.5px;
  }

  .toast-paper .note-sign {
    font-size: 21px;
  }

  .info-cloud {
    padding: 15px 18px;
  }

  .info-cloud h3 {
    font-size: 21px;
  }

  .info-cloud p {
    font-size: 16px;
  }

  .toast-decor {
    width: 95px;
    left: 5%;
    bottom: 190px;
  }

  .phone-button {
    width: 122px;
    height: 78px;
    bottom: 112px;
  }

  .phone-line {
    left: 30%;
    width: 38%;
    bottom: 88px;
  }
}