[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..800;1,300..800&display=swap');
@font-face { font-family: "fine"; src: url(https://forumstatic.ru/files/001b/73/d1/67460.otf); }

html, body { margin: 0 !important; padding: 0 !important; background: #f4f4f4 !important; background-color: #f4f4f4 !important; }
html[data-th="dark"], html[data-th="dark"] body { background: #d7d7d7 !important; background-color: #d7d7d7 !important; }

#ab {
  --card: #ececea;
  --ink: #3a3a3a;
  --acc: #75424a;
  --line: rgba(58,58,58,.28);
  --acc-line: rgba(117,66,74,.45);
  --serif: "fine", "Playfair Display", serif;
  --sans: "Mulish", "Manrope", Arial, sans-serif;
}
#ab[data-theme="dark"] {
  --card: #cfcfcc;
  --ink: #333d33;
  --acc: #415549;
  --line: rgba(51,61,51,.32);
  --acc-line: rgba(65,85,73,.5);
}
#ab, #ab * { box-sizing: border-box; }

#ab {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 0;
  font-family: var(--sans);
  color: var(--ink);
}

#ab .ab-img { position: relative; z-index: 1; text-align: center; margin-bottom: -46px; }
#ab .ab-img img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--acc-line);
}

#ab .ab-block {
  position: relative;
  z-index: 2;
  margin: 0 22px 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  padding: 18px 20px 18px;
  background: var(--card);
  border: 1px solid var(--acc-line);
  border-radius: 10px;
}

#ab .ab-title {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.2;
  text-transform: lowercase;
  color: var(--acc);
}

#ab .ab-hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 12px;
}

#ab .ab-text {
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}

#ab .ab-sign {
  text-align: center;
  font-size: 11px;
  letter-spacing: .4px;
  color: var(--acc);
}
</style>
<script>try{var t0=window.parent.document.documentElement.getAttribute("data-forum-theme")==="dark"?"dark":"light";document.documentElement.style.colorScheme=t0;document.documentElement.setAttribute("data-th",t0)}catch(e){}</script>

<div id="ab" data-theme="light">

  <div class="ab-img">
    <img src="https://upforme.ru/uploads/001c/a5/83/2/466840.png" alt="картинка">
  </div>

  <div class="ab-block">
    <h3 class="ab-title">азкабан</h3>
    <hr class="ab-hr">
    <div class="ab-text">
тобі пизда тікай з городу<br>
но сильно не напрягайся
    </div>
  </div>

<script>
(function () {
  var box = document.getElementById("ab");
  if (!box) return;
  function set(t) {
    var th = t === "dark" ? "dark" : "light";
    box.setAttribute("data-theme", th);
    document.documentElement.style.colorScheme = th;
    document.documentElement.setAttribute("data-th", th);
  }
  try {
    var root = window.parent.document.documentElement;
    set(root.getAttribute("data-forum-theme") || "light");
    new MutationObserver(function () { set(root.getAttribute("data-forum-theme") || "light"); })
      .observe(root, { attributes: true, attributeFilter: ["data-forum-theme"] });
  } catch (e) {}
  window.addEventListener("message", function (e) {
    if (e.data && e.data.forumTheme) set(e.data.forumTheme);
  });
  try { window.parent.postMessage({ lstReady: 1 }, "*"); } catch (e) {}
})();
</script>

</div>
[/html]
[hideprofile]