[html]
<style>
.guestbook-main {width: 100%;
box-sizing: border-box; 
background: var(--sec-bg);
border-radius: 5px;
padding: 25px;
min-height: 400px;
border: 1px solid var(--light-accent)
}

.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: 50px;
    line-height: 200%;
color: var(--dark-accent);
z-index: 2;}

.brunch1 img {position: absolute;
width: 208px;
height: 313px;
transform: rotate(-106.84deg);
z-index: 0;
margin-left: -270%;
margin-top: -55%}

.brunch2  img {position: absolute;
width: 253px;
height: 126px;
transform: rotate(10.4deg);
margin-left: 170%;
margin-top: -32%;
z-index: 0;}

.owl img {
width: 48px;
height: 68px;
transform: matrix(-1, 0, 0, 1, 0, 0);
margin-left: -320%;
margin-top: 155%
}

.cone6 {position: absolute;
margin-top: 32px;
margin-left: 10px}

.cone5 {position: absolute;
margin-top: -92px;
margin-left: 87%;
z-index: 2;
}

.guest-about {position: absolute;
width: 617px;
z-index: 1;
margin-top: -40px;
margin-left: 145px;
background: var(--light-accent);
border: 1px solid var(--dark-accent);
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: 15px;
}

.column1 {
flex: 3;
font-style: normal;
font-weight: 400;
font-size: 9px;
line-height: 100%;
text-align: justify;
text-transform: lowercase;
color: var(--textcolor);
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: 1px solid var(--dark-accent);
border-radius: 3px;
padding-top: 1px;
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
}

.goose img {
position: absolute;
width: 96px;
height: 135px;
margin-top: -110px;
margin-left: 190px;
    z-index: 0;
    pointer-events: none;
}

.faces-roles-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.faces, .roles {
    flex: 1;
}

.faces-title, .roles-title {font-family: var(--extra-font);
color: var(--dark-accent);
text-align: center;
font-weight: bold;
font-size: 14px;
line-height: 88%;}

.faces-body, .roles-body {border: 1px solid var(--dark-accent);
border-radius: 5px;
padding: 5px;
margin-top: 10px;
background: #E3E4DF;
text-align: center;
min-height: 200px;
}

.faces-body a, .roles-body a {    position: relative;
    z-index: 10;}

.faces-body span, .roles-body span {background: var(--light-accent);
color: var(--sec-bg);
height: 10px;
padding: 0px 4px 4px 4px;
border-radius: 3px;
margin-bottom: 5px;
display: inline-block;
}

.guidelines {
width: 474px;
padding: 3px;
font-weight: 400;
font-size: 10px;
line-height: 88%;
text-align: center;
text-transform: lowercase;
color: var(--textcolor);
background: var(--light-accent);
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: 5px;
border: 1px solid var(--dark-accent)}

.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: rgb(152, 171, 177, 0.5); 
    border-radius: inherit;
    pointer-events: none;
}

.brunch1 img,
.brunch2 img,
.owl img,
.cone5 img,
.cone6 img,
.goose img {
    pointer-events: none;
}
</style>

<div class="guestbook-main">
    <div class="guest-header"><div class="cone6"><img src="https://forumstatic.ru/files/0014/d2/5e/16545.png"></div><div class="brunch1"><img src="https://forumstatic.ru/files/0014/d2/5e/11417.png?v=1"></div><div class="owl"><img src="https://forumstatic.ru/files/0014/d2/5e/54285.png"></div>Malleus Maleficarum<div class="brunch2"><img src="https://forumstatic.ru/files/0014/d2/5e/82989.png"></div><div class="cone5"><img src="https://forumstatic.ru/files/0014/d2/5e/62601.png"></div></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">appearances</div>
                    <div class="faces-body">

<span>09.01</span><br>
taissa farmiga — <a href="https://mmaleficarum.rusff.me/profile.php?id=282">rionach o`neal</a><br>
<span>30.01</span><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></div>
                </div>
                <div class="roles">
                    <div class="roles-title">roles</div>
                    <div class="roles-body">
<span>09.01</span><br>
hannah abbott — <a href="https://mmaleficarum.rusff.me/profile.php?id=282">rionach o`neal</a><br>
<span>30.01</span><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></div><br>
                </div>
            </div>
<div class="goose"><img src="https://forumstatic.ru/files/0014/d2/5e/61653.png?v=1"></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>
    </div>
</div>

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

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

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

[hideprofile]