@charset "UTF-8";

:root {
  --rose:#F8DCEB;
  --pearl:#FFF8FB;
  --dusty-purple:#9E86A3;
  --ink:#533045;
  --smoke:#6F5168;
}

/* Links */
a:link,a:active,a:hover {
  color:var(--ink);
}

a:visited {
  color:var(--smoke);
}

/* Global reset & typography */
html,body {
  margin:0;
  font-family:Verdana,sans-serif;
  color:#666;
  background-color:var(--dusty-purple);
  background-image:url(https://img.mfcimg.com/photos2/464/46457744/621-508-445-714-14601389.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  text-align:center;
/* center inline content */
}

/* Main content boxes */
.profile_section_content {
  background-color:rgba(255,248,251,0.8);
  border-radius:12px;
  padding:20px;
  margin:20px auto;
/* center horizontally */
  max-width:800px;
/* limit width */
  box-shadow:0 6px 12px rgba(0,0,0,0.1);
  color:var(--ink);
  position:relative;
  z-index:1;
}

/* Section banners - static images inside header */
.profile_section_content .heading {
  background-image:url(https://i.imgur.com/wNwGfx9.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  background-color:var(--rose);
  color:var(--ink);
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:24px;
  padding:40px 20px;
  border-radius:30px;
  text-align:center;
  margin-bottom:15px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* Content padding */
.content {
  padding:5px;
}

/* News feed */
.my_mfc_news_feed {
  width:100%;
  height:330px;
}

/* Floating and falling pearls + shimmer effect */
body::after {
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  background:radial-gradient(circle 6px at 20% 0%,rgba(255 255 255 / 0.8),transparent 80%),radial-gradient(circle 8px at 50% -10%,rgba(255 255 255 / 0.6),transparent 80%),radial-gradient(circle 5px at 80% -5%,rgba(255 255 255 / 0.7),transparent 80%);
  background-repeat:no-repeat;
  animation:fall 20s linear infinite,shimmer 3s ease-in-out infinite alternate;
  z-index:0;
  mix-blend-mode:screen;
  pointer-events:none;
}

@keyframes fall {
  0% {
    background-position:20% 0%,50% -10%,80% -5%;
  }

  100% {
    background-position:20% 110%,50% 120%,80% 115%;
  }
}

@keyframes shimmer {
  0% {
    filter:brightness(1) saturate(1);
  }

  100% {
    filter:brightness(1.2) saturate(1.2);
  }
}