/* ================================================= */
/* ROOT */
/* ================================================= */
@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Cinzel+Decorative:wght@400;700;900&family=Croissant+One&family=Gaegu&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



:root {
  /* FONTS */
  /* --font-body: 'Raleway', sans-serif; */
  --font-body: 'ABeeZee', sans-serif;
  --font-title: 'Cinzel Decorative', serif;
  --quotetxt: 'Gaegu', sans-serif;;

/* ================================================= */
  /* DARK CAFE BACKGROUNDS */
  /* ================================================= */
  --bg:
    #1d1820;
  --bg-2:
    #2a2028;
  --panel:
    rgba(45, 34, 44, 0.88);
  --panel-border:
    rgba(246, 201, 185, 0.12);


  /* ================================================= */
  /* TEXT */
  /* ================================================= */
  --text:
    #fcdcbf;
  --muted:
    #a36b5b;
  --navtxt:
    #d68a8a;

  /* ================================================= */
  /* YOUR ORIGINAL ACCENTS */
  /* ================================================= */
  --accent:
    #BB5E5E;
  --accent-2:
    #ff83a2;
  --heading:
    #f0a28b;
  --footer-text:
    #c27283;
  --link:
    #ffd0b8;

  /* ================================================= */
  /* SOFT UI COLORS */
  /* ================================================= */
  --accent-soft:
    rgba(255, 131, 162, 0.12);
  --glass:
    rgba(255,255,255,0.03);
  --divider:
    rgba(255,255,255,0.08);
  --link-hover-bg:
    rgba(255,255,255,0.05);

  /* ================================================= */
  /* SHADOWS */
  /* ================================================= */
  --shadow:
    0 10px 30px rgba(0,0,0,0.35);
  --glow:
    0 0 25px rgba(255, 131, 162, 0.12);

  /* ================================================= */
  /* GRADIENTS */
  /* ================================================= */
  --gradient-left:
    linear-gradient(
      180deg,
      rgb(217, 94, 178) 0%,
      #fbbf5d 100%
    );

  --gradient-right:
    linear-gradient(
      180deg,
      #fbbf5d 0%,
      rgb(217, 94, 178) 100%
    );

  --gradient-btn:
    linear-gradient(
      90deg,
      #BB5E5E,
      #ff83a2
    );

  --gradient-heading:
    linear-gradient(
      0deg,
      rgb(255, 227, 117) 15%,
      rgb(255, 90, 107) 100%
    );

  /* ================================================= */
  /* RADIUS */
  /* ================================================= */
  --radius:
    24px;
  --gap: 2rem;
}

/* ================================================= */
/* RESET */
/* ================================================= */

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

img {
  display: block;
  max-width: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
  padding: 3rem 1.5rem;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    url("https://i.ibb.co/TxpgGLPT/2.webp");
  background-size: cover;
  background-position: center;
  filter:
    blur(8px)
    brightness(0.35)
    saturate(0.8);
  transform: scale(1.05);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      circle at top,
      rgba(255,131,162,0.10),
      transparent 35%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(251,191,93,0.08),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      rgba(27,22,29,0.52),
      rgba(36,28,37,0.72)
    );
}


/* ================================================= */
/* MAIN CONTAINER */
/* ================================================= */

.about-container {
  width: min(1300px, 100%);
  margin: auto;
}

/* ===== Custom Scrollbar ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--heading) #52223a;
}


/* ================================================= */
/* TITLE */
/* ================================================= */

.about-heading {
  margin-bottom: 2rem;
}

.about-heading h1 {

  font-family: var(--font-title);
  color: var(--accent);
  font-size:
    clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 0.5rem;

}

.about-heading p {
  color: var(--muted);
  opacity: 0.8;
  font-size:
    clamp(0.95rem, 2vw, 1.1rem);
}


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

.about-grid {
  display: grid;
  grid-template-columns:
    1.35fr 0.85fr;
  grid-template-areas:
    "profile basics"
    "obsessions interests";
  gap: var(--gap);

}


/* ================================================= */
/* CARD */
/* ================================================= */
.card {
  background:
    linear-gradient(
      145deg,
      rgba(48, 36, 47, 0.92),
      rgba(34, 28, 39, 0.92)
    );
  /* border:
    1px solid rgba(255,255,255,0.06); */
  box-shadow:
    var(--shadow),
    var(--glow);
  border-radius: var(--radius);
  position: relative;
  overflow: visible;
}

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

.profile-card {
  grid-area: profile;
  display: flex;
  gap: 2rem;
  padding: 2rem;
  min-height: 420px;
}

.profile-left {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-pic {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  border:
    4px solid rgba(255,255,255,0.08);
  flex-shrink: 0;

}


.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.08);
}

.quote-box {
  margin-top: 0.5rem;
  text-align: center;
  color: var(--accent);
  line-height: 1.8;
  font-size: 1.3rem;
  font-family: var(--quotetxt);
  font-style: italic;
}

.quote-box span {
  font-size: 1.4rem;
}

