@import url(
  'https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800;900&family=Outfit:wght@500;600;700;800&display=swap'
);

:root {
  --blue: #8fcce8;
  --blue-light: #eaf7fc;

  --pink: #eaa9c8;
  --pink-light: #fff0f7;

  --lavender: #c9b7e7;
  --lavender-light: #f3edfb;

  --green: #b9d5b1;
  --green-light: #f1f8ed;

  --yellow: #e7cf73;
  --yellow-light: #fff9d9;

  --ink: #5f6d89;
  --white: #ffffff;
}

body.home-page {
  margin: 0;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.70),
      rgba(255, 255, 255, 0.70)
    ),
    url("/images/patterns/pink-stars.jpg")
    center top / 480px auto repeat fixed;

  color: var(--ink);

  font-family:
    "Outfit",
    Arial,
    sans-serif;
}

.retro-home {
  width: min(1180px, calc(100% - 28px));
  margin: 22px auto 60px;
}


/* =========================
   BANNER
========================= */

.retro-banner {
  position: relative;

  min-height: 245px;

  overflow: hidden;

  border: 2px solid var(--blue);
  border-radius: 10px;

  background:
    url("/images/patterns/blue-pink-gingham.jpg")
    center / cover;

  padding: 11px;
}

.retro-banner-photo {
  position: absolute;
  inset: 11px;

  background:
    url("/images/us-banner.jpg")
    center / cover no-repeat;

  border: 2px solid var(--pink);
  border-radius: 7px;
}

.retro-banner::after {
  content: "";

  position: absolute;
  inset: 11px;

  background:
    linear-gradient(
      to top,
      rgba(255, 227, 240, 0.22),
      transparent 55%
    );

  pointer-events: none;
}

.retro-banner-title {
  position: absolute;
  right: 25px;
  bottom: 17px;
  z-index: 3;

  margin: 0;

  color: #fff;

  font-family:
    "M PLUS Rounded 1c",
    sans-serif;

  font-size: clamp(2.1rem, 5vw, 4.3rem);
  font-weight: 900;
  line-height: 1;

  -webkit-text-stroke: 2px #7fc2df;
  paint-order: stroke fill;

  text-shadow:
    3px 3px 0 #f1b0ce,
    6px 6px 0 #f2dc8a;
}

.dating-badge {
  position: absolute;
  top: 21px;
  right: 21px;
  z-index: 4;

  min-width: 175px;

  padding: 9px 12px;

  background: rgba(255, 247, 251, 0.93);

  border: 2px solid var(--pink);
  border-radius: 7px;

  text-align: right;
}

.dating-badge span,
.dating-badge strong {
  display: block;
}

.dating-badge span {
  color: #9c6882;
  font-size: 0.63rem;
  font-weight: 800;
}

.dating-badge strong {
  margin-top: 2px;

  color: #477795;
  font-size: 0.86rem;
}


/* =========================
   PAGE GRID
========================= */

.retro-grid {
  display: grid;

  grid-template-columns:
    210px
    minmax(0, 1fr)
    235px;

  gap: 12px;

  margin-top: 14px;
}

.retro-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =========================
   BOXES
========================= */

.retro-box {
  overflow: hidden;

  border: 2px solid var(--blue);
  border-radius: 8px;

  box-shadow: none;
}

.retro-title {
  padding: 7px 10px;

  border-bottom: 2px solid rgba(255, 255, 255, 0.95);

  color: #5f6d89;

  font-family:
    "Outfit",
    sans-serif;

  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
}

.blue-title {
  background:
    linear-gradient(
      180deg,
      #e8f7fd,
      #cbeaf6
    );
}

.pink-title {
  background:
    linear-gradient(
      180deg,
      #fff0f7,
      #f4cfe1
    );
}

.yellow-title {
  background:
    linear-gradient(
      180deg,
      #fffbdc,
      #f5e6a7
    );
}

.green-title {
  background:
    linear-gradient(
      180deg,
      #f4faef,
      #d8ead1
    );
}

.lavender-title {
  background:
    linear-gradient(
      180deg,
      #f6f0fc,
      #ded1f0
    );
}


/* =========================
   PROFILE
========================= */

.profile-panel {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.43),
      rgba(255, 255, 255, 0.43)
    ),
    url("/images/patterns/pink-gingham.jpg")
    center / cover;
}

.profile-content {
  padding: 16px 12px;

  text-align: center;
}

