/* cleanpet.net: light and airy. Blush pink, cream and sage, with a faint rose bouquet in two corners and two soft ribbons.
   Text stays dark plum so it is easy to read; the art sits behind everything and never gets in the way. */
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
:root { --bg:#fff8fa; --top:#ffe9f0; --ink:#43303a; --muted:#7a6571; --card:#ffffff; --line:#f3d5df;
        --accent:#c4476f; --onaccent:#ffffff; --title:#a93a60; --nobg:#fff1f1; --yesbg:#eef7ee; --shadow:rgba(170,80,110,.22);
        --title-font:"Great Vibes","Brush Script MT","Segoe Script",cursive; --title-weight:400; --title-size:2.3rem; --login-title-size:3rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) {
        --bg:#2b1d24; --top:#46293a; --ink:#fdeef3; --muted:#d8bcc7; --card:#392630; --line:#66404f;
        --accent:#f2a0bc; --onaccent:#3b1d2a; --title:#f8c5d6; --nobg:#3f1d24; --yesbg:#1f3324; --shadow:rgba(0,0,0,.5); } }
h1 { text-shadow:0 .08rem .25rem rgba(170,80,110,.18); }

/* two soft ribbons across the top of the page, drawn in the page itself (no picture needed) */
body { background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='none'><path d='M0 70 C200 20 360 130 600 80 S1000 20 1200 70' fill='none' stroke='%23f6c6d6' stroke-width='14' stroke-linecap='round' opacity='.55'/><path d='M0 110 C240 60 420 170 660 120 S1040 70 1200 118' fill='none' stroke='%23d9e8d4' stroke-width='9' stroke-linecap='round' opacity='.6'/></svg>") top center / 100% 11rem no-repeat,
  linear-gradient(180deg, var(--top) 0, var(--bg) 16rem) no-repeat, var(--bg); }

/* a faint bouquet in the bottom-right corner and a mirrored one at the top-left, behind everything */
body::before, body::after { content:""; position:fixed; z-index:-1; pointer-events:none; background:url("bg-bouquet.webp") center / contain no-repeat; }
body::before { right:-8vw; bottom:-6vh; width:min(70vw, 560px); aspect-ratio:16 / 9; opacity:.30; }
body::after { left:-10vw; top:4rem; width:min(55vw, 420px); aspect-ratio:16 / 9; opacity:.16; transform:scaleX(-1) rotate(-8deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) body::before { opacity:.16; } :root:not([data-theme=light]) body::after { opacity:.08; } }
@media (min-width: 1100px) { body::before { width:min(46vw, 760px); } body::after { width:min(34vw, 560px); } }