[html]<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Inconsolata|Pt+Serif" rel="stylesheet">
<style>

#girlharbor { position: relative; margin: 20px auto 0px; height: 580px; width: 450px; border: 50px solid #fff; outline: 1px solid #ddd; background-image: url(https://i.pinimg.com/564x/c1/a7/2d/c1a7 … f64999.jpg); background-size: cover;
/**change these for character colours**/
--char1:#0e3a35;
--char2:#8d6b34;
--char3:#0c3c36;
--char4:#82632d;
--char5:#135651;
--char6:#b6832a;
--char7:#082521;
--char8:#0e3a35;
}
#chara1 .ghname { color: var(--char1); }
#chara2 .ghname { color: var(--char2); }
#chara3 .ghname { color: var(--char3); }
#chara4 .ghname { color: var(--char4); }
#chara5 .ghname { color: var(--char5); }
#chara6 .ghname { color: var(--char6); }
#chara7 .ghname { color: var(--char7); }
#chara8 .ghname { color: var(--char8); }
#chara1 .ghin h1, #chara1 .ghin b { color: var(--char1); border-bottom: 1px solid var(--char1); }
#chara2 .ghin h1, #chara2 .ghin b { color: var(--char2); border-bottom: 1px solid var(--char2); }
#chara3 .ghin h1, #chara3 .ghin b { color: var(--char3); border-bottom: 1px solid var(--char3); }
#chara4 .ghin h1, #chara4 .ghin b { color: var(--char4); border-bottom: 1px solid var(--char4); }
#chara5 .ghin h1, #chara5 .ghin b { color: var(--char5); border-bottom: 1px solid var(--char5); }
#chara6 .ghin h1, #chara6 .ghin b { color: var(--char6); border-bottom: 1px solid var(--char6); }
#chara7 .ghin h1, #chara7 .ghin b { color: var(--char7); border-bottom: 1px solid var(--char7); }
#chara8 .ghin h1, #chara8 .ghin b { color: var(--char8); border-bottom: 1px solid var(--char8); }
#chara1 .ghpictureover, #chara1 .ghline1, #chara1 .ghline2, #chara1 .ghline3, #chara1 .ghline4 { background: var(--char1); }
#chara2 .ghpictureover, #chara2 .ghline1, #chara2 .ghline2, #chara2 .ghline3, #chara2 .ghline4 { background: var(--char2); }
#chara3 .ghpictureover, #chara3 .ghline1, #chara3 .ghline2, #chara3 .ghline3, #chara3 .ghline4 { background: var(--char3); }
#chara4 .ghpictureover, #chara4 .ghline1, #chara4 .ghline2, #chara4 .ghline3, #chara4 .ghline4 { background: var(--char4); }
#chara5 .ghpictureover, #chara5 .ghline1, #chara5 .ghline2, #chara5 .ghline3, #chara5 .ghline4 { background: var(--char5); }
#chara6 .ghpictureover, #chara6 .ghline1, #chara6 .ghline2, #chara6 .ghline3, #chara6 .ghline4 { background: var(--char6); }
#chara7 .ghpictureover, #chara7 .ghline1, #chara7 .ghline2, #chara7 .ghline3, #chara7 .ghline4 { background: var(--char7); }
#chara8 .ghpictureover, #chara8 .ghline1, #chara8 .ghline2, #chara8 .ghline3, #chara8 .ghline4 { background: var(--char8); }
.ghbackimg { position: absolute; width: 100%; height: 100%; background: #222; mix-blend-mode: multiply; }
#girlharbor picture { display: block; position: absolute; height: 450px; width: 350px; background-size: cover; top: 100px; left: 100px; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
#girlharbor picture:after { display:block; content:""; height: 450px; width: 350px; background: #777; mix-blend-mode: multiply; position: absolute; top: 0px; left: 0px; }
.ghpictureover { display: block; position: absolute; width: 350px; height: 450px; top: 100px; left: 100px; mix-blend-mode: screen; background: var(--char1); }
.ghname { position: absolute; width: 0px; color: var(--char1); font-family: abril fatface; font-size: 53px; bottom: 37px; text-transform: Uppercase; text-align: left; left:0px; line-height:75%; z-index: 1; font-weight: 900; mix-blend-mode: hard-light; }
.ghinfo { width: 545px; height: 20px; position: absolute; display: block; bottom: 11px; line-height: 140%; font-family: inconsolata; text-align: right; text-transform: capitalize; color: #545451; font-size: 11px; left: 0px; letter-spacing: 2px; z-index: 2; }
.ghlyrics { width: 550px; height: 20px; position: absolute; display: block; top: 32px; line-height: 140%; font-family: inconsolata; text-align: left; text-transform: capitalize; color: #545451; font-size: 11px; left: 0px; padding-left: 05px; letter-spacing: 3px; }
#girlharbor input { display: none; }
#girlharbor label { position: relative; top: 30px; height: 10px; display: inline-block; cursor: pointer; transition: 0.2s; margin: 0px 10px 0px 35px; line-height: 100%; font-family: pt serif; text-transform: uppercase; font-weight: 900; font-size: 11px; color: #545451; z-index: 3; }
#char1:checked+label { color: var(--char1); font-style: italic; }
#char2:checked+label { color: var(--char2); font-style: italic; }
#char3:checked+label { color: var(--char3); font-style: italic; }
#char4:checked+label { color: var(--char4); font-style: italic; }
#char5:checked+label { color: var(--char5); font-style: italic; }
#char6:checked+label { color: var(--char6); font-style: italic; }
#char7:checked+label { color: var(--char7); font-style: italic; }
#char8:checked+label { color: var(--char8); font-style: italic; }
.ghcutoff1, .ghcutoff2, .ghcutoff3, .ghcutoff4, .ghcutoff5, .ghcutoff6, .ghcutoff7, .ghcutoff8 { position: absolute; height: 665px; width: 550px; overflow: hidden; top: -50px; left: -50px; opacity: 0; z-index: 0; transition: 0.5s; }
#char1:checked ~ .ghcutoff1, #char2:checked ~ .ghcutoff2, #char3:checked ~ .ghcutoff3, #char4:checked ~ .ghcutoff4, #char5:checked ~ .ghcutoff5, #char6:checked ~ .ghcutoff6, #char7:checked ~ .ghcutoff7, #char8:checked ~ .ghcutoff8 { opacity: 1; z-index: 1; }
.ghin { position: absolute; top:125px; width: 295px; height: 400px; left: 125px; background: rgba(255, 255, 255, 0.8); outline: 25px solid rgba(255, 255, 255, 0.8); font-family: pt serif; color: #5b5b4e; font-size: 11px; text-align: justify; padding-right: 5px; line-height: 130%; overflow: auto; opacity: 0; transition: 0.5s; }
.ghcutoff1:hover .ghin, .ghcutoff2:hover .ghin, .ghcutoff3:hover .ghin, .ghcutoff4:hover .ghin, .ghcutoff5:hover .ghin, .ghcutoff6:hover .ghin, .ghcutoff7:hover .ghin, .ghcutoff8:hover .ghin { opacity: 1; }
.ghin h1 { color: #91939d; font-size: 20px; font-family: Abril Fatface; text-transform: uppercase; text-align: right; border-bottom: 1px solid #91939d; }
.ghline1 { background: white; position: absolute; width: 550px; height: 4px; top: 25px; left: 0px; }
.ghline2 { background: white; position: absolute; width: 550px; height: 1px; top: 50px; left: 0px; z-index: 1; }
.ghline3 { background: white; position: absolute; width: 550px; height: 4px; bottom: 10px; left: 0px; }
.ghline4 { background: white; position: absolute; width: 550px; height: 1px; bottom: 35px; left: 0px; z-index: 1; }
#chara1 .ghin::-webkit-scrollbar { width: 5px; }
#chara1 .ghin::-webkit-scrollbar-track { background-color: var(--char1); border: 2px solid transparent; background-clip: content-box; }
#chara1 .ghin::-webkit-scrollbar-thumb { background-color: var(--char1); }
#chara2 .ghin::-webkit-scrollbar { width: 5px; }
#chara2 .ghin::-webkit-scrollbar-track { background-color: var(--char2); border: 2px solid transparent; background-clip: content-box; }
#chara2 .ghin::-webkit-scrollbar-thumb { background-color: var(--char2); }
#chara3 .ghin::-webkit-scrollbar { width: 5px; }
#chara3 .ghin::-webkit-scrollbar-track { background-color: var(--char3); border: 2px solid transparent; background-clip: content-box; }
#chara3 .ghin::-webkit-scrollbar-thumb { background-color: var(--char3); }
#chara4 .ghin::-webkit-scrollbar { width: 5px; }
#chara4 .ghin::-webkit-scrollbar-track { background-color: var(--char4); border: 2px solid transparent; background-clip: content-box; }
#chara4 .ghin::-webkit-scrollbar-thumb { background-color: var(--char4); }
#chara5 .ghin::-webkit-scrollbar { width: 5px; }
#chara5 .ghin::-webkit-scrollbar-track { background-color: var(--char5); border: 2px solid transparent; background-clip: content-box; }
#chara5 .ghin::-webkit-scrollbar-thumb { background-color: var(--char5); }
#chara6 .ghin::-webkit-scrollbar { width: 5px; }
#chara6 .ghin::-webkit-scrollbar-track { background-color: var(--char6); border: 2px solid transparent; background-clip: content-box; }
#chara6 .ghin::-webkit-scrollbar-thumb { background-color: var(--char6); }
#chara7 .ghin::-webkit-scrollbar { width: 5px; }
#chara7 .ghin::-webkit-scrollbar-track { background-color: var(--char7); border: 2px solid transparent; background-clip: content-box; }
#chara7 .ghin::-webkit-scrollbar-thumb { background-color: var(--char7); }
#chara8 .ghin::-webkit-scrollbar { width: 5px; }
#chara8 .ghin::-webkit-scrollbar-track { background-color: var(--char8); border: 2px solid transparent; background-clip: content-box; }
#chara8 .ghin::-webkit-scrollbar-thumb { background-color: var(--char8); }
</style>
<div id="girlharbor">
<div class="ghbackimg"></div>

  <input type="radio" id="char1" name="movements"checked>
<label for="char1">1</label>
<input type="radio" id="char2" name="movements">
<label for="char2">2</label>
<input type="radio" id="char3" name="movements">
<label for="char3">3</label>
<input type="radio" id="char4" name="movements">
<label for="char4">4</label>
<input type="radio" id="char5" name="movements">
<label for="char5">5</label>
<input type="radio" id="char6" name="movements">
<label for="char6">6</label>
<input type="radio" id="char7" name="movements">
<label for="char7">7</label>
<input type="radio" id="char8" name="movements">
<label for="char8">8</label>

<div class="ghcutoff1"><div id="chara1">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Общее</div>
<div class="ghname">ЛЮДИ HUMANS</div>
<div class="ghinfo">Власть • Вариативность • Вера</div>

<picture style="background-image: url(https://i.pinimg.com/564x/74/1e/a0/741e … 38dc6e.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Страна</h1>

<a href="http://images.vfl.ru/ii/1636935120/05f89a2a/36685827.png">Империя Фарроу</a>, частично торговые города на восточном побережье Тиаси.

<h1>Возраст</h1>

Обычные люди живут до 120-150 лет. Маги способны дожить до 300-500 в зависимости от количества силы и искусности.

<h1>Боги-покровители</h1>

Молох, также в прибрежных провинциях поклоняются Инанне.

<h1>Маги</h1>

Талантливые маги со множеством разных школ. Наиболее склонны к управлению огнем и боевым заклинаниям.

<h1>Провинции</h1>
Империя Фарроу — большая страна, которую делят на провинции. Всего провинций восемь: императорские земли, Бритчестер, Эвергрин-Харбор, Бриндлтон-Бэй, Глиммербрук, Хэнфорд-он-Бэгли, Южные герцогства, Дель-Соль Вэлли. До завоеваний Империи большая часть были отдельными государствами со своими народами и культурами. Хотя Империя давно едина и её жители могут свободно перемещаться, переезжать и заводить отношения, провинции сохраняют определенную самобытность и даже характерные внешние черты своего народа. Впрочем, на границах провинций культуры могут сильно смешиваться.

</div></div></div>

<div class="ghcutoff2"><div id="chara2">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Императорские земли и Бритчестер</div>
<div class="ghname">ЛЮДИ HUMANS</div>
<div class="ghinfo">Власть • Вариативность • Вера</div>

<picture style="background-image: url(https://i.pinimg.com/564x/64/f9/47/64f9 … e06cd3.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Внешность</h1>

Чуть выше среднего, светлокожие, часто рыжие или светловолосые, с голубыми или зелеными глазами. Среди местной знати много внимания уделяют моде: носят маски, не показывая своих лиц почти никому, кроме Его Императорского Величества, Императорской семьи, ближнего круга прислуги и кровных родственников, многослойные сложные наряды, часто делают зачарованные, сложные прически. Даже простолюдины в этих провинциях выглядят моднее и богаче остальных жителей Империи. Особенно в столице Империи — Эргамине.

<h1>Экономика</h1>

В этой части Империи процветают "престижные" ремесла: ювелирное мастерство, кружевоплетение, бытовая магия, живопись, скульптура, архитектура. Большую часть Бритчестера занимают поместья знатных родов и их земли, на которых проживают крестьяне, и города, в основном выросшие на местах бывших военных фортов. Земли вокруг Эргамине принадлежат и подчиняются исключительно императору и работают на обеспечение дворца всем необходимым. Также на них проходит ежегодная Императорская охота. В Эргамин и Бритчестер стекается золото со всей Империи, так что здесь один из самых высоких уровней жизни.

<h1>Нравы</h1>

Среди аристократов ценятся роскошь и церемониальность, большинство городских жителей умеют вежливо и правильно представиться господам разной степени важности. В целом жители императорских земель и Бритчестера открытые, дружелюбные люди, но склонные к денежным авантюрам и охоте за быстрой прибылью. Здесь много торговцев, авантюристов в поиске приключений и свободных воинов, ищущих работу. В крупных городах есть своя преступность, но преступники стараются действовать скрытно и внешне оставаться добропорядочными гражданами.

</div></div></div>

<div class="ghcutoff3"><div id="chara3">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Эвергрин-Харбор</div>
<div class="ghname">ЛЮДИ HUMANS</div>
<div class="ghinfo">Власть • Вариативность • Вера</div>

<picture style="background-image: url(https://i.pinimg.com/564x/1b/64/59/1b64 … 79f923.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Внешность</h1>

Крупные, крепкие, светлокожие и темноволосые, часто с темными глазами. Предпочитают плотную, практичную одежду немарких цветов. Часто длинноволосые, мужчины опускают бороду. Почти поголовно умеют сражаться, мускулистые и ловкие.

<h1>Экономика</h1>

Несмотря на близость к столице, Эвергрин-Харбор — это малонаселенная провинция. Причиной тому служит два фактора: холодное течение с южного полиса, превращающее местный климат в испытание холодами, и заповедный лес, который растет на её территории. В этом лесу обитают всевозможные звери и существа, не слишком дружественные человеку. Однако, люди всё равно селятся здесь, охотники и лесорубы основывают небольшие поселения, жизнь в которых трудна и сурова, но с лихвой себя окупает. Из Эвергрин-Харбор поставляют многие редкие материалы и ингредиенты, например, дорогие меха и ценные породы древесины. В заповедный лес также часто уходят те, кто ищет одиночества - отшельники, маги, которым нужны тихие уединенные места для экспериментов, иногда беглые преступники. Очарования и безопасности ему это не добавляет.

<h1>Нравы</h1>

Эвергрин-Харбор — край суровый. Настолько, что среди местных ходит шутка, что в своё время Первый Император начал свои завоевание, лишь бы присоединить к себе какие-нибудь земли поприятнее. Местные народ суровый, скрытный и недоверчивый, но при этом способный на вазимовыручку. В этом краю трудно выживать, и если они могут помочь друг другу - помогут. Сегодня ты, завтра тебе. Здесь женщины сражаются и работают наравне с мужчинами, возглавляют поселения, становятся старшими в семье. Людей из Эвергрин-Харбор считают самыми стойкими и в то же время "дикими".

</div></div></div>

<div class="ghcutoff4"><div id="chara4">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Бриндлтон-Бэй</div>
<div class="ghname">ЛЮДИ HUMANS</div>
<div class="ghinfo">Власть • Вариативность • Вера</div>

<picture style="background-image: url(https://i.pinimg.com/564x/da/17/e1/da17 … 0dd7a2.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Внешность</h1>

Жилистые, смуглые или темнокожие, с кудрявыми темными волосами, темноглазые. В одежде предпочитают легкие летящие ткани и яркие цвета, любят обилие украшений. Открывают больше кожи, чем это принято в других провинциях. Много общаются с эльфами в приграничных торговых городах и частично перенимают их привычки: одной из таких является роспись по лицу.

<h1>Экономика</h1>

Бридлтон-Бэй — одна из самых теплых и плодородных провинций. Здесь растут фруктовые сады и виноградники. Отсюда экспортируют вино, фрукты и овощи, которые больше не растут нигде в Империи, особые нежные легкие ткани, которые ткут из растений, способных выжить только в теплом климате. Близость с эльфийской границей тоже является источником дохода, ведь только вдоль границы с Бридлтон-Бэй эльфы построили торговые города и именно через эти края посещают Империю. Тут часто ходят караваны с товарами.

<h1>Нравы</h1>

Жители Бридлтон-Бэй — это люди неторопливые, спокойные, даже флегматичные. Здесь всё не так строго, и то, что в других провинциях делается втайне ото всех за закрытыми дверями, здесь может быть вполне нормальным. Тут целуются на улицах, танцуют на площадях жгучие танцы, несвойственные церемониальной имперской знати, а герцог вполне может выпить и сыграть в кости со знакомым трактирщиком. При этом многие не любят иметь дело с местными торговцами, так как считают их многословными и медлительными. Впрочем, местные не обижаются, не очень понимая, куда так торопится остальной мир и что им всё неймется.
</div></div></div>

<div class="ghcutoff5"><div id="chara5">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Глиммербрук</div>
<div class="ghname">ЛЮДИ HUMANS</div>
<div class="ghinfo">Власть • Вариативность • Вера</div>

<picture style="background-image: url(https://99px.ru/sstorage/56/2014/11/ima … 560976.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Внешность</h1>

Чуть ниже среднего, светлокожие или смуглые, с монголоидным разрезом глаз и выступающими скулами, обычно имеют темные прямые волосы. И мужчины, и женщины носят длинные волосы, знать часто делает сложные прически. В одежде предпочитают свободные летящие одеяния, любят плотные ткани с росписью или узорами.

<h1>Экономика</h1>

Глиммербрук — предгорная провинция, граничащая с подземными городами дворфов и частично Долиной Индру. Здесь добывают большую часть полезных ископаемых, драгоценных камней и металлов. Только коренным жителям Глиммербрука дворфы разрешили разрабатывать их горы ещё много сотен лет назад и строго следят за соблюдением договора. Также на горных склонах выращивают чай и шелк. Активная торговля с дворфами делает Глиммербрук источником многих диковинок, которые не приобретешь в других местах.

<h1>Нравы</h1>

Глиммербрук — строгая, религиозная провинция. Тут важны приличия и честь. Здесь, как и в столице, любят церемонии, но красота скрывается не в роскоши и сложных нарядах, а в искусности и изяществе. Знатные девы из Глиммербрука считаются лучшими женами среди аристократов из-за воспитания и красоты. При этом Глиммербрук славен искусными воинами и отличными стратегами, завоевание его было одним из самых долгих и кровавых. По этой причине местные не особо жалуют гостей "с равнин" и в целом считаются довольно закрытой и самобытной провинцией.

</div></div></div>

<div class="ghcutoff6"><div id="chara6">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Хэнфорд-он-Бэгли</div>
<div class="ghname">ЛЮДИ HUMANS</div>
<div class="ghinfo">Власть • Вариативность • Вера</div>

<picture style="background-image: url(https://i.pinimg.com/564x/05/4e/99/054e … 4df8c7.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Внешность</h1>

Среднего роста, крепко сложенные, светлокожие, но загорелые, русые или каштановые волосы, зеленые или карие глаза. Предпочитают простую скромную одежду, но качественно сделанную. Девушки часто носят светлые передники. В прическах любят всевозможные косы, мужчины стригутся коротко.

<h1>Экономика</h1>

Хэнфорд-он-Бэгли — это сельскохозяйственный центр страны. В основном он состоит из полей и пастбищ, возле которых стоят деревушки. Формально у них есть наместник в столице провинции, но в большинстве своем в деревнях самоуправление под началом старост. Местные живут за счет того, что выращивают сами, и продаж избытков урожая. Некоторые летом кочуют по провинции вместе с огромными стадами коров и лошадей, пастухи получают за это немалую оплату — обычно стадо собирается с нескольких деревень, и все деревни вместе скидываются. Также почти в каждой деревне есть свой купец, который готов возить урожай дальше, чем до ближайшего города. Маги, которые хорошо взаимодействуют с природой, здесь в большом почете и могут хорошо заработать.

<h1>Нравы</h1>

В Хэнфорд-он-Бэгли живут люди основательные, рациональные, трудолюбивые. Они консервативны, живут большими семьями, заводят много детей. Свобода нравов тут не приветствуется, всё должно быть в рамках приличий.

</div></div></div>

<div class="ghcutoff7"><div id="chara7">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Дэль-Соль Вэлли</div>
<div class="ghname">ЛЮДИ HUMANS</div>
<div class="ghinfo">Власть • Вариативность • Вера</div>

<picture style="background-image: url(https://i.pinimg.com/736x/ae/d2/e2/aed2 … b09200.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Внешность</h1>
Высокие люди, чаще всего темноволосые или темно-рыжие, с загорелой оливковой кожей. Отличительной чертой вэлльцев считают высокие носы, часто с горбинкой. Среди местных высоко ценится внешнее совершенство: тренированное тело, ухоженные волосы, чистая кожа. В одежде предпочитают легкие летящие ткани, простые силуэты и минимум украшений. Богатых от бедных обычно отличает качество тканей и элегантные, но недешевые аксессуары, например, дорогие пряжки ремней или серьги. Принято носить бандо и фероньерки.

<h1>Экономика</h1>

Дэль-Соль Вэлли — теплая провинция с выходом к морю, однако, она расположена на каменистой неровной местности. В основном тут выращивают виноград для вин, оливки и теплолюбивые фрукты, из животных держат мелкий рогатый скот. Несмотря на небольшое разнообразие сельского хозяйства, жизнь в провинции считается счастливой и сытой. У побережья есть портовые города, много рыбацких деревень. Так же Дэль-Соль Вэлли — любимый курорт аристократов. Здесь расположена летняя резиденция Императора, а также дорогие поместья, которые сдаются аристократам для отдыха. Благодаря этому тут развита торговля предметами роскоши. Тут любят отдыхать не только аристократы, но и те, у кого хватает денег на роскошь — семьи богатых купцов и ремесленников, отошедшие от дел наемники и т.д.

<h1>Нравы</h1>

В Дэль-Соль Вэлли живут открытые, позитивные и добрые люди. Они очень любят танцы, шумные застолья, большие городские праздники. Несмотря на религиозность Империи, нравы здесь довольно свободные. Главное, не выражать свою распущенность слишком открыто, но если всё происходит за закрытыми дверьми, то им нет до этого дела. Местные крестьяне могут показаться слишком простодушными, но это не совсем так. Просто люди здесь предпочитают производить впечатление легких и приятных личностей, какими бы они ни были на самом деле.
</div></div></div>

<div class="ghcutoff8"><div id="chara8">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Южные Герцогства</div>
<div class="ghname">ЛЮДИ HUMANS</div>
<div class="ghinfo">Власть • Вариативность • Вера</div>

<picture style="background-image: url(http://img2.reactor.cc/pics/post/full/красивые-картинки-art-Dmitry-Tsarev-4474805.jpeg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Внешность</h1>
Люди среднего роста, со светлой кожей и светлыми или каштановыми волосами, крепким телосложением. Мужчины часто носят бороды и длинные волосы, собранные в косы. Одежда теплая и практичная, вместо украшений тут ценятся хорошее оружие и дорогие меха. Одна из примечательных особенностей этого народа: деление одежды по профессии, а не полу. Девушки, занимающиеся охотой, скорее наденут штаны и легкие кожаные доспехи, а служители храмов — длинные одеяния, похожие на платья. У мужчин для официальных мероприятий есть килты.

<h1>Экономика</h1>

Южные герцогства — это горная местность, расположенная между Озерным краем и морским побережьем. Она в основном покрыта смешанными и хвойными лесами, и местные жители живут охотой и собирательством, иногда держат мелкий рогатый скот. Здесь добывают древесину, меха и целебные травы. В прибрежной части распространена рыбалка и охота на китов. Эту провинцию нельзя назвать особо богатой, суровые зимы часто тяжело ударяют по ней, но люди здесь научились твердо стоять на ногах. Здесь также больше, чем в других провинциях, распространен традиционный подход к магии, и некоторые люди специально едут за помощью к местным волхвам.

<h1>Нравы</h1>
Южные герцогства до завоевания Первым Императором были разобщенными кланами, которые то дружили, то враждовали между собой, при этом собираясь на общие клановые сборы. После завоевания главам кланов были даны титулы, но клановое сознание и семейность так и остались в крови этого горного народа. Они очень сплоченные внутри своего клана, но могут внешне беспричинно недолюбливать представителей других в память о старых ссорах. <br>
Женщины Южных герцогств считаются одними из самых суровых и сильных во всей Империи. Женщины могут стоять во главе клана, быть воительницами и охотницами. Суровые условия и частые склоки диктовали свои условия, в которых часто женщинам приходилось брать на себя власть и все обязанности, пока мужчины уходили воевать или в море.

</div></div></div>

</div><center><a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/html]

Отредактировано административный акк (2021-11-12 03:39:51)

[html]<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Inconsolata|Pt+Serif" rel="stylesheet">
<style>

#girlharbor { position: relative; margin: 20px auto 0px; height: 580px; width: 450px; border: 50px solid #fff; outline: 1px solid #ddd; background-image: url(https://i.pinimg.com/564x/c1/a7/2d/c1a7 … f64999.jpg); background-size: cover;
/**change these for character colours**/
--char1:#8d6b34;
--char2:#0c3c36;
--char3:#82632d;
--char4:#135651;}
#chara1 .ghname { color: var(--char1); }
#chara2 .ghname { color: var(--char2); }
#chara3 .ghname { color: var(--char3); }
#chara4 .ghname { color: var(--char4); }
#chara1 .ghin h1, #chara1 .ghin b { color: var(--char1); border-bottom: 1px solid var(--char1); }
#chara2 .ghin h1, #chara2 .ghin b { color: var(--char2); border-bottom: 1px solid var(--char2); }
#chara3 .ghin h1, #chara3 .ghin b { color: var(--char3); border-bottom: 1px solid var(--char3); }
#chara4 .ghin h1, #chara4 .ghin b { color: var(--char4); border-bottom: 1px solid var(--char4); }
#chara1 .ghpictureover, #chara1 .ghline1, #chara1 .ghline2, #chara1 .ghline3, #chara1 .ghline4 { background: var(--char1); }
#chara2 .ghpictureover, #chara2 .ghline1, #chara2 .ghline2, #chara2 .ghline3, #chara2 .ghline4 { background: var(--char2); }
#chara3 .ghpictureover, #chara3 .ghline1, #chara3 .ghline2, #chara3 .ghline3, #chara3 .ghline4 { background: var(--char3); }
#chara4 .ghpictureover, #chara4 .ghline1, #chara4 .ghline2, #chara4 .ghline3, #chara4 .ghline4 { background: var(--char4); }
.ghbackimg { position: absolute; width: 100%; height: 100%; background: #222; mix-blend-mode: multiply; }
#girlharbor picture { display: block; position: absolute; height: 450px; width: 350px; background-size: cover; top: 100px; left: 100px; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
#girlharbor picture:after { display:block; content:""; height: 450px; width: 350px; background: #777; mix-blend-mode: multiply; position: absolute; top: 0px; left: 0px; }
.ghpictureover { display: block; position: absolute; width: 350px; height: 450px; top: 100px; left: 100px; mix-blend-mode: screen; background: var(--char1); }
.ghname { position: absolute; width: 0px; color: var(--char1); font-family: abril fatface; font-size: 53px; bottom: 37px; text-transform: Uppercase; text-align: left; left:0px; line-height:75%; z-index: 1; font-weight: 900; mix-blend-mode: hard-light; }
.ghinfo { width: 545px; height: 20px; position: absolute; display: block; bottom: 11px; line-height: 140%; font-family: inconsolata; text-align: right; text-transform: capitalize; color: #545451; font-size: 11px; left: 0px; letter-spacing: 2px; z-index: 2; }
.ghlyrics { width: 550px; height: 20px; position: absolute; display: block; top: 32px; line-height: 140%; font-family: inconsolata; text-align: left; text-transform: capitalize; color: #545451; font-size: 11px; left: 0px; padding-left: 05px; letter-spacing: 3px; }
#girlharbor input { display: none; }
#girlharbor label { position: relative; top: 30px; height: 10px; display: inline-block; cursor: pointer; transition: 0.2s; margin: 0px 10px 0px 30px; line-height: 100%; font-family: pt serif; text-transform: uppercase; font-weight: 900; font-size: 11px; color: #545451; z-index: 3; }
#char1:checked+label { color: var(--char1); font-style: italic; }
#char2:checked+label { color: var(--char2); font-style: italic; }
#char3:checked+label { color: var(--char3); font-style: italic; }
#char4:checked+label { color: var(--char4); font-style: italic; }
.ghcutoff1, .ghcutoff2, .ghcutoff3, .ghcutoff4 { position: absolute; height: 665px; width: 550px; overflow: hidden; top: -50px; left: -50px; opacity: 0; z-index: 0; transition: 0.5s; }
#char1:checked ~ .ghcutoff1, #char2:checked ~ .ghcutoff2, #char3:checked ~ .ghcutoff3, #char4:checked ~ .ghcutoff4 { opacity: 1; z-index: 1; }
.ghin { position: absolute; top:125px; width: 295px; height: 400px; left: 125px; background: rgba(255, 255, 255, 0.8); outline: 25px solid rgba(255, 255, 255, 0.8); font-family: pt serif; color: #5b5b4e; font-size: 11px; text-align: justify; padding-right: 5px; line-height: 130%; overflow: auto; opacity: 0; transition: 0.5s; }
.ghcutoff1:hover .ghin, .ghcutoff2:hover .ghin, .ghcutoff3:hover .ghin, .ghcutoff4:hover .ghin { opacity: 1; }
.ghin h1 { color: #91939d; font-size: 20px; font-family: Abril Fatface; text-transform: uppercase; text-align: right; border-bottom: 1px solid #91939d; }
.ghline1 { background: white; position: absolute; width: 550px; height: 4px; top: 25px; left: 0px; }
.ghline2 { background: white; position: absolute; width: 550px; height: 1px; top: 50px; left: 0px; z-index: 1; }
.ghline3 { background: white; position: absolute; width: 550px; height: 4px; bottom: 10px; left: 0px; }
.ghline4 { background: white; position: absolute; width: 550px; height: 1px; bottom: 35px; left: 0px; z-index: 1; }
#chara1 .ghin::-webkit-scrollbar { width: 5px; }
#chara1 .ghin::-webkit-scrollbar-track { background-color: var(--char1); border: 2px solid transparent; background-clip: content-box; }
#chara1 .ghin::-webkit-scrollbar-thumb { background-color: var(--char1); }
#chara2 .ghin::-webkit-scrollbar { width: 5px; }
#chara2 .ghin::-webkit-scrollbar-track { background-color: var(--char2); border: 2px solid transparent; background-clip: content-box; }
#chara2 .ghin::-webkit-scrollbar-thumb { background-color: var(--char2); }
#chara3 .ghin::-webkit-scrollbar { width: 5px; }
#chara3 .ghin::-webkit-scrollbar-track { background-color: var(--char3); border: 2px solid transparent; background-clip: content-box; }
#chara3 .ghin::-webkit-scrollbar-thumb { background-color: var(--char3); }
#chara4 .ghin::-webkit-scrollbar { width: 5px; }
#chara4 .ghin::-webkit-scrollbar-track { background-color: var(--char4); border: 2px solid transparent; background-clip: content-box; }
#chara4 .ghin::-webkit-scrollbar-thumb { background-color: var(--char4); }
</style>
<div id="girlharbor">
<div class="ghbackimg"></div>

  <input type="radio" id="char1" name="movements"checked>
<label for="char1">Общее</label>
<input type="radio" id="char2" name="movements">
<label for="char2">Способности</label>
<input type="radio" id="char3" name="movements">
<label for="char3">Менталитет</label>
<input type="radio" id="char4" name="movements">
<label for="char4">История</label>
<div class="ghcutoff1"><div id="chara1">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">общее</div>
<div class="ghname">ОБОРОТНИ WEREWOLVES</div>
<div class="ghinfo">отвага • верность • воля</div>

<picture style="background-image: url(https://i.pinimg.com/564x/35/f5/bf/35f5 … 08084f.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>страна</h1>
Проживают в основном в Империи Фарроу, а так же в торговых городах Тиаси на территории Великих Степей.

<h1>Возраст</h1>
В среднем доживают до 250-300 лет. Совершеннолетие достигается в 20 лет.

<h1>Бог-покровитель</h1>
Молох. Живушие на Тиаси иногда поклоняются Немизе.

<h1>Маги</h1>
Оборотни не способны творить магию.

</div></div></div>

<div class="ghcutoff2"><div id="chara2">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">способности и особенности</div>
<div class="ghname">ОБОРОТНИ WEREWOLVES</div>
<div class="ghinfo">отвага • верность • воля</div>

<picture style="background-image: url(https://i.pinimg.com/564x/c3/d8/e6/c3d8 … 4218a1.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Внешность</h1>

Внешне оборотни ничем не отличаются от людей, имеют такое же разнообразие фенотипов и характеров. Однако, даже в человеческой форме оборотни в среднем отличаются более чуткими зрением, нюхом и слухом, а также хорошо видят в темноте. Большинство оборотней умеют передвигаться почти бесшумно, сильнее и быстрее обычных людей, но это варьируется от оборотня к оборотню. Как люди могут быть сильнее или слабее, выше или ниже, так и оборотни не все одинаковы во всех характеристиках.

<h1>Зверь</h1>

Способностью оборота обладает каждый, у кого достаточно оборотней в предках. Считается, что оборотни обращаются в животное, наиболее близкое им по духу. Это всегда высшие млекопитающие, чаще всего волки, медведи, лисы и дикие кошки, в зависимости от ареала обитания. Сами оборотни уверены, что на это также влияет наследственность: например, у двух волчьих оборотней с вероятностью 80-85% родится волчий оборотень, однако бывают и сюрпризы. Оборотни обладают не только «характером» своей звериной сущности, но и схожими физическими характеристиками. Например, медвежьи оборотни обычно самые высокие и сильные, кошачьи ловкие и бесшумные, а лисьи бывают небольшими, но очень находчивыми и живучими.

<h1>Оборот</h1>

Оборот, то есть смена формы, происходит по желанию оборотня. Чистокровные оборотни впервые испытывают оборот в 7-8 лет, сначала неосознанно при сильных эмоциях, потом привыкают и уже полностью контролируют его к 11-12 годам. Чем меньше доля оборотной крови в человеке, тем труднее дается контроль над оборотом. Те люди, в которых случайное сочетание генов дальних предков-оборотней активировало способность к обороту, обычно начинают впервые оборачиваться только в 12-14 лет и под воздействием сильнейших эмоций, а для контролируемого оборота им необходимо тренироваться у чистокровных оборотней.

<h1>Магия</h1>
Среди оборотней не бывает магов. Некоторые оборотни способны видеть Силу, и даже бывают очень чутки к её потокам, но ни один из них не способен влиять на неё. Маги считают, что это связано с проклятием — магические способности оборотней полностью направлены внутрь, на мирное сосуществование с проклятием. При этом оборотни с даром видеть Силу часто работают на магов или власть — они лучше других рас замечают малейшие изменения и могу определить скрытое заклинание или найти скрывающегося мага.

</div></div></div>

<div class="ghcutoff3"><div id="chara3">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">менталитет</div>
<div class="ghname">ОБОРОТНИ WEREWOLVES</div>
<div class="ghinfo">отвага • верность • воля</div>

<picture style="background-image: url(https://i.pinimg.com/564x/c0/8c/27/c08c … 36ce2e.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Общины</h1>

Хотя все оборотни разные, у них есть свои обычаи и традиции, характерные для них. Оборотни чаще всего живут общинами, т.е. селятся неподалеку от своих собратьев, создавая некий «район» оборотней в городах или даже заселяя целые деревни. У них нет строгой иерархии, но есть старший(-ая) общины, который(-ая) помогает общине решать проблемы. Например, разрешает споры или просит поддержать семью, у которой трудные времена. Взаимовыручка — основа жизни общин. Если дети по какой-то причине остались сиротами — их обязательно заберут в другие семьи общины. Если у кого-то случился неурожай или от болезни погиб скот — их накормят остальные. Такое поведение осталось со времен, когда оборотней считали опасными и не признавали остальные расы, и они могли выживать, только объединившись со своими.

<h1>Закон</h1>

Не все общины оборотней одинаковы добропорядочны и законопослушны, известны случаи, когда общины покрывали преступников из своих и действовали сообща. Но есть и такие, из которых могут выгнать за убийство или грабеж. Неизменно одно — оборотни не позволяют разбираться с сородичами напрямую даже представителям власти. Если у вас возник конфликт с оборотнем или вы хотите ему что-то предъявить, вам необходимо обратиться к старшему общины. Они разберутся внутри общины сами и вынесут свой вердикт. Иногда они заставляют отвечать виновника, иногда компенсируют общими усилиями, а иногда отказываются признавать что бы то ни было. Ссориться с целой общиной — себе дороже.

</div></div></div>

<div class="ghcutoff4"><div id="chara4">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">история</div>
<div class="ghname">ОБОРОТНИ WEREWOLVES</div>
<div class="ghinfo">отвага • верность • воля</div>

<picture style="background-image: url(https://i.pinimg.com/564x/d8/76/ba/d876 … 249059.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Истоки</h1>

Согласно легенде, когда люди и эльфы были ещё юными божьими детьми, одно человеческое племя поселилось совсем близко к эльфам. Это было племя охотников, которые убивали немало дичи, как для себя, так и на обмен с другими племенами. Эльфийские маги разозлились на кровопролитие и прокляли всё племя, обрекая их и их потомков «пожить в шкуре тех, кого они истребляют». Но у племени были сильные шаманы, и они смогли частично обратить проклятие. В результате этого появились оборотни — люди, способные обращаться в зверей по собственной воле. Эльфийское проклятие оказалось настолько сильно, что люди даже с небольшой долей оборотной крови сохраняли эту способность. Со временем оборотни распространились повсюду и стали считаться такой же расой, как остальные.

<h1>Гонения</h1>

Прежде, чем оборотни стали равноправными гражданами Империи, им пришлось пережить гонения. С древних времен странных людей, способных на смену облика, боялись и даже презирали остальные расы, так как они не являлись порождением божественной воли. Оборотням приходилось выживать самостоятельно, из-за чего они привыкли держаться друг за друга и не слишком доверять другим расам. Свои почет и принятие им пришлось буквально завоевывать, участвуя в людско-эльфийских войнах. И хотя сейчас предубеждения против оборотней скорее будут высмеяны, некоторые религиозные фанатики всё ещё считают их проклятыми и недостойными.

</div></div></div>

</div><center><a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/html]

[html]<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Inconsolata|Pt+Serif" rel="stylesheet">
<style>

#girlharbor { position: relative; margin: 20px auto 0px; height: 580px; width: 450px; border: 50px solid #fff; outline: 1px solid #ddd; background-image: url(https://i.pinimg.com/564x/c1/a7/2d/c1a7 … f64999.jpg); background-size: cover;
/**change these for character colours**/
--char1:#0e3a35;
--char2:#8d6b34;
--char3:#0c3c36;
--char4:#82632d;
--char5:#135651; }
#chara1 .ghname { color: var(--char1); }
#chara2 .ghname { color: var(--char2); }
#chara3 .ghname { color: var(--char3); }
#chara4 .ghname { color: var(--char4); }
#chara5 .ghname { color: var(--char5); }
#chara1 .ghin h1, #chara1 .ghin b { color: var(--char1); border-bottom: 1px solid var(--char1); }
#chara2 .ghin h1, #chara2 .ghin b { color: var(--char2); border-bottom: 1px solid var(--char2); }
#chara3 .ghin h1, #chara3 .ghin b { color: var(--char3); border-bottom: 1px solid var(--char3); }
#chara4 .ghin h1, #chara4 .ghin b { color: var(--char4); border-bottom: 1px solid var(--char4); }
#chara5 .ghin h1, #chara5 .ghin b { color: var(--char5); border-bottom: 1px solid var(--char5); }
#chara1 .ghpictureover, #chara1 .ghline1, #chara1 .ghline2, #chara1 .ghline3, #chara1 .ghline4 { background: var(--char1); }
#chara2 .ghpictureover, #chara2 .ghline1, #chara2 .ghline2, #chara2 .ghline3, #chara2 .ghline4 { background: var(--char2); }
#chara3 .ghpictureover, #chara3 .ghline1, #chara3 .ghline2, #chara3 .ghline3, #chara3 .ghline4 { background: var(--char3); }
#chara4 .ghpictureover, #chara4 .ghline1, #chara4 .ghline2, #chara4 .ghline3, #chara4 .ghline4 { background: var(--char4); }
#chara5 .ghpictureover, #chara5 .ghline1, #chara5 .ghline2, #chara5 .ghline3, #chara5 .ghline4 { background: var(--char5); }
.ghbackimg { position: absolute; width: 100%; height: 100%; background: #222; mix-blend-mode: multiply; }
#girlharbor picture { display: block; position: absolute; height: 450px; width: 350px; background-size: cover; top: 100px; left: 100px; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
#girlharbor picture:after { display:block; content:""; height: 450px; width: 350px; background: #777; mix-blend-mode: multiply; position: absolute; top: 0px; left: 0px; }
.ghpictureover { display: block; position: absolute; width: 350px; height: 450px; top: 100px; left: 100px; mix-blend-mode: screen; background: var(--char1); }
.ghname { position: absolute; width: 0px; color: var(--char1); font-family: abril fatface; font-size: 53px; bottom: 37px; text-transform: Uppercase; text-align: left; left:0px; line-height:75%; z-index: 1; font-weight: 900; mix-blend-mode: hard-light; }
.ghinfo { width: 545px; height: 20px; position: absolute; display: block; bottom: 11px; line-height: 140%; font-family: inconsolata; text-align: right; text-transform: capitalize; color: #545451; font-size: 11px; left: 0px; letter-spacing: 2px; z-index: 2; }
.ghlyrics { width: 550px; height: 20px; position: absolute; display: block; top: 32px; line-height: 140%; font-family: inconsolata; text-align: left; text-transform: capitalize; color: #545451; font-size: 11px; left: 0px; padding-left: 05px; letter-spacing: 3px; }
#girlharbor input { display: none; }
#girlharbor label { position: relative; top: 30px; height: 10px; display: inline-block; cursor: pointer; transition: 0.2s; margin: 0px 10px 0px 50px; line-height: 100%; font-family: pt serif; text-transform: uppercase; font-weight: 900; font-size: 11px; color: #545451; z-index: 3; }
#char1:checked+label { color: var(--char1); font-style: italic; }
#char2:checked+label { color: var(--char2); font-style: italic; }
#char3:checked+label { color: var(--char3); font-style: italic; }
#char4:checked+label { color: var(--char4); font-style: italic; }
#char5:checked+label { color: var(--char5); font-style: italic; }
.ghcutoff1, .ghcutoff2, .ghcutoff3, .ghcutoff4, .ghcutoff5 { position: absolute; height: 665px; width: 550px; overflow: hidden; top: -50px; left: -50px; opacity: 0; z-index: 0; transition: 0.5s; }
#char1:checked ~ .ghcutoff1, #char2:checked ~ .ghcutoff2, #char3:checked ~ .ghcutoff3, #char4:checked ~ .ghcutoff4, #char5:checked ~ .ghcutoff5 { opacity: 1; z-index: 1; }
.ghin { position: absolute; top:125px; width: 295px; height: 400px; left: 125px; background: rgba(255, 255, 255, 0.8); outline: 25px solid rgba(255, 255, 255, 0.8); font-family: pt serif; color: #5b5b4e; font-size: 11px; text-align: justify; padding-right: 5px; line-height: 130%; overflow: auto; opacity: 0; transition: 0.5s; }
.ghcutoff1:hover .ghin, .ghcutoff2:hover .ghin, .ghcutoff3:hover .ghin, .ghcutoff4:hover .ghin, .ghcutoff5:hover .ghin { opacity: 1; }
.ghin h1 { color: #91939d; font-size: 20px; font-family: Abril Fatface; text-transform: uppercase; text-align: right; border-bottom: 1px solid #91939d; }
.ghline1 { background: white; position: absolute; width: 550px; height: 4px; top: 25px; left: 0px; }
.ghline2 { background: white; position: absolute; width: 550px; height: 1px; top: 50px; left: 0px; z-index: 1; }
.ghline3 { background: white; position: absolute; width: 550px; height: 4px; bottom: 10px; left: 0px; }
.ghline4 { background: white; position: absolute; width: 550px; height: 1px; bottom: 35px; left: 0px; z-index: 1; }
#chara1 .ghin::-webkit-scrollbar { width: 5px; }
#chara1 .ghin::-webkit-scrollbar-track { background-color: var(--char1); border: 2px solid transparent; background-clip: content-box; }
#chara1 .ghin::-webkit-scrollbar-thumb { background-color: var(--char1); }
#chara2 .ghin::-webkit-scrollbar { width: 5px; }
#chara2 .ghin::-webkit-scrollbar-track { background-color: var(--char2); border: 2px solid transparent; background-clip: content-box; }
#chara2 .ghin::-webkit-scrollbar-thumb { background-color: var(--char2); }
#chara3 .ghin::-webkit-scrollbar { width: 5px; }
#chara3 .ghin::-webkit-scrollbar-track { background-color: var(--char3); border: 2px solid transparent; background-clip: content-box; }
#chara3 .ghin::-webkit-scrollbar-thumb { background-color: var(--char3); }
#chara4 .ghin::-webkit-scrollbar { width: 5px; }
#chara4 .ghin::-webkit-scrollbar-track { background-color: var(--char4); border: 2px solid transparent; background-clip: content-box; }
#chara4 .ghin::-webkit-scrollbar-thumb { background-color: var(--char4); }
#chara5 .ghin::-webkit-scrollbar { width: 5px; }
#chara5 .ghin::-webkit-scrollbar-track { background-color: var(--char5); border: 2px solid transparent; background-clip: content-box; }
#chara5 .ghin::-webkit-scrollbar-thumb { background-color: var(--char5); }
</style>
<div id="girlharbor">
<div class="ghbackimg"></div>

  <input type="radio" id="char1" name="movements"checked>
<label for="char1">Общее</label>
<input type="radio" id="char2" name="movements">
<label for="char2">Способности</label>
<input type="radio" id="char3" name="movements">
<label for="char3">Менталитет</label>
<input type="radio" id="char4" name="movements">

<div class="ghcutoff1"><div id="chara1">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Общее</div>
<div class="ghname">КЕНДЕРЫ KENDERS</div>
<div class="ghinfo">природа • улыбки • приключения</div>

<picture style="background-image: url(https://i.pinimg.com/originals/0c/a9/1e … 4b97ed.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Страна</h1>
Кендеры живут в долине Индру, расположенной на восточном побережье Циодоса сразу за горами Торбардина. Однако, кендеры — путешественники, и вы можете встретить их почти в любой точке мира.

<h1>Возраст</h1>
Кендеры живут до 120-150 лет, совершеннолетие наступает в 20 лет.

<h1>Бог-покровитель</h1>
Кендеры поклоняются Огуну как отцу-богу, но также у многих из них в чести Немиза как покровительница странников и творцов.

<h1>Маги</h1>
Кендеры склонны к магии иллюзий и сложной бытовой магии: никто так комфортно не путешествует, как кендеры-маги. Многие кендеры обладают небольшими магическими способностями, но магов, способных творить мощные сложные заклинания, среди них совсем мало.

</div></div></div>

<div class="ghcutoff2"><div id="chara2">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Способности</div>
<div class="ghname">КЕНДЕРЫ KENDERS</div>
<div class="ghinfo">природа • улыбки • приключения</div>

<picture style="background-image: url(https://i.pinimg.com/736x/4a/5f/23/4a5f … 7ddeb6.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Физические</h1>
Кендеры — это невысокие (человеку по солнечное сплетение) смертные, внешне похожие на эльфов. У них круглые лица с острым подбородком, часто бывают большие глаза и маленькие нос и губы. Они худые и жилистые, часто выглядят почти детьми. Любят носить яркие одежды, много разнообразных украшений, уважают одежду с большим количеством карманов, ремней и застежек. Внешне они могут казаться слабыми, но на самом деле они очень ловкие, быстрые и выносливые. А ещё кендеры умеют прятаться и абсолютно бесшумно передвигаться. Поймать кендера, который не хочет быть пойманным — задача нетривиальная.

<h1>Магические</h1>
Кендеры — очень чувствительная к Силе раса. Почти все из них обладают хотя бы зачатками магического дара. В каждом доме хозяева знают мелкие бытовые заклинания, чтобы упрощать себе жизнь. Кендерийки ткут особое полотно: из него получаются сумки, которые вмещают в себя намного больше, чем их настоящий размер. Уровень магического дара может разниться от кендера к кендеру, но обычно он либо совсем маленький, либо чуть ниже среднего.
Однако, те редкие кендеры, которые обладают сильным магическим даром, становятся по-настоящему искусными магами. Чаще всего из них получаются иллюзионисты, а ещё они легко учат заклинания телепортации и способны перемещаться практически за секунды. Некоторые кендеры вкладывают магию в музыку, делая её особенно проникновенной и прекрасной.

</div></div></div>

<div class="ghcutoff3"><div id="chara3">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Менталитет</div>
<div class="ghname">КЕНДЕРЫ KENDERS</div>
<div class="ghinfo">природа • улыбки • приключения</div>

<picture style="background-image: url(https://i.pinimg.com/736x/68/73/b8/6873 … traits.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Легкость бытия</h1>
Нет никого более расслабленного, улыбчивого и довольного жизнью, чем кендер. Чтобы не происходило в их жизнях, они принимают это легко. Для них не бывает трагедий и драм — они слишком любят жизнь. Некоторые смертные даже считают кендеров слегка блаженными. Они веселые, активные, любят танцевать и петь, много шутят. Другим смертным бывает сложно в их компании, потому что кендер, минуту назад рыдавший навзрыд, может так же сильно радоваться в следующую. Эмоции для них — важная часть жизни, которой стоит наслаждаться от души.

<h1>Путешествия</h1>
Кендеры — заядлые путешественники. Мало кто так любит дорогу, как они. Чаще всего в путь отправляются молодые кендеры. Вдоволь наскитавшись по долам и весям, они возвращаются в родную долину и заводят себе тихую семейную жизнь. Не возвращаются только барды, которых среди кендеров не мало, потому что бард, по их мнению, всю жизнь должен нести своё творчество в массы. Иногда, забираясь в самые отдаленные и глухие участки мира, вы с удивлением можете увидеть кендера, который развел костер и жарит себе какого-нибудь кролика.

<h1>Отношения с расами</h1>
Так получилось, что кендеры в основном не воспринимаются как враги. Отчасти потому что они слишком жизнерадостные и легкие для войны, отчасти потому, что они окружены горами дворфов и находятся под их недвусмысленной защитой. Кендеры — ближайшие братья дворфов, и они живут в тесном союзе. Кендеры продают дворфам еду и дерево, а дворфы защищают их и снабжают всяческими результатами своих ремесел. <br>
Кендеры не умеют кого-то не любить, зато их часто не любят другие. За легкомысленность, за шкодливость и за острые языки.

</div></div></div>

</div><center><a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/html]

[html]<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Inconsolata|Pt+Serif" rel="stylesheet">
<style>

#girlharbor { position: relative; margin: 20px auto 0px; height: 580px; width: 450px; border: 50px solid #fff; outline: 1px solid #ddd; background-image: url(https://i.pinimg.com/564x/c1/a7/2d/c1a7 … f64999.jpg); background-size: cover;
/**change these for character colours**/
--char1:#0e3a35;
--char2:#8d6b34;
--char3:#0c3c36;
--char4:#82632d; }
#chara1 .ghname { color: var(--char1); }
#chara2 .ghname { color: var(--char2); }
#chara3 .ghname { color: var(--char3); }
#chara4 .ghname { color: var(--char4); }
#chara1 .ghin h1, #chara1 .ghin b { color: var(--char1); border-bottom: 1px solid var(--char1); }
#chara2 .ghin h1, #chara2 .ghin b { color: var(--char2); border-bottom: 1px solid var(--char2); }
#chara3 .ghin h1, #chara3 .ghin b { color: var(--char3); border-bottom: 1px solid var(--char3); }
#chara4 .ghin h1, #chara4 .ghin b { color: var(--char4); border-bottom: 1px solid var(--char4); }
#chara1 .ghpictureover, #chara1 .ghline1, #chara1 .ghline2, #chara1 .ghline3, #chara1 .ghline4 { background: var(--char1); }
#chara2 .ghpictureover, #chara2 .ghline1, #chara2 .ghline2, #chara2 .ghline3, #chara2 .ghline4 { background: var(--char2); }
#chara3 .ghpictureover, #chara3 .ghline1, #chara3 .ghline2, #chara3 .ghline3, #chara3 .ghline4 { background: var(--char3); }
#chara4 .ghpictureover, #chara4 .ghline1, #chara4 .ghline2, #chara4 .ghline3, #chara4 .ghline4 { background: var(--char4); }
.ghbackimg { position: absolute; width: 100%; height: 100%; background: #222; mix-blend-mode: multiply; }
#girlharbor picture { display: block; position: absolute; height: 450px; width: 350px; background-size: cover; top: 100px; left: 100px; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
#girlharbor picture:after { display:block; content:""; height: 450px; width: 350px; background: #777; mix-blend-mode: multiply; position: absolute; top: 0px; left: 0px; }
.ghpictureover { display: block; position: absolute; width: 350px; height: 450px; top: 100px; left: 100px; mix-blend-mode: screen; background: var(--char1); }
.ghname { position: absolute; width: 0px; color: var(--char1); font-family: abril fatface; font-size: 53px; bottom: 37px; text-transform: Uppercase; text-align: left; left:0px; line-height:75%; z-index: 1; font-weight: 900; mix-blend-mode: hard-light; }
.ghinfo { width: 545px; height: 20px; position: absolute; display: block; bottom: 11px; line-height: 140%; font-family: inconsolata; text-align: right; text-transform: capitalize; color: #545451; font-size: 11px; left: 0px; letter-spacing: 2px; z-index: 2; }
.ghlyrics { width: 550px; height: 20px; position: absolute; display: block; top: 32px; line-height: 140%; font-family: inconsolata; text-align: left; text-transform: capitalize; color: #545451; font-size: 11px; left: 0px; padding-left: 05px; letter-spacing: 3px; }
#girlharbor input { display: none; }
#girlharbor label { position: relative; top: 30px; height: 10px; display: inline-block; cursor: pointer; transition: 0.2s; margin: 0px 10px 0px 20px; line-height: 100%; font-family: pt serif; text-transform: uppercase; font-weight: 900; font-size: 11px; color: #545451; z-index: 3; }
#char1:checked+label { color: var(--char1); font-style: italic; }
#char2:checked+label { color: var(--char2); font-style: italic; }
#char3:checked+label { color: var(--char3); font-style: italic; }
#char4:checked+label { color: var(--char4); font-style: italic; }
.ghcutoff1, .ghcutoff2, .ghcutoff3, .ghcutoff4 { position: absolute; height: 665px; width: 550px; overflow: hidden; top: -50px; left: -50px; opacity: 0; z-index: 0; transition: 0.5s; }
#char1:checked ~ .ghcutoff1, #char2:checked ~ .ghcutoff2, #char3:checked ~ .ghcutoff3, #char4:checked ~ .ghcutoff4 { opacity: 1; z-index: 1; }
.ghin { position: absolute; top:125px; width: 295px; height: 400px; left: 125px; background: rgba(255, 255, 255, 0.8); outline: 25px solid rgba(255, 255, 255, 0.8); font-family: pt serif; color: #5b5b4e; font-size: 11px; text-align: justify; padding-right: 5px; line-height: 130%; overflow: auto; opacity: 0; transition: 0.5s; }
.ghcutoff1:hover .ghin, .ghcutoff2:hover .ghin, .ghcutoff3:hover .ghin, .ghcutoff4:hover .ghin { opacity: 1; }
.ghin h1 { color: #91939d; font-size: 20px; font-family: Abril Fatface; text-transform: uppercase; text-align: right; border-bottom: 1px solid #91939d; }
.ghline1 { background: white; position: absolute; width: 550px; height: 4px; top: 25px; left: 0px; }
.ghline2 { background: white; position: absolute; width: 550px; height: 1px; top: 50px; left: 0px; z-index: 1; }
.ghline3 { background: white; position: absolute; width: 550px; height: 4px; bottom: 10px; left: 0px; }
.ghline4 { background: white; position: absolute; width: 550px; height: 1px; bottom: 35px; left: 0px; z-index: 1; }
#chara1 .ghin::-webkit-scrollbar { width: 5px; }
#chara1 .ghin::-webkit-scrollbar-track { background-color: var(--char1); border: 2px solid transparent; background-clip: content-box; }
#chara1 .ghin::-webkit-scrollbar-thumb { background-color: var(--char1); }
#chara2 .ghin::-webkit-scrollbar { width: 5px; }
#chara2 .ghin::-webkit-scrollbar-track { background-color: var(--char2); border: 2px solid transparent; background-clip: content-box; }
#chara2 .ghin::-webkit-scrollbar-thumb { background-color: var(--char2); }
#chara3 .ghin::-webkit-scrollbar { width: 5px; }
#chara3 .ghin::-webkit-scrollbar-track { background-color: var(--char3); border: 2px solid transparent; background-clip: content-box; }
#chara3 .ghin::-webkit-scrollbar-thumb { background-color: var(--char3); }
#chara4 .ghin::-webkit-scrollbar { width: 5px; }
#chara4 .ghin::-webkit-scrollbar-track { background-color: var(--char4); border: 2px solid transparent; background-clip: content-box; }
#chara4 .ghin::-webkit-scrollbar-thumb { background-color: var(--char4); }
</style>
<div id="girlharbor">
<div class="ghbackimg"></div>

  <input type="radio" id="char1" name="movements"checked>
<label for="char1">Общее</label>
<input type="radio" id="char2" name="movements">
<label for="char2">Способности</label>
<input type="radio" id="char3" name="movements">
<label for="char3">Менталитет</label>
<input type="radio" id="char4" name="movements">
<label for="char4">Служение</label>

<div class="ghcutoff1"><div id="chara1">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Общее</div>
<div class="ghname">РУСАЛКИ MERMAIDS</div>
<div class="ghinfo">море • целительство • матриарх</div>

<picture style="background-image: url(https://i.pinimg.com/originals/10/44/aa … e2bda1.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Страна</h1>
Русалки главенствуют над океаном и Узким морем. Государство русалок называется Имания, им управляет королева. Королевство состоит из больших роскошных городов, построенных под водой из камней и кораллов.

<h1>Возраст</h1>
В среднем русалки живут до 350-400 лет, однако, известно несколько случаев, когда русальи маги и жрицы доживали до 500 лет. Совершеннолетие русалки наступает в 70 лет.

<h1>Бог-покровитель</h1>
Русалки поклоняются Инанне, их матери. Другие боги получают гораздо меньше внимания, хотя иногда молятся и им.

<h1>Маги</h1>
Из русалок выходят самые сильные целительницы, некоторые из которых способны практически на чудеса. Также некоторые русалки могут управлять морем, течениями и волнами. Некоторые русальи маги хорошо находят язык с морскими животными и умеют чувствовать их настроение и эмоции.

</div></div></div>

<div class="ghcutoff2"><div id="chara2">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Способности</div>
<div class="ghname">РУСАЛКИ MERMAIDS</div>
<div class="ghinfo">море • целительство • матриарх</div>

<picture style="background-image: url(https://i.pinimg.com/originals/20/90/5a … 445102.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Физические</h1>
Русалки — это смертные с телом человека и рыбьи хвостом ниже пояса. Они дышат жабрами и живут только под водой. Воздух на поверхности жжет их, и через 5 минут на суше русалка умирает, если не примет человеческую форму. Между пальцами у них тонкая перепонка, на предплечьях и спине часто бывают плавники. Длина, форма и цвет хвоста, наличие дополнительных плавников и их форма бывают самыми разнообразными и обычно зависят от того, откуда русалка — из теплых вод у рифов или глубоких холодных впадин. На внешний вид также влияет наследственность. <br>
Все русалки очень хорошо и быстро плавают, а их мощные хвосты способны одним ударом оглушить человека или крупную рыбу. Русалки общаются на сложном языке, состоящем из языка тела и вербального языка, многие звуки которого уходят за грани слышимости других смертных. Они способны понимать сигналы китов и дельфинов.

<h1>Магические</h1>
Среди русалок распространена невербальная магия. Для направления воли обычно используются артефакты, которые часто так же являются оружием — трезубцы, копья, гарпуны и т.д. Для простых заклинаний и целительства обычно используются жесты рук и иногда хвоста. <br>
Заклинатели животных, наоборот, используют для магии вербальные формы, часто похожие на сигналы тех животных, с которыми они работают. Такие маги часто способны взаимодействовать со многими разными существами, но по-настоящему работают с одним-двумя видами.<br>
Русальи целители — самые сильные целители среди других смертных магов, и часто учатся в храмах Инанны. Их связь с богиней-матерью помогает им излечивать даже такие раны и болезни, которые не в силах излечить другие.

<h1>Смена облика</h1>
Осознав, что её дети оказались отрезаны от остальных рас, Инанна подарила русалкам возможность обращаться в людей. На смену облика способна каждая русалка, независимо от наличия у неё магических способностей. Учиться этому начинают после совершеннолетия, только тогда юная русалка получает право выйти на сушу. Человеческий облик максимально приближен к настоящей внешности русалки, но только в той мере, пока она продолжает выглядеть человеком. Отличить русалку от обычного человека в этом облике почти невозможно — это могут сделать только маги по характерному рисунку Силы. В человеческом облике русалки полностью сохраняют магические способности.

</div></div></div>

<div class="ghcutoff3"><div id="chara3">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Менталитет</div>
<div class="ghname">РУСАЛКИ MERMAIDS</div>
<div class="ghinfo">море • целительство • матриарх</div>

<picture style="background-image: url(https://i.pinimg.com/736x/3d/d0/54/3dd0 … 2b65dc.jpg)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Матриархат</h1>
В Имании царит культ богини-матери, и вместе с ним — матриархат. Во главе страны стоит королева, и основные должности занимают русалки. Их мужья обычно сидят дома или занимаются творчеством, часто на них ложится забота о детях. Тритоны могут стать и воинами, и министрами, но обычно этот путь для них гораздо труднее, чем для русалок. Несмотря на отсутствие официальных запретов, общество не одобряет такие решения. Аристократические линии и власть наследуются от матери к дочери.

<h1>Разность городов</h1>
Хотя Имания — это единое королевство, в разных частях света нравы и традиции могут немного отличатся. Это часто связано с температурой течений и близостью суши. Обычно русалки, живущие близко к портовым поселениям, более открытые другим расам и с радостью идут на контакт, тогда как жители глубинных городов предпочитают не вступать в контакт с чужаками.

<h1>Отношения с другими расами</h1>
Русалки никогда особо не враждовали с другими смертными — им просто нечего делить с ними. Однако, в древности русалки могли уничтожить корабль тех, кто охотится на их китов, или низвергнуть цунами на город, который несправедливо обошелся с их сестрами в человеческом обличии. Другие расы стараются относится к ним как минимум уважительно, так как море — это грозная и мощная сила, которой не так просто что-то противопоставить. Однако, торговля с русалками очень даже бойкая, ведь многие сокровища моря не может добыть больше никто.

</div></div></div>

<div class="ghcutoff4"><div id="chara4">
<div class="ghline1"></div><div class="ghline2"></div><div class="ghline3"></div><div class="ghline4"></div>
<div class="ghlyrics">Служение</div>
<div class="ghname">РУСАЛКИ MERMAIDS</div>
<div class="ghinfo">море • целительство • матриарх</div>

<picture style="background-image: url(https://cdna.artstation.com/p/assets/im … 1594304727)"></picture>
<div class="ghpictureover"></div>
<div class="ghin">
<h1>Храмы Инанны</h1>
Учение Инанны имеет огромную власть в Имании. Верховная жрица обладает политическим весом, сильнее которого только слово королевы. В каждом городе обязательно есть большой Храм, который является настоящим шедевром архитектуры. Для украшения храмов используются самые дорогие материалы, а на еженедельные службы приплывают почти все горожане.

<h1>Служение целителей</h1>
Некоторые жрицы Инанны добровольно дают обет целителей. Такие русалки отказываются иметь семью и детей, посвящают себя изучению целительства, помогают всем нуждающимся безвозмездно и живут только на добровольную плату вылеченных ими больных. Многие из них выбирают жизнь на суше в человеческом облике, чтобы нести милость богини-матери всем расам. Они приходят в города других смертных и живут при местных храмах богини. Некоторые, самые отчаянные, уходят далеко вглубь материков и многие годы живут в человеческом обличии, не возвращаясь в истинную форму. Это считается большой честью и великим подношением богине.
</div></div></div>

</div><center><a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/html]