Внешности и роли

[html] <style>
.charlist {
width: 100%;
height: auto;
position: relative;
z-index: 4;

}

.charlist * {
box-sizing: border-box;
}

.charlist::before {
content: '';
width: 96%;
background: url(https://forumstatic.ru/files/001c/7f/90/17990.png) no-repeat top/ 100%;
height: 60px;
position: absolute;
display: block;
top: -27px;
left: 50%;
transform: translatex(-50%);
z-index: -1;
}

.charlist::after{
content: '';
width: 120px;
height: 120px;
top: -40px;
right: -12px;
position: absolute;
background: url(https://forumstatic.ru/files/001c/7f/90/31153.png) no-repeat center / 100%;
z-index: 5;
pointer-events: none;
}

.charlist input[type="radio"] {
display: none;
}

.chartabs {
display: flex;
justify-content: center;
gap: 50px;
}

.chartab-label {
margin-bottom: 10px;
flex-shrink: 0;
padding: 2px 20px;
height: 20px;
width: fit-content;
border-radius: 50px;
background: rgba(177, 177, 177, 1);
text-align: center;
cursor: pointer;
position: relative;
transition: background 0.2s;
outline: 2px solid rgba(110, 99, 88, 0.23);
text-transform: lowercase;
font-family: Verdana;
font-weight: 400 !important;
font-size: 12px;
color: rgba(92, 92, 92, 1);
}

#chartab1:checked ~ .charcontent #charcontent1 {
display: block;
}

#chartab2:checked ~ .charcontent #charcontent2 {
display: grid;

}

.charcontent > div {
display: none;
background: white;
padding: 20px;
border-radius: 5px 5px 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#chartab1:checked ~ .chartabs label[for="chartab1"],
#chartab2:checked ~ .chartabs label[for="chartab2"] {
background: rgba(110, 125, 75, 1);
outline: 2px solid rgba(110, 99, 88, 0.23);
color: white;
}

lt {
display: flex;
font-weight: 700;
font-size: 14px;
width: 25px;
height: 25px;
margin: 20px 0 15px!important;
position: relative;
border-radius: 50%;
border: 1px dashed gray;
align-items: center;
justify-content: center;
break-inside: avoid;
}

lt:first-of-type {
margin-top: 0px!important;
}

lt::before {
content:'';
border-bottom: 1px dashed gray;
width: 150px;
height: 1px;
display: block;
position: absolute;
left: 25px;
top: 50%;
transform: translatey(-50%);
}

#charcontent1 {
white-space: pre-line;
columns: 2;
padding: 20px 20px 20px 140px;

}

#charcontent2 {
grid-template-columns: repeat(5, 1fr);
gap: 20px;
grid-auto-rows: auto;
width: 100%;
}

#charcontent2 input {
height: 20px;
border-radius: 4px;
background: rgb(var(--canvas-post-body));
width: 170px;
}

#charcontent2 charcont {
background: rgb(var(--canvas-secondary-rgb));
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
border-radius: 10px;
font-size: 11px;
text-transform: lowercase;
color: rgb(var(--text-primary), .5);
text-align: left;
}

#charcontent2 > span {
grid-column: span 5;
text-align: center;
font-size: 15px;
height: 4px;
font-weight: 900;
text-transform: uppercase;
font-family: 'Pragmatica';
color: rgb(var(--gray-text));
}

#charcontent2 > button {
grid-column: span 5;
text-align: center;
font-size: 11px;
height: 20px;
border: none;
cursor: pointer;
padding: 3px 25px;
width: fit-content;
justify-self: center;
font-weight: 600;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Pragmatica';
color: rgb(var(--gray-text));
box-shadow: 0 0 0px rgba(0,0,0,0);
transition: .3s ease-in-out;
}

#charcontent2 > button:hover {
color: rgb(0, 0, 0, .6);
background: rgb(var(--accent), .4);
box-shadow: 0 0 5px rgba(0,0,0,0.1);

}
#charcontent2 a {
width: 100%;
text-align: center;
border-bottom: 1px dashed grey;
padding-bottom: 7px;
}

</style>

<div class="chartabs">
<label for="chartab1" class="chartab-label">список внешностей </label>
<label for="chartab2" class="chartab-label">список персонажей </label>
</div>

<div class="charcontent">

<div id="charcontent1">
<lt> A </lt>
Ana de Armas - <a href='https://yourworld.f-rpg.me/profile.php?id=34'> Diana Fray </a>
Andy Biersack - <a href='https://yourworld.f-rpg.me/profile.php?id=38'> Эзра Ларсен </a>
Ashley Greene - <a href='https://yourworld.f-rpg.me/profile.php?id=46'> Хлоя Беккер </a>

