@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  min-height: 100%;
  background-image: url(bg2.png);
  background-size: cover;       /* Stretches/scales the image to cover the whole screen */
  background-repeat: no-repeat; /* Stops the image from repeating/tiling */
  background-position: center;  /* Keeps the image centered */
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Peperrito Ornaments-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Peperrito Ornaments Regular";
  src: local("Peperrito Ornaments Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Single Day-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Single Day";
  src: local("Single Day");
}
/* @FONTWARNING[{"type": "restricted", "family": "KN Maiyuan-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "KNMaiyuan-Regular";
  src: local("KNMaiyuan-Regular");
}

@font-face {
  font-family: "Vividly-Regular";
  src: url("Vividly-Regular.otf") format("truetype");
    src: url("Vividly-Regular.ttf") format("truetype");

  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: "Peperrito Ornaments Regular";
  src: url("PeperritoOrnaments-Regular.otf") format("truetype");
    src: url("PeperritoOrnaments-Regular.ttf") format("truetype");

  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "KNMaiyuan-Regular";
  src: url("KNMaiyuan-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
.iphone {
  width: 390px;
  height: 684px;
  min-width: 390px;
  min-height: 684px;

  position: relative;
  margin: 0 auto;

  transform-origin: top center;
}
.iphone .rectangle {
  top: 92px;
  left: calc(50.00% - 139px);
  width: 278px;
  height: 42px;
  background: linear-gradient(
    90deg,
    rgba(255, 243, 247, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  position: absolute;
  border-radius: 16px;
  border: 1px solid;
  border-color: #ffacd3;
}

.iphone .div {
  top: 149px;
  left: calc(50.00% - 139px);
  width: 278px;
  height: 297px;
  background-color: #ffffff;
  position: absolute;
  border-radius: 16px;
  border: 1px solid;
  border-color: #ffacd3;
}

.iphone .rectangle-2 {
  top: 379px;
  left: calc(50.00% - 48px);
  width: 97px;
  height: 32px;
  background-color: #ffeff6;
  position: absolute;
  border-radius: 16px;
  border: 1px solid;
  border-color: #ffacd3;
}

.iphone .gemini-generated {
  position: absolute;
  top: 237px;
  left: calc(50.00% - 38px);
  width: 76px;
  height: 74px;
  aspect-ratio: 1.02;
}

.iphone .img {
  position: absolute;
  top: 497px;
  left: calc(50.00% - 149px);
  width: 64px;
  height: 52px;
  aspect-ratio: 1.35;
}

.iphone .gemini-generated-2 {
  position: absolute;
  top: 509px;
  left: calc(50.00% - 98px);
  width: 41px;
  height: 48px;
  aspect-ratio: 0.8;
}

.iphone .text-wrapper {
  top: 182px;
  left: calc(50.00% - 72px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 14px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .enter-the-secret-pin {
  position: absolute;
  top: 320px;
  left: calc(50.00% - 55px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .someone-prepared {
  position: absolute;
  top: 207px;
  left: calc(50.00% - 79px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: 11px;
}

.iphone .l {
  position: absolute;
  top: 139px;
  left: calc(50.00% + 92px);
  transform: rotate(14.87deg);
  font-family: "Peperrito Ornaments Regular";
  font-weight: 400;
  color: #ffacd3;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .y {
  position: absolute;
  top: 401px;
  left: calc(50.00% - 150px);
  transform: rotate(-13deg);
  font-family: "Peperrito Ornaments Regular";
  font-weight: 400;
  color: #ffacd3;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .z {
  position: absolute;
  top: 602px;
  left: calc(50.00% - 112px);
  transform: rotate(14.87deg);
  font-family: "Peperrito Ornaments Regular";
  font-weight: 400;
  color: #ffacd3;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .a-tiny-world-made {
  position: absolute;
  top: 483px;
  left: calc(50.00% - 83px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .p {
  top: 500px;
  left: calc(50.00% - 15px);
  font-family: "Single Day";
  font-size: 10px;
  position: absolute;
  font-weight: 400;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .text-wrapper-2 {
  position: absolute;
  top: 558px;
  left: calc(50.00% - 144px);
  width: 173px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .text-wrapper-3 {
  position: absolute;
  top: 537px;
  left: calc(50.00% - 70px);
  width: 173px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .text-wrapper-4 {
  top: 341px;
  left: calc(50.00% - 52px);
  font-family: "KNMaiyuan-Regular";
  font-size: 18px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .text-wrapper-5 {
  top: 386px;
  left: calc(50.00% - 34px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 12px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .kawaii-steak {
  position: absolute;
  top: 102px;
  left: 74px;
  width: 22px;
  height: 22px;
}

.iphone .hello-kitty {
  position: absolute;
  top: 102px;
  left: 102px;
  width: 22px;
  height: 22px;
}

.iphone .hello-kitty-2 {
  position: absolute;
  top: 563px;
  left: 303px;
  width: 49px;
  height: 52px;
}

.iphone .favorite {
  position: absolute;
  top: 102px;
  left: 130px;
  width: 22px;
  height: 22px;
}


/* =========================================
   RESPONSIVE SCALE
   Base design: 390px × 684px
   ========================================= */

/* 📱 PHONE — 390px */
@media (max-width: 599px) {
  .iphone {
    transform: scale(1);
  }
}


/* 📱 TABLET — 810px */
@media (min-width: 600px) and (max-width: 899px) {
  .iphone {
    transform: scale(1.25);
  }
}


/* 💻 LAPTOP — 1024px+ */
@media (min-width: 900px) {
  .iphone {
    transform: scale(1.45);
  }
}