.profile-photo {
  width: 116px;
  height: 116px;

  margin: 0 auto 13px;

  background:
    url("/images/us-profile.jpg")
    center / cover no-repeat;

  border: 3px solid var(--white);
  outline: 2px solid var(--pink);
  border-radius: 50%;
}

.profile-name,
.profile-message {
  font-family:
    "M PLUS Rounded 1c",
    sans-serif;

  font-weight: 800;
}

.profile-name {
  color: #4f7691;
  font-size: 0.87rem;
  line-height: 1.45;
}

.profile-message {
  margin-top: 9px;

  color: #a26884;
  font-size: 0.9rem;
}


/* =========================
   NAVIGATION
========================= */

.nav-panel {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.30)
    ),
    url("/images/patterns/blue-polka.jpg")
    center / 240px auto repeat;
}

.retro-nav {
  display: grid;

  gap: 7px;

  padding: 11px;
}

.retro-nav a,
.aitai-button {
  display: block;

  width: 100%;

  box-sizing: border-box;

  padding: 8px 9px;

  color: #55718a;
  background: rgba(255, 255, 255, 0.83);

  border: 1px solid #98cce4;
  border-radius: 4px;

  font-family:
    "Outfit",
    sans-serif;

  font-size: 0.76rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

.retro-nav a:nth-child(odd) {
  background: rgba(241, 255, 226, 0.88);
}

.retro-nav a:nth-child(even) {
  background: rgba(255, 249, 195, 0.90);
}

.letter-nav-link {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.54),
      rgba(255, 255, 255, 0.54)
    ),
    url("/images/patterns/pink-sage-diamond-plaid.jpg")
    center / cover !important;
}

.aitai-button {
  cursor: pointer;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.42)
    ),
    url("/images/patterns/yellow-blue-polka.jpg")
    center / cover;
}

.aitai-main {
  display: block;

  font-family:
    "M PLUS Rounded 1c",
    sans-serif;

  font-weight: 900;
}

.aitai-counter-text {
  display: block;

  margin-top: 3px;

  font-size: 0.63rem;
}


/* =========================
   SIDE BOBA
========================= */

.boba-side-panel {
  background:
    url("/images/patterns/pink-yellow-gingham.jpg")
    center / cover;
}

.side-boba-photo,
.right-boba-photo {
  display: block;

  width: calc(100% - 16px);

  margin: 8px;

  object-fit: cover;

  border: 2px solid var(--white);
  border-radius: 5px;
}

.side-boba-photo {
  height: 220px;
}

.right-boba-photo {
  height: 220px;
}


/* =========================
   PHOTO GALLERY
========================= */

.photo-panel {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.42)
    ),
    url("/images/patterns/blue-pink-gingham.jpg")
    center / cover;
}

.main-photo-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  padding: 14px;
}

.main-photo-grid figure {
  height: 370px;

  margin: 0;

  overflow: hidden;

  border: 2px solid var(--pink);
  border-radius: 6px;

  background: var(--white);
}

.main-photo-grid img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.07);
}


/* =========================
   SPECIAL PAGES
========================= */

.special-panel {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.40),
      rgba(255, 255, 255, 0.40)
    ),
    url("/images/patterns/pastel-rainbow-diamond.jpg")
    center / cover;
}

.special-page-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 9px;

  padding: 12px;
}

.special-page-card {
  min-height: 86px;

  box-sizing: border-box;

  padding: 11px 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  border: 1px solid var(--pink);
  border-radius: 5px;

  color: #5e7089;

  font-family:
    "Outfit",
    sans-serif;

  text-align: center;
  text-decoration: none;
}

.special-page-card strong {
  font-size: 0.76rem;
}

.special-page-card small {
  margin-top: 4px;

  font-size: 0.58rem;
}

.special-star {
  margin-bottom: 4px;

  font-size: 1rem;
}

.card-blue {
  background: rgba(222, 244, 254, 0.90);
}

.card-pink {
  background: rgba(255, 230, 242, 0.90);
}

.card-yellow {
  background: rgba(255, 248, 199, 0.92);
}

.letter-card {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.38),
      rgba(255, 255, 255, 0.38)
    ),
    url("/images/patterns/pink-sage-lace-plaid.jpg")
    center / cover;
}

.aitai-card {
  cursor: pointer;
}


/* =========================
   FOOD
========================= */

.food-panel {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.38),
      rgba(255, 255, 255, 0.38)
    ),
    url("/images/patterns/pink-yellow-gingham.jpg")
    center / cover;
}

.food-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 9px;

  padding: 12px;
}

