#pun-viewtopic[data-forum-id="19"] .post:not(.topicpost) .post-author li, #pun-viewtopic[data-forum-id="19"] .post:not(.topicpost) .post-author .indOnline, 
#pun-viewtopic[data-forum-id="19"] .post:not(.topicpost) .post-author .indOffline, #pun-viewtopic[data-forum-id="19"] .post:not(.topicpost) .post-author .field_wrap2 {
 display: none !important; 
}

#pun-viewtopic[data-forum-id="19"] .post .post-author li.pa-author {
	display: block !important;
}

<!--HTML-->
<div id="htmk_wrap" class="html-headcanon">
 <div class="headcanon-container">
   
   <div class="headcanon-img">
        <img src="https://upforme.ru/uploads/001c/1a/06/5/74573.jpg">
      </div>
      <div class="headcanon-content">
        <span class="headcanon-title">Sumerian Records</span>
        <p class="headcanon-text">Sumerian Records - американский независимый звукозаписывающий лейбл в Найт Сити. Лейбл был основан в 2076 году Шоном Кизуки совместно с Мией Шах. Первой вышедшей пластинкой стал альбом "Do And Die" гличкор метал группы Infernal Land. Через год вышел мини-альбом "Raw" группы Doomsday, чтобы дать понять людям, что лейбл будет заниматься андеграундной музыкой разнообразных жанров. В 2078 с лейблом подписаны 10 активных команд. В интервью на радио Morro Rock, Шон Кизуки заявил: “Мы (Sumerian Records*прим.автора) стараемся дать свободу творчеству и самовыражению. Мы не собираемся выпускать по тысяче релизов каждый месяц, а хотим сосредоточиться на небольшом количестве, чтобы сфокусироваться и уделять как можно больше энергии на каждую группу в частности.”</p>
      </div>
    </div>
 <div class="headcanon-container">
   
   <div class="headcanon-img">
        <img src="https://upforme.ru/uploads/001c/1a/06/6/143783.png">
      </div>
      <div class="headcanon-content">
        <span class="headcanon-title">Банда киберкультистов 4Оллин</span>
        <p class="headcanon-text"><b>4Оллин</b> (</i>Четыре Движения // Пятое Солнце</i>) или <b>Весинес</b> (</i>vecines // 'cоседи'</i>) сформировались среди ядерного коллапса 2020-х, в надежде защитить своих близких и район от растущего насилия и нестабильности. Однако к 2070-м они утратили своё исходное предназначение и переросли в технокульт, проповедующий слияние человека с машиной. Они видят себя архитекторами новой эпохи, которой суждено подняться на новые высоты, и связывают себя с элементами мезоамериканской мифологии, особенно с концепцией <b>Науи Оллин</b>.
<br>
Их главарь претендует на "божественный" статус и проповедует единение духовного и материального (человеческого) через искусственный интеллект. Большинство последователей почитают ИИ как богоподобные сущности и считают себя избранными в грядущем мировом порядке, где человек и машина сольются воедино. Сомневающиеся либо исчезают, либо вынуждены подчиняться из страха.
<br>
Внешне Весинес кажутся дружелюбнее других банд, однако в действительности всё гораздо мрачнее. Среди горожан ходят слухи о без вести пропавших и о чудовищных "ритуалах", которые превращают жертв в гротескных чудовищ. Поговаривают даже, что лидер банды — не человек, а ИскИн, сумевший вырваться из-за Заслона.
<br>
Внутри банды уже давно зреет раскол между "духовным" пластом и фракцией "силы". Многие "силовики" не верят в нью-нью-эйдж чепуху и остаются ради власти и ресурсов. Для них духовная риторика - всего лишь удобный инструмент для управления фанатиками.
<br>
Пользуясь хаосом, оставшимся после катастрофы 2078, Весинес извлекали выгоду из страданий людей, вербуя тех, кто был сломлен кризисом, потерял жильё, близких или надежду. Присоединяются к ним, чтобы спастись или просто выжить, уйти удаётся немногим.</p>
      </div>
    </div>
</div></div>

<script>
// Создаем элементы для двух кругов
const cursorRing = document.createElement('div');
cursorRing.classList.add('cursor-ring');
document.body.appendChild(cursorRing);

const cursorSmallRing = document.createElement('div');
cursorSmallRing.classList.add('cursor-small-ring');
document.body.appendChild(cursorSmallRing);

// Находим блок с id="header"
const header = document.getElementById('main_header-wrap');

// Переменные для хранения координат
let mouseX = 0;
let mouseY = 0;
let ringX = 0;
let ringY = 0;

// Параметры задержки (параллакса)
const delay = 0.06;

// Обработчик события для движения мыши
document.addEventListener('mousemove', (e) => {
  if (header.contains(e.target) || header === e.target) {
    mouseX = e.pageX;
    mouseY = e.pageY;

    // Обновляем позицию маленького круга без задержки
    cursorSmallRing.style.left = `${mouseX}px`;
    cursorSmallRing.style.top = `${mouseY}px`;
  }
});

// Анимация, создающая эффект параллакса для большого круга
function animate() {
  // Интерполируем позиции для создания задержки только для большого круга
  ringX += (mouseX - ringX) * delay;
  ringY += (mouseY - ringY) * delay;

  // Обновляем позицию большого круга с учетом параллакса
  cursorRing.style.left = `${ringX}px`;
  cursorRing.style.top = `${ringY}px`;

  // Запускаем анимацию в следующем кадре
  requestAnimationFrame(animate);
}

// Когда мышь заходит на блок #header, показываем круги
header.addEventListener('mouseenter', () => {
  cursorRing.style.opacity = '1';
  cursorSmallRing.style.opacity = '1';
  animate();
});

// Когда мышь покидает блок #header, скрываем круги
header.addEventListener('mouseleave', () => {
  cursorRing.style.opacity = '0';
  cursorSmallRing.style.opacity = '0';
});

// Обработчики событий для изменения внешнего вида круга при наведении на элементы
const interactiveElements = header.querySelectorAll('a, button, .for'); // Обновили селектор для охвата всех элементов с :hover

interactiveElements.forEach(element => {
  element.addEventListener('mouseenter', () => {
    cursorRing.classList.add('shrink'); // Уменьшаем внешний круг
  });

  element.addEventListener('mouseleave', () => {
    cursorRing.classList.remove('shrink'); // Возвращаем исходный размер
  });
});
</script>

/* Личная страница */
.reveal-modal.xlarge {
	width: 692px;
	height: 320px;
	border: 0;
	border-top-color: currentcolor;
	border-right-color: currentcolor;
	border-bottom-color: currentcolor;
	border-left-color: currentcolor;
	background: var(--bg20) !important;
	margin-left: 89px !important;
	border-radius: 0px;
}

.modal_wrap {
	background: var(--bg) !important;
	margin: 14px 34px 11px !important;
	height: 290px;
	position: relative;
	background-position: left !important;
}

.reveal-modal-bg {
	position: fixed;
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0, 0, 0, .8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0;
}

.reveal-modal {
	visibility: hidden;
	top: 100px;
	margin-left: 82px;
	width: 520px;
	position: absolute;
	z-index: 101;
}

.reveal-modal .close-reveal-modal {
	font-size: 22px;
	position: absolute;
	top: 9px;
	right: 10px;
	color: var(--bg6);
	text-shadow: 0 -1px 1px rbga(0, 0, 0, .6);
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
	line-height: 23px;
	z-index: 1;
}

#character .menu {
	z-index: 1;
	position: absolute;
}