.profile-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.profile-right h2 {
  color: var(--heading);
  font-size:
    clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 1rem;

}

.divider {
  height: 1px;
  background:
    rgba(255,255,255,0.08);
  margin-bottom: 1.5rem;

}

.profile-right p {
  font-size:
    clamp(1rem, 2vw, 1.2rem);
  line-height: 1.9;
  margin-bottom: 1.3rem;
}

.level-pill {
  margin-top: 1rem;
  width: fit-content;
  /* center the pill, since parent is flex */
  margin-inline: auto;
  padding:
    0.9rem 1.6rem;
  border-radius: 999px;
  background:
    rgba(58, 43, 56, 0.95);
  color:
    var(--heading);
  font-weight: bold;
}

/* ================================================= */
/* PROFILE TOP BAR */
/* ================================================= */

.profile-card {
  position: relative;
  padding-top: 5rem;
}

/* ================================================= */
/* TOP BAR */
/* ================================================= */

.profile-topbar {
  position: absolute;
  top: -1.2rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 20;

}


/* ================================================= */
/* NAME PILL */
/* ================================================= */

.name-pill {
  background:
    rgba(58, 43, 56, 0.95);
  border:
    1px solid rgba(246, 201, 185, 0.08);
  color:
    var(--heading);
  font-family:
    var(--font-title);
  padding:
    0.7rem 1.3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);

}


.name-pill span {
  opacity: 0.75;
  font-style: italic;
  color:
    var(--accent-2);

}


/* ================================================= */
/* ICON LINKS */
/* ================================================= */

.profile-links {
  display: flex;
  gap: 0.8rem;

}


.profile-links a {

  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background:
    rgba(58, 43, 56, 0.95);
  border:
    1px solid rgba(246, 201, 185, 0.08);
  color:
    var(--footer-text);
  font-size: 1.2rem;
  transition:
    0.25s ease;
  text-decoration: none;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);

}


/* HOVER */
.profile-links a:hover {
  transform:
    translateY(-3px);
  color:
    var(--heading);
  background:
    rgba(88, 58, 72, 0.98);
  border-color:
    rgba(255,131,162,0.15);
}

#backbtn {
    background-color: #84475a;
    color: #392B37;
}

#backbtn:hover {
  color:
    var(--heading);
  background:
    rgba(88, 58, 72, 0.98);
  border-color:
    rgba(255,131,162,0.15);
}

/* ================================================= */
/* TOOLTIPS */
/* ================================================= */

.tooltip {

  position: relative;

}


/* TOOLTIP BOX */
.tooltip::after {
  content:
    attr(data-tooltip);
  position: absolute;
  bottom: -2.8rem;
  left: 50%;
  transform:
    translateX(-50%);
  background:
    rgba(58, 43, 56, 0.98);
  color:
    var(--heading);
  padding:
    0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    0.2s ease;
  border:
    1px solid rgba(246, 201, 185, 0.08);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.25);

}


/* SHOW */
.tooltip:hover::after {
  opacity: 1;
  transform:
    translateX(-50%)
    translateY(4px);

}


/* ================================================= */
/* SIDE CARDS */
/* ================================================= */

.side-card {
  padding: 2rem;
}

.side-card:nth-of-type(2) {
  grid-area: basics;
}

.side-card:nth-of-type(4) {
  grid-area: interests;
}

.side-card img {
    border-radius: 0px 0px 18px 18px;
}


/* ================================================= */
/* FLOATING TITLES */
/* ================================================= */

.floating-title {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  background:
    rgba(58, 43, 56, 0.95);
  font-family: var(--font-title);
  color:
    var(--heading);
  padding:
    0.7rem 1.3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: bold;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.25);
}


/* ================================================= */
/* INFO LIST */
/* ================================================= */

.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.info-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom:
    1px solid rgba(255,255,255,0.05);
  padding-bottom: 0.8rem;
}

.label {
  color: var(--accent);
  font-weight: bold;
  flex-shrink: 0;

}


/* ================================================= */
/* OBSESSIONS */
/* ================================================= */

.obsession-card {
  grid-area: obsessions;
  padding: 2rem;
}

.obsession-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(110px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.obsession-item {
  text-align: center;
}

.obsession-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border:
    1px solid rgba(255,255,255,0.08);
  margin-bottom: 0.7rem;
}

.obsession-item span {
  color: var(--muted);
  font-size: 0.95rem;
}


/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width: 950px) {

  .about-grid {

    grid-template-columns: 1fr;

    grid-template-areas:
      "profile"
      "basics"
      "obsessions"
      "interests";

  }

  .profile-card {

    flex-direction: column;

    align-items: center;

    text-align: center;

  }

  .profile-left {

    width: 100%;

  }

  .profile-right {

    align-items: center;

  }

  .level-pill {

    margin-inline: auto;

  }

  .info-list li {

    flex-direction: column;

    gap: 0.4rem;

  }

  .profile-topbar {

  position: static;

  flex-direction: column;

  margin-bottom: 2rem;

}


.profile-links {

  flex-wrap: wrap;

  justify-content: center;

}

}