<lt> C </lt>
Cillian Murphy - <a href='https://yourworld.f-rpg.me/profile.php?id=23'> Thomas Lee</a>

<lt> D </lt>
Danielle Campbell - <a href='https://yourworld.f-rpg.me/profile.php?id=57'> Daniella van Leeuwen </a>

<lt> E </lt>
Emilia Clarke - <a href='https://yourworld.f-rpg.me/profile.php?id=24'> Rebecca Jones </a>
Ester Expósito - <a href='https://yourworld.f-rpg.me/profile.php?id=56'> Anastasia Vargas </a>

<lt> H </lt>
Harry Shum Jr. - <a href='https://yourworld.f-rpg.me/profile.php?id=19'> Bane Nordstrom </a>
Henry Cavil - <a href='https://yourworld.f-rpg.me/profile.php?id=42'> Gwineblade Siannodel </a>
Hande Erçe - <a href='https://yourworld.f-rpg.me/profile.php?id=51'> Eliana Thorn </a>
<lt> I </lt>
Ian Somerhalder - <a href='https://yourworld.f-rpg.me/profile.php?id=26'> Jonathan Blacknight </a>

<lt> J </lt>
Jared Padalecki- <a href='https://yourworld.f-rpg.me/profile.php?id=27'> Victor Brown </a>
Ji Seong - <a href='https://yourworld.f-rpg.me/profile.php?id=41'> Song Yo-han </a>

<lt> K </lt>
Katherine McNamara - <a href='https://yourworld.f-rpg.me/profile.php?id=25'> Alexandra Norton </a>
Katheryn Winnick - <a href='https://yourworld.f-rpg.me/profile.php?id=53'> Arrika Ruth </a>
Kiernan Shipka - <a href='https://yourworld.f-rpg.me/profile.php?id=35'> Ophelia Phelps </a>
K.J.Apa - <a href='https://yourworld.f-rpg.me/profile.php?id=17'> Stephen Kennet </a>

<lt> L </lt>
Lucy Boynton - <a href='https://yourworld.f-rpg.me/profile.php?id=36'> Arlene Myers </a>

<lt> M </lt>
Mads mikkelsen - <a href='https://yourworld.f-rpg.me/profile.php?id=39'> Robert Vargas </a>

<lt> O </lt>
Orlando Bloom - <a href='https://yourworld.f-rpg.me/profile.php?id=50'> Randall Garrett </a>

<lt> S </lt>
Sabrina Carpenter - <a href='https://yourworld.f-rpg.me/profile.php?id=45'> Isabelle Lewis </a>
Sebastian Stan - <a href='https://yourworld.f-rpg.me/profile.php?id=44'> Isaac Gardner </a>
Song Jiyang - <a href='https://yourworld.f-rpg.me/profile.php?id=31'> Wang Xiaoyu </a>

<lt> T </lt>
Taylor Swift - <a href='https://yourworld.f-rpg.me/profile.php?id=37'> Lucille Heartfild </a>
Timothée Chalamet - <a href='https://yourworld.f-rpg.me/profile.php?id=12'> Justin Elmers </a>

<lt> Z </lt>
Name Surname - <a href='#'> Charname Charsurname </a>

</div>

поиск:

<button id='resetBtn'> сбросить </button>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=17'> Стивен Кеннет </a>

<chrace>Раса: человек</chrace>

<chplace>Живет: США, Орегон </chplace>

<chocc>Работает: летчик </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=34'> Диана Фрэй </a>

<chrace>Раса: проклятая, человек</chrace>

<chplace>Живет:сша, лос-анджелес </chplace>

<chocc>Работает: профессор, археолог </chocc>

<chcanon>Статус: insp. by индиана джонс </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=23'> Аид </a>

<chplace>Живет:подземное царство </chplace>

<chocc>Работает: сопровождение душ</chocc>

<chcanon>Статус:Аид</chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=37'> Люсиль Хартфилд </a>

<chrace>Раса: вирм лимба </chrace>

<chplace>Живет:США, Лос-Анджелес / Лимб </chplace>

<chocc>Работает: наемник </chocc>

<chcanon>Статус: прототип Люси Хартфилия (аниме "Хвост Феи") </chcanon>

</charcont>

<charcont>
<a href='#'> Бейн Нордстром </a>

<chrace>Раса: вывертень</chrace>

<chplace>Живет: Америка, Лос — Анджелес </chplace>

<chocc>Работает: агент ЦРУ </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='#'> Ван Сяоюй </a>

<chrace>Раса: человек</chrace>

<chplace>Живет: Китай, Гонконг </chplace>

<chocc>Работает: рефлексотерапевт </chocc>

<chcanon>Статус: модао, Сяо Сичэнь </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=32'> Сюэ Ян </a>

<chrace>Раса: метаморф</chrace>