#character {
	background: var(--color20) !important;
	z-index: 999;
}

#submenu {
	height: 187px;
	width: 619px;
	margin-left: 25px;
	margin-top: 25px;
	color: #16221e;
	font: 400 11px ibm plex sans;
}

#submenu {
	display: inline-block;
}

#sm2 {
	background-size: auto;
	height: 236px;
	position: relative;
	top: -188px;
	width: 600px;
	left: 23px;
	background-size: cover;
}

.menu-links {
	display: flex;
	justify-content: space-between;
	width: 635px;
	margin-left: 25px;
	margin-top: 25px;
}

.submenutext {
	display: none;
	height: 40px;
}

.menu span {
	cursor: pointer;
	display: block;
	text-align: left;
	flex: 1;
	background: var(--color2);
	height: 36px;
	color: var(--color9);
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: lowercase;
	letter-spacing: 2px;
	font-size: 12px;
	margin-left: -22px;
	font-weight: normal;
	width: 18px;
	height: 138px !important;
	font-family: var(--t5) !important;
	padding-left: 4px !important;
}

.menu-links-1 {
	writing-mode: tb-rl;
	transform: rotate(180deg);
	height: 151px !important;
	width: 31px;
	position: absolute;
	top: 0;
	left: 0;
}

.menu span+span {
	margin-left: 25px;
}

.menu-links-2 {
	writing-mode: tb-rl;
	transform: rotate(180deg);
	height: 148px !important;
	width: 31px;
	position: absolute;
	top: 152px !important;
	left: -47px !important;
	width: 21px;
}

.char_leftblock {
	width: 167px;
	height: 234px;
	background: var(--bg);
	text-align: center;
	z-index: 20;
	position: absolute;
	margin-top: 2px !important;
	left: 216px;
	background-position: left;
}

.char_leftblock span {
	color: var(--bg6);
	text-transform: uppercase;
	padding: 8px 14px 6px !important;
	display: block;
	font-size: 11px;
	font-family: var(--t2) !important;
	letter-spacing: 3px;
}

.char_img {
	width: 100px;
	height: 100px;
	overflow: hidden;
	position: relative;
	margin: 0 auto !important;
	border: 1px solid var(--color10);
}

.char_img img {
	cursor: pointer;
	filter: grayscale(100%);
	transition: all .6s ease-in-out 0s;
	width: 100px !important;
	height: 100px !important;
	object-fit: cover;
}

#pun-main .post .email {
	display: none !important;
}

.char_img::after {
	content: "";
	width: 100px;
	height: 100px;
	display: block;
	top: 0px;
	left: 0;
	background: var(--color10);
	mix-blend-mode: multiply;
	position: absolute;
	transition: all .6s ease-in-out 0s;
}

.char_min_inf {
	text-align: center;
	overflow-y: auto;
	height: 81px;
	padding: 16px 10px 0;
}

.char_min_inf p {
	color: var(--bg6);
	font-weight: 500;
	font-size: 10px;
	text-align: center;
	margin-top: -11px;
	font-family: var(--t5) !important;
}

.char_rightblock {
	position: absolute;
	width: 458px;
	top: 88px;
	left: 300px;
}

.char_cita {
	height: 48px;
	justify-content: center;
	align-items: center;
	padding: 0 15px;
	text-align: right;
	font-family: 'Montserrat';
	color: #c4c5c5;
	font-weight: 600;
	position: absolute;
	top: -78px;
	right: 129px;
	font-size: 10px;
	display: none;
}

.char_max_info {
	padding: 0;
	text-align: justify !important;
	margin-top: 0px;
	color: #2f2f2f;
	font-weight: 400;
	font-size: 12px;
	position: absolute;
	right: 160px !important;
	width: 190px;
	top: -69px;
}

#profile #plng {
	margin: 3px 20px 10px 0px !important;
}

.page-left-3 {
	position: absolute;
	left: -383px;
	width: 165px;
	background: #9f9d97;
	padding: 0 0 0 0px !important;
	height: 250px;
	text-align: center;
	line-height: 18px;
	border: 1px solid rgba(99, 98, 94, 0.13) !important;
	background: var(--bg1) !important;
	border-radius: 0px;
}

.page-left-tit {
	background: var(--color20);
	margin-top: 0px !important;
	height: 19px;
	font-weight: normal;
	color: var(--color9) !important;
	font-family: var(--t5) !important;
	letter-spacing: 3px !important;
	text-transform: uppercase;
	font-size: 9px !important;
}

.menu .tabactive {
	background: var(--color15) !important;
	color: var(--bg6) !important;
}

.page-left-all {
	height: 208px;
	margin-top: 10px !important;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--scroll3);
}

.page-left-all a p {
	font-weight: 600;
	text-transform: lowercase;
	font-size: 10px;
	line-height: 11px;
	margin-bottom: 2px;
	color: var(--color12);
	font-family: var(--t5);
}

.page-left-all a span {
	font-weight: 500;
	text-transform: lowercase;
	font-size: 9px;
	line-height: 11px;
	color: var(--color16);
	font-family: var(--t5);
}

.page-left-all a {
	background: var(--bg4);
	width: 165px;
	display: block;
	margin: 0 auto 5px !important;
	border-width: 1px;
	border-bottom-width: 1px;
	box-sizing: border-box;
	padding: 3px 10px 4px !important;
	cursor: pointer;
	z-index: 6;
	position: relative;
	line-height: 8px !important;
	background: var(--bg5);
	border: 1px solid var(--color17) !important;
}

.page-left-all a:hover {
	background: var(--color15) !important;
}

.page-left-all-off {
	background: #8d9399 !important;
}

.page-left-all-one1 {
	background: #14161300 url(https://i.imgur.com/DHRA8Ph.png) no-repeat top left;
}

.page-left-all-one {
	float: left;
	position: relative;
	margin: 0 9px -2px !important;
	width: 60px;
	height: 58px;
	filter: grayscale(100%);
}

.page-left-all-one p {
	position: absolute;
	top: 11px;
	left: 9px;
	width: 42px;
	text-align: center;
	color: var(--color16);
	font-family: var(--t5);
	font-size: 15px;
	letter-spacing: 1px;
	background: var(--bg4);
	border-radius: 100%;
	height: 29px;
	padding-top: 12px !important;
}

.bk-main-all-bt-r .bk-main-all-bt-all {
	height: 155px !important;
}

.bk-main-all-bt-r {
	margin-top: -10px !important;
}

.page-left-all-one-2 {
	background: #14161300 url(https://i.imgur.com/LKufHCJ.png) no-repeat top left;
}

.page-left-all-one3 {
	background: #14161300 url(https://i.imgur.com/0M0IiR2.png) no-repeat top left;
}

.page-left-all-one4 {
	background: #14161300 url(https://i.imgur.com/xstPhi6.png) no-repeat top left;
}

.page-left-all-one2 {
	position: relative;
	margin: 0 0 0 37px !important;
	float: left;
	background: #14161300 url(https://i.imgur.com/8XVNCcM.png) no-repeat top left;
	height: 75px;
	width: 87px;
	filter: grayscale(100%);
}

.page-left-all-one2 p {
	position: absolute;
	top: 10px;
	left: 11px;
	width: 60px;
	text-align: center;
	color: var(--color16);
	font-family: var(--t5);
	font-size: 19px;
	letter-spacing: 1px;
	background: var(--bg1);
	border-radius: 100%;
	height: 40px;
	padding-top: 22px !important;
}

.page-left {
	height: 250px;
	line-height: 150%;
	width: 190px;
	text-align: center;
	background: #9f9d97;
	float: left;
	margin-right: 0px !important;
	border-radius: 5px;
	border: 1px solid rgba(99, 98, 94, 0.13) !important;
	background: var(--bg1) !important;
}

.page-left-2 {
	height: 250px;
	line-height: 150%;
	width: 190px;
	text-align: center;
	background: #8e8d88;
	float: left;
	z-index: 11;
	position: relative;
	display: none;
}

.team_aw_block {
	margin-top: 0 !important;
	height: 234px;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 16px;
	right: 20px;
	width: 550px;
}

.page-b2 {
	width: 599px;
	margin-left: -43px !important;
	margin-top: -29px !important;
	display: none;
}

.team_aw_block>div {
	padding: 1px 0 0 !important;
	flex: 1;
}

.team_awards {
	position: absolute;
	left: -19px;
	width: 555px;
	top: -27px;
	display: none;
}

.team_gifts {
	position: absolute;
	left: -18px;
	width: 265px;
	top: -38px;
}

.team_aw_block>div>span {
	display: block;
	background: var(--color20);
	text-transform: lowercase;
	text-align: center;
	padding: 3px 0 3px;
	font-size: 12px;
	line-height: 15px;
	margin-bottom: -6px !important;
	margin-top: 0px !important;
	height: 15px;
	font-weight: normal;
	color: var(--bg6) !important;
	font-family: var(--t5) !important;
	letter-spacing: 3px !important;
}

