[html]
<style>
body {
    background: none !important;
    position: relative !important;
    overflow: visible !important;
    width: 100%;
    padding-top: 35px !important;
min-height: 520px;
}

.guestbook-main {
  width: 100%;
  box-sizing: border-box;
  background: var(--body-bg);
  border-radius: 20px;
  min-height: 400px;
  padding: 20px;
position: relative;
overflow: visible;
}

.inner {background: var(--pun-bg);
padding: 10px;
  border-radius: 20px;
position: relative;
z-index: 2;}

.shit {
position: absolute;
    top: -53px;
    left: 217px;
    z-index: -1;
}

.decor-left {position: absolute;
top: -19px;
left: -25px;}
.decor-right {position: absolute;
left: 98%;
top: -19px}
.decor-left img, .decor-right img {width: 40px;
height: 139px;
object-fit: contain}

.shit img {
    display: block;
    object-fit: fill;
width: 424px;
height: 501px;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  height: auto;
  background-color: var(--sec-bg);
  color: var(--textcolor);
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 999;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s;
  font-size: 9px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
  line-height: 1.4;
  overflow: hidden;
  top: 10px;
  padding: 5px;
  min-width: 100px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.guest-header {
width: 211px;
    font-family: var(--extra-font);
    font-size: 23px;
    line-height: 19px;
    color: var(--textcolor);
    z-index: 2;
    text-align: center;
    text-transform: lowercase;
    position: relative;
    letter-spacing: 0.05em;
    margin: 0 auto;
}

.guest-about {
position: relative;
    width: 100%;
    box-sizing: border-box;
    background: var(--dark-accent);
    color: var(--link-hover);
    border-radius: 10px;
    text-align: center;
    padding: 3px;
    margin-bottom: 10px;
}

.deadlist {
  position: relative; 
  width: 100%;   
  box-sizing: border-box;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.4;   
  text-transform: lowercase;
  margin-top: 10px;
  text-align: justify;
}

.guest-table {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.column1 {
flex: 4;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    text-align: justify;
    text-transform: lowercase;
    box-sizing: border-box;
    z-index: 10;
    min-width: 24%;
color: var(--link-hover);
}

.column1 span {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  text-transform: lowercase;
  box-sizing: border-box;
  background: var(--dark-accent);
  border-radius: 8px;
  padding: 2px 4px;
  margin-bottom: 5px;
color: var(--link-hover);
}

.column1 a {
  color: var(--link-hover);
}

.column1 a:hover {
  color: var(--link);
}

.column2 {
  width: 54%;
  box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 25px;}

.column3 {
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 200px;   
  flex-shrink: 0; 
padding-right: 5px;
color: var(--link-hover);
}

.faces-roles-container {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.faces, .roles {
  flex: 1;
}

.faces-title, .roles-title {
  font-family: var(--extra-font);
  color: var(--link);
  text-align: center;
  font-size: 18px;
  line-height: 88%;
border-bottom: 1px dashed var(--link);
margin-bottom: 5px;
padding-bottom: 5px;
}

.faces-body, .roles-body {
border-radius: 20px;
    padding: 5px;
    background: var(--sec-bg);
    color: var(--textcolor);
    text-align: center;
    min-height: 300px;
width: 175px;
    text-transform: lowercase;
}

.faces-body {margin-left: 11px}
.roles-body {margin-right: 15px}

.faces-body a, .roles-body a {
  position: relative;
  z-index: 10;
  color: var(--textcolor);
}

.faces-body a:hover, .roles-body a:hover {
  color: var(--link);
}

.guidelines {
    width: 80%;
    padding: 3px;
    font-size: 9px;
    line-height: 88%;
    text-align: center;
    text-transform: lowercase;
    color: var(--light-accent);
    background: var(--podforum);
    border-radius: 8px;
    box-sizing: border-box;
margin-left: 42px;
}

.guest-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  z-index: 10;
  padding-top: 10px;
  justify-content: center;
}

.guest-links a:hover {
  background: var(--dark-accent);
}

.guest-links a {
  color: var(--light-accent);
  background: var(--podforum);
  padding: 2px 5px;
  border-radius: 8px;
}

.guest-links a:hover {background: var(--body-bg);}

.guest-ams {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 100%;
    margin: 0 auto;
flex-wrap: nowrap;
}

.image-container {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
background: var(--acts-fon-img) center / contain no-repeat;

}

.image-container img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  object-position: top center;
  background: var(--light-accent);
  border-radius: 50%;
margin-top: 5px;
}

.overlay {
  position: absolute;
  top: 5px;
  left: 4px;
  width: 32px;
  height: 32px;
  background: var(--light-accent);
  border-radius: 50%;
  pointer-events: none;
opacity: .5;
}

</style>

<div class="guestbook-main">
<div class="inner">

  <div class="decor-left"><img src="https://forumstatic.ru/files/0014/d2/5e/82955.png"></div>
  <div class="decor-right"><img src="https://forumstatic.ru/files/0014/d2/5e/34834.png"></div>
  <div class="shit"><img src="https://upforme.ru/uploads/0014/d2/5e/2/413873.png"></div>
  <div class="hat"></div>

  <div class="guest-table">
    <div class="column1">
      <span><a href="https://mmaleficarum.rusff.me/viewtopic.php?id=5#p5">faq</a> ✦ <a href="https://mmaleficarum.rusff.me/viewtopic.php?id=10">правила</a> ✦ <a href="https://mmaleficarum.rusff.me/viewtopic.php?id=20#p1679">сюжет и хронология</a></span>
      <div class="guest-links">
        <a href="https://mmaleficarum.rusff.me/viewtopic.php?id=33#p4607">внешности</a>
        <a href="https://mmaleficarum.rusff.me/viewtopic.php?id=64#p5558">должности</a>
        <a href="https://mmaleficarum.rusff.me/viewtopic.php?id=844#p101443">сюжетные персонажи</a>
        <a href="https://mmaleficarum.rusff.me/viewtopic.php?id=3">нужные</a>
        <a href="https://mmaleficarum.rusff.me/viewtopic.php?id=9#p9">шаблон анкеты</a>
        <a href="https://mmaleficarum.rusff.me/viewtopic.php?id=4">хочу к вам</a>
      </div>
      <p>победа тёмного лорда во второй магической войне погрузила великобританию в мрак и хаос. внезапной силой, давшей решительный отпор, стали магглы в кооперации с остатками оф. инициация тайного протокола «молот ведьм» («malleus maleficarum») привела к разрушениям и гибели самого волдеморта. но успех оказался временным. вскоре волшебный мир ждало новое возвращение тёмного лорда, на этот раз — долгосрочное. за минувшие годы магическое общество великобритании в полной мере ощутило на себе тоталитаризм нового режима, репрессии и дискриминацию. население разделено на касты по чистоте крови, а границы закрыты. вся надежды на сопротивление — мятежную сеть, масштабу которой позавидовал бы сам орден феникса.</p>
    </div>

    <div class="column2"> 
<div class="guest-header">Malleus Maleficarum</div>
      <div class="guidelines">внешности и роли за гостями придерживаем на сутки; <br>для зарегистрированного профиля - на три дня с возможностью продления до трёх раз</div>
      <div class="faces-roles-container">
        <div class="faces">

          <div class="faces-body">
         <div class="faces-title">внешности</div>
<b>до 12.10</b><br>
max minghella — <a href="https://mmaleficarum.rusff.me/profile.php?id=419">castor lestrange</a><br>

          </div>
        </div>
        <div class="roles">
          <div class="roles-body">          <div class="roles-title">роли</div>
<b> до 12.10</b><br>
castor lestrange — <a href="https://mmaleficarum.rusff.me/profile.php?id=419">castor lestrange</a><br>
<b> до 14.10</b><br>
rabastan lestrange — <a href="ссылка">rabastan lestrange</a><br>
Madam Primpernelle — <a href="https://mmaleficarum.rusff.me/profile.php?id=423">живёт на крыше</a><br>
          </div>
        </div>
      </div>
    </div>

    <div class="column3">
      <div class="guest-about"><b>hp: dark au // 2nd generation — 2008 рейтинг: NC-21 // мастеринг: смешанный</b><br>
      победа темного лорда, антиутопия, кастовое общество, конфликт с магглами и активное сопротивление</div>

      <div class="guest-ams">
        <div class="tooltip">
          <a href="https://mmaleficarum.rusff.me/profile.php?id=5">
            <div class="image-container">
              <img src="https://upforme.ru/uploads/001c/3b/dd/226/593755.gif">
              <div class="overlay"></div>
            </div>
          </a>
          <span class="tooltiptext">куратор сопротивления и наших сердечек, сюжетник</span>
        </div>

        <div class="tooltip">
          <a href="https://mmaleficarum.rusff.me/profile.php?id=27">
            <div class="image-container">
              <img src="https://upforme.ru/uploads/001c/3b/dd/226/445813.gif">
              <div class="overlay"></div>
            </div>
          </a>
          <span class="tooltiptext">куратор мунго и подрывник наших мозгов</span>
        </div>

        <div class="tooltip">
          <a href="https://mmaleficarum.rusff.me/profile.php?id=161">
            <div class="image-container">
              <img src="https://upforme.ru/uploads/001c/3b/dd/161/481676.gif">
              <div class="overlay"></div>
            </div>
          </a>
          <span class="tooltiptext">куратор пожирателей и азартный мотиватор</span>
        </div>

     <div class="tooltip">
          <a href="https://mmaleficarum.rusff.me/profile.php?id=215">
            <div class="image-container">
              <img src="https://upforme.ru/uploads/001c/3b/dd/226/274665.gif">
              <div class="overlay"></div>
            </div>
          </a>
          <span class="tooltiptext">куратор домп и нашего чувства прекрасного</span>
        </div>

    <div class="tooltip">
          <a href="https://mmaleficarum.rusff.me/profile.php?id=351">
            <div class="image-container">
              <img src="https://upforme.ru/uploads/001c/3b/dd/161/926744.gif">
              <div class="overlay"></div>
            </div>
          </a>
          <span class="tooltiptext">следит чтобы в админке все не переругались</span>
        </div>
      </div>

      <div class="deadlist"><b>список убитых:</b> remus lupin, sirius black, arthur weasley, molly weasley, minerva mcgonagall, rubeus hagrid, bellatrix lestrange, dean thomas, xenophilius lovegood, rodolphus lestrange, arabella figg, vernon dursley, emmeline vance, lucius malfoy, nott sr., corban yaxley, augustus rookwood, walden mcnair, pyrites, travers sr., antonin dolohov, amycus carrow, jugson, avery sr., rosier sr., wilkesj, ludo bagman, sky parkin, cormac mclaggen, orion amari, jasper nottley, maura kettleback, alias gampthorn, corvin thisleby, basil horton, garold dingle, alban filch, verena hope, henry tonks, alastor moody, mayveline warrington, blaise zabini, ceres lestrange, nymphadora tonks, elian rosier, tbc.</div>
    </div>
  </div>
</div>
</div>
[/html]
занять роль и/или внешность

внешность — <a href="ссылка">ник</a><br>

роль — <a href="ссылка">ник</a><br>

[hideprofile]