[html]
<style>
.guestbook-main {width: 100%;
box-sizing: border-box; 
background: var(--footer);
border-radius: 20px;
min-height: 400px;
padding: 10px;
}

.egg img {width: 159px;
height: 106px;
object-fit: contain
}

.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: 10;
padding: 5px;
min-width: 100px;
}

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

.guest-header {    font-family: var(--extra-font);
    font-size: 70px;
    line-height: 200%;
color: var(--link);
margin-top: -40px;
z-index: 2;}

.guest-about {position: absolute;
width: 617px;
z-index: 1;
margin-top: -40px;
margin-left: 145px;
background: var(--dark-accent);
color: var(--sec-bg);
border-radius: 3px;
text-align: center;
padding: 3px}

.deadlist {
position: absolute;
width: 701px;
height: 40px;
font-style: normal;
font-weight: 400;
font-size: 9px;
line-height: 9px;
text-transform: lowercase;
color: var(--link);
margin-left: 165px;
}

.guest-table {
    margin-top: 60px;
    display: flex;
    flex-direction: row;
gap: 5px;
}

.column1 {
flex: 3;
font-style: normal;
font-weight: 400;
font-size: 9px;
line-height: 100%;
text-align: justify;
text-transform: lowercase;
color: var(--sec-bg);
box-sizing: border-box;
z-index: 10;
}

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

.column2 {width: 54%;
box-sizing: border-box;}

.column3 {box-sizing: border-box;
    text-align: center;
display: flex;
    flex-direction: column;
width: 22%;
justify-content: center
}

.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(--dark-accent);
text-align: center;
font-size: 20px;
line-height: 88%
}

.faces-body, .roles-body {border-radius: 5px;
padding: 5px;
margin-top: 10px;
background: var(--topic-overlay);
color: var(--sec-bg);
text-align: center;
min-height: 200px;
text-transform: lowercase;
}

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

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

.guidelines {
width: 474px;
padding: 3px;
font-weight: 400;
font-size: 10px;
line-height: 88%;
text-align: center;
text-transform: lowercase;
color: var(--sec-bg);
background: var(--link);
border-radius: 3px;
margin-bottom: 10px;
}

.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(--sec-bg);
background: var(--light-accent);
padding: 2px 5px;
border-radius: 3px;
}

.guest-ams {
    display: flex;
    flex-wrap: wrap;       
    gap: 5px;         
    justify-content: center;
}

.guest-ams img {width: 65px;
height: 30px;
background: var(--light-accent);
    object-fit: cover;
    object-position: top center;
border-radius: 5px;
position: relative;
}

.image-container {
    position: relative; 
    width: 65px;
    height: 30px;
    border-radius: 5px;
    overflow: hidden; 
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    background: var(--light-accent);
    border-radius: inherit;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-color); 
    border-radius: inherit;
    pointer-events: none;
}
</style>

<div class="guestbook-main">
    <div class="guest-header">Malleus Maleficarum</div>
    <div class="guest-about">hp: dark au // 2nd generation — 2008 рейтинг: NC-21 // мастеринг: смешанный<br>
    победа темного лорда, антиутопия, кастовое общество, конфликт с магглами и активное сопротивление</div>
    <div class="deadlist">список убитых: 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, tbc.</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>
            <p>победа тёмного лорда во второй магической войне погрузила великобританию в мрак и хаос. внезапной силой, давшей решительный отпор, стали магглы в кооперации с остатками оф. инициация тайного протокола «молот ведьм» («malleus maleficarum») привела к разрушениям и гибели самого волдеморта. но успех оказался временным. вскоре волшебный мир ждало новое возвращение тёмного лорда, на этот раз — долгосрочное. за минувшие годы магическое общество великобритании в полной мере ощутило на себе тоталитаризм нового режима, репрессии и дискриминацию. население разделено на касты по чистоте крови, а границы закрыты. вся надежды на сопротивление — мятежную сеть, масштабу которой позавидовал бы сам орден феникса.</p>
        </div>
        <div class="column2">
            <div class="guidelines">внешности и роли за гостями придерживаем на сутки; <br>для зарегистрированного профиля - на три дня с возможностью продления до трёх раз</div>
            <div class="faces-roles-container">
                <div class="faces">
                    <div class="faces-title">внешности</div>
                    <div class="faces-body">

<b>18.03</b><br>
oliver jackson cohen  — <a href="https://mmaleficarum.rusff.me/profile.php?id=352">neville longbottom</a><br>
<b>30.03</b><br>
margot robbie - <a href="https://mmaleficarum.rusff.me/profile.php?id=215">ronald weasley</a><br>
jacob elordi - <a href="https://mmaleficarum.rusff.me/profile.php?id=215">ronald weasley</a><br>
<b>13.04</b><br>
jenna coleman — <a href="https://mmaleficarum.rusff.me/profile.php?id=264">octavia rowle</a><br>
</div>
                </div>
                <div class="roles">
                    <div class="roles-title">роли</div>
                    <div class="roles-body">

<b>18.03</b><br>
neville longbottom — <a href="https://mmaleficarum.rusff.me/profile.php?id=352">neville longbottom</a><br>
<b>30.03</b><br>
gwenog jones - <a href="https://mmaleficarum.rusff.me/profile.php?id=215">ronald weasley</a><br>
ernie macmillan - <a href="https://mmaleficarum.rusff.me/profile.php?id=215">ronald weasley</a><br>
</div>
                </div>
            </div>
        </div>
        <div class="column3">
      <div class="guest-ams">
                       <span 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></span>
           

      <span 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></span>

     <span 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/226/43499.gif">
        <div class="overlay"></div>
    </div>
</a><span class="tooltiptext">куратор пожирателей и азартный мотиватор</span></span>

      <span 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></span>
</div>

      <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>

<div class="egg"><img src="https://forumstatic.ru/files/0014/d2/5e/46986.png"></div>
        </div>
    </div>
</div>

[/html]
занять роль и/или внешность

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

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

[hideprofile]