.food-card {
  min-height: 92px;

  padding: 10px 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  color: #587086;
  background: rgba(255, 255, 255, 0.78);

  border: 1px solid #deb9cb;
  border-radius: 5px;

  text-align: center;
  text-decoration: none;
}

.food-card strong {
  margin-top: 6px;

  font-size: 0.7rem;
}

.pixel-food-icon {
  padding: 5px 7px;

  color: #8a7083;
  background: var(--yellow-light);

  border: 1px solid var(--yellow);
  border-radius: 3px;

  font-size: 0.55rem;
  font-weight: 800;
}


/* =========================
   UPDATES
========================= */

.update-panel {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.38),
      rgba(255, 255, 255, 0.38)
    ),
    url("/images/patterns/green-blue-pink-checker.jpg")
    center / cover;
}

.update-photo-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;

  padding: 12px;
}

.update-photo-grid img {
  display: block;

  width: 100%;
  height: 260px;

  object-fit: cover;

  border: 2px solid var(--white);
  border-radius: 5px;
}


/* =========================
   TRIPS
========================= */

.trip-panel {
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.38),
      rgba(255, 255, 255, 0.38)
    ),
    url("/images/patterns/lavender-yellow-plaid.jpg")
    center / cover;
}

.trip-list {
  display: grid;

  gap: 9px;

  padding: 11px;
}

.trip-row {
  display: grid;

  grid-template-columns: 64px minmax(0, 1fr);

  gap: 9px;
  align-items: center;

  padding: 8px;

  background: rgba(255, 255, 255, 0.82);

  border: 1px solid var(--lavender);
  border-radius: 5px;
}

.trip-icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  overflow: hidden;

  background: var(--white);

  border: 2px solid var(--pink);
  border-radius: 50%;
}

.trip-icon img {
  width: 48px;
  height: 48px;

  object-fit: contain;
}

.trip-info {
  min-width: 0;
}

.trip-info strong,
.trip-info span {
  display: block;
}

.trip-info strong {
  color: #697394;

  font-size: 0.69rem;
  line-height: 1.15;
}

.trip-info span {
  width: fit-content;

  margin-top: 5px;
  padding: 4px 9px;

  color: #8b6f9e;
  background: var(--lavender-light);

  border: 1px solid var(--lavender);
  border-radius: 999px;

  font-size: 0.66rem;
  font-weight: 800;
}


/* =========================
   WORLD CUP
========================= */

.world-cup-panel {
  background:
    url("/images/patterns/yellow-blue-polka.jpg")
    center / 230px auto repeat;
}

.world-cup-content {
  padding: 16px 10px;

  text-align: center;
}

.world-cup-content strong,
.world-cup-content span {
  display: block;
}

.world-cup-content strong {
  color: #71734e;

  font-size: 0.8rem;
}

.world-cup-content span {
  margin-top: 5px;

  color: #687793;

  font-size: 0.67rem;
  font-weight: 700;
}


/* =========================
   RIGHT BOBA
========================= */

.boba-right-panel {
  background:
    url("/images/patterns/sage-soft-gingham.jpg")
    center / cover;
}


/* =========================
   STAR CLICK ANIMATION
========================= */

.click-star {
  position: fixed;
  z-index: 99999;

  pointer-events: none;

  color: #ef9fc5;

  font-size: 1.15rem;
  font-weight: 900;

  animation:
    star-fly 850ms ease-out forwards;
}

@keyframes star-fly {
  from {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(0.7)
      rotate(0deg);
  }

  to {
    opacity: 0;

    transform:
      translate(
        calc(-50% + var(--star-x)),
        -95px
      )
      scale(1.3)
      rotate(var(--star-r));
  }
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 930px) {
  .retro-grid {
    grid-template-columns:
      185px
      minmax(0, 1fr);
  }

  .retro-right {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    align-items: start;
  }
}

@media (max-width: 680px) {
  .retro-home {
    width: calc(100% - 18px);
  }

  .retro-grid {
    grid-template-columns: 1fr;
  }

  .retro-right {
    display: flex;
  }

  .main-photo-grid,
  .special-page-grid,
  .food-grid,
  .update-photo-grid {
    grid-template-columns: 1fr;
  }

  .main-photo-grid figure {
    height: 340px;
  }

  .retro-banner {
    min-height: 220px;
  }

  .retro-banner-title {
    right: 16px;
    bottom: 15px;

    font-size: 2.2rem;
  }

  .dating-badge {
    top: 18px;
    right: 18px;
  }
}