.team_aw_block>div>div {
	height: calc(100% - 30px);
	overflow-y: auto;
	margin-top: 6px;
	text-align: center;
	padding: 8px 10px 13px !important;
}

.team_gifts div {
	width: 244px !important;
	height: 125px !important;
	overflow-y: auto !important;
	scrollbar-width: thin;
	padding-top: 5px !important;
	scrollbar-color: var(--scroll3) !important;
	background: var(--bg5) !important;
	border: 1px solid var(--color17);
}

.team_gifts div img {
	margin: 0 4px 3px !important;
	width: 48px;
	height: 50px;
	object-fit: contain;
}

.team_plashes {
	position: absolute;
	left: 275px;
	width: 265px;
	top: -38px;
	text-align: center;
}

.team_plashes .userpl-all {
	margin: 6px 0 3px 5px !important;
	width: 221px;
}

.team_plashes2 {
	position: absolute;
	left: 11px;
	width: 562px;
	top: 153px;
	text-align: center;
}

.team_plashes2 .userpl-all {
	width: 561px !important;
	height: 76px !important;
	overflow-x: auto !important;
	scrollbar-width: thin;
	scrollbar-color: #b2b2c1 rgb(192, 192, 206);
	padding-top: 7px !important;
	scrollbar-color: var(--scroll3) !important;
	background: #9f9d97;
	text-align: center;
	overflow-x: auto !important;
	background: var(--bg5) !important;
	border: 1px solid var(--color17);
}

.team_plashes2 .rub img {
	margin-bottom: 2px !important;
	width: 230px !important;
	height: 130px;
	object-fit: cover;
}

.team_plashes2 .rub {
	display: initial;
	margin: 0 10px 6px !important;
}

.team_plashes2 span {
	display: block;
	background: var(--color20);
	text-transform: lowercase;
	text-align: center;
	padding: 3px 0 9px !important;
	font-size: 12px;
	line-height: 15px;
	margin-bottom: -6px !important;
	margin: 0 23px;
	margin-bottom: 0px;
	margin-top: 0px !important;
	height: 15px;
	font-weight: normal;
	color: var(--bg6) !important;
	font-family: var(--t5) !important;
	letter-spacing: 3px !important;
}

#pun-index tr.inew .tclcon::before {
	content: "";
	width: 32px;
	position: absolute;
	left: 7px;
	top: -16px;
	height: 32px;
	background: url(https://forumstatic.ru/files/001b/d4/18/74026.png);
	background-size: auto;
	z-index: 5 !important;
	background-size: cover;
}

#pun-index tr.inew .tclcon h3 a {
	color: var(--color2) !important;
}

.team_plashes .userpl-all {
	width: 240px !important;
	height: 125px !important;
	overflow-y: auto !important;
	scrollbar-width: thin;
	scrollbar-color: #b2b2c1 rgb(192, 192, 206);
	padding-top: 7px !important;
	scrollbar-color: var(--scroll3) !important;
	background: #9f9d97;
	border-radius: 5px;
	background: var(--bg5) !important;
	border: 1px solid var(--color17);
}

.team_plashes .pl-all2 {
	margin-bottom: 2px !important;
}

.pl-all .userpl img {
	width: 220px;
	margin-top: 0px !important;
	height: 40px;
	object-fit: cover;
}

.userpl max {
	display: block;
	height: 20px;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
	color: #7d7c79;
	position: absolute;
	top: 8px;
	letter-spacing: 2px;
	margin-right: -1px !important;
	border-left: 0 !important;
	line-height: 18px !important;
	margin-left: 0;
	font-weight: 700;
	width: 220px;
	font-size: 9px;
	font-family: 'MOLIKA';
}

.userpl min {
	display: block;
	height: 14px;
	color: #8c8b86;
	text-transform: lowercase;
	text-align: center;
	letter-spacing: 1px;
	margin-top: 1px;
	margin-left: 0;
	position: absolute;
	left: 0;
	width: 220px;
	font-family: Arial;
	top: 21px;
	font-size: 8px;
}

.pl-all .userpl {
	width: 188px;
	position: relative;
	margin-top: 1px !important;
	margin-left: 7px !important;
}