<chplace>Живет: Китай, Гонконг </chplace>

<chocc>Работает: глава Сап Сей Кей </chocc>

<chcanon>Статус: модао, Сюэ Ян </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=3'> Ребекка Джонс </a>

<chrace>Раса: фейри</chrace>

<chplace>Живет: Нью-Йорк </chplace>

<chocc>Работает: Пророк, охотник за антиквариатом </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=36'> Арлин Майерс </a>

<chrace>Раса: хрононавт (xii)</chrace>

<chplace>Живет: США, Лос-Анджелес</chplace>

<chocc>Работает: эгида </chocc>

<chcanon>Статус: прототип Гвенделин Шеферд (серия книг "Таймлесс") </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=3'> джастин элмерс </a>

<chrace>Раса: вампир</chrace>

<chplace>Живет: нет</chplace>

<chocc>Работает: бродяга </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=3'> Лю Мин Тао </a>

<chrace>Раса: вампир</chrace>

<chplace>Живет: Лос-Анджелес </chplace>

<chocc>Работает: Химеры, консильери </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=41'> Сон Ё-Хан </a>

<chrace>Раса: имуги</chrace>

<chplace>Живет:США </chplace>

<chocc>Работает: безработный </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=26'> Джонатан Блэкнайт</a>

<chrace>Раса: бессмертный</chrace>

<chplace>Живет:Лос-Анджелес, США </chplace>

<chocc>Работает: владелец фарм компании "Blacknight Pharmaceuticals" </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=25'> Александра Нортон</a>

<chrace>Раса: одаренная</chrace>

<chplace>Живет:Лос-Анджелес, США </chplace>

<chocc>Работает: Официантка, певица </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=27'> Виктор Браун</a>

<chrace>Раса: гибрид вервольфа и вампира</chrace>

<chplace>Живет:Лос-Анджелес, США </chplace>

<chocc>Работает: Владелец бара «У Брауна» </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=35'> Офелия Фелпс </a>

<chrace>Раса: высшая альва</chrace>

<chplace>Живет:США, Саванна </chplace>

<chocc>Работает: приют для животных </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=46'> Хлоя Беккер </a>

<chplace>Живет:Лос-Анджелес </chplace>

<chocc>Работает: Ритуальное агенство "Кости" </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=38'> Эзра Ларсен </a>

<chplace>Живет:Лос-Анжелес</chplace>

<chocc>Работает:владелец бара "Last exit"</chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=42'> Гвинблэйд Сианнодэл</a>

<chrace>Раса: фейри</chrace>

<chplace>Живет:Нью-Йорк </chplace>

<chocc>Работает: Ранее правая рука короля неблагого двора, теперь торговец магическими, редкими вещами — эликсирами, создатель двора для изгнанных фэйри</chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=44'> Айзек Гарднер </a>

<chrace>Раса: проклятый</chrace>

<chplace>Живет:Лондон, Великобритания </chplace>

<chocc>Работает: бизнесмен, археолог </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=45'> Изабель Льюис </a>

<chrace>Раса: кицунэ-зенко </chrace>

<chplace>Живет: лос-анджелес </chplace>

<chocc>Работает: ветеринар в клинике "Petsli", волонтер в выездных программах по всему миру </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=50'> Рэндал Гарретт </a>

<chrace>Раса: фэйри</chrace>

<chplace>Живет:неблагой двор </chplace>

<chocc>Работает: король </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=39'> Роберт Варгас </a>

<chrace>Раса: человек со способностями</chrace>

<chplace>Живет:Лос Анджелес </chplace>

<chocc>Работает: Мэр города </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=51'> Элиана Торн </a>

<chrace>Раса: древнегреческая богиня</chrace>

<chplace>Живет:сша, лос-анджелес </chplace>

<chocc>Работает: владелица цветочного магазина и оранжереи при ней </chocc>

<chcanon>Статус: персефона </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=57'> Даниэлла ван Льювэн</a>

<chrace>Раса: ведьма</chrace>

<chplace>Живет:Лос-Анджелес </chplace>

<chocc>Работает: студентка \ владелица кафетерия с редкими книгами \ глава самого сильно ковена ЛА </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=56'> Анастасия Варгас </a>

<chrace>Раса: ведьдма </chrace>

<chplace>Живет:лос-анджелес </chplace>

<chocc>Работает: студентка, семейный бизнес </chocc>

<chcanon>Статус: неканон </chcanon>

</charcont>

<charcont>
<a href='https://yourworld.f-rpg.me/profile.php?id=53'> Аррика Рут </a>

<chrace>Раса:ведьма</chrace>

<chplace>Живет:ЛА</chplace>

<chocc>Работает:Эгида </chocc>

<chcanon>Статус: Артемида </chcanon>

</charcont>

</div>
</div>