⠀Демоны Бездны

[hideprofile]

[html]<!-- мироописание от духа -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>
<div class="world-container">

<div class="world-block">
  <div class="header">
    <span>Архидьявол</span>
<span>★★★★★★★★★★</span>
  </div>
    <img src="https://upforme.ru/uploads/001c/12/48/2/444961.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Общее описание</h5>
<p>Согласно религиозным трактатам, демоны родились в тот момент, когда Рахетай сослала отвергнутых ею высших духов в Нижний мир, где не было ни жизни, ни смерти, ни света, ни духовных благ. Они оказались брошены на испепеленных землях, терзаемых бушующим огнем, беспрестанной вулканической активностью, великим и нестерпимым жаром Бездны, охваченной запахами гари и серы. Проклятый создателем мир исказил сущности высших духов, заставив их не только поменять обличье, но и усугубил темные стороны их личности. Впредь, ощущая предательство и тоску по Верхнему миру, они поклялись отомстить всем, кто был причастен к их падению. Они наметили путь, пролегающий через Срединный мир разумных рас, стоящий между ними, бывшими братьями и, конечно, Матерью.

<p>Когда произошло унизительное падение, бывшие духи оказались растеряны, напуганы и обозлены. Суматоха внесла такой беспорядок, что пленники Нижнего мира рассыпались по разным уголкам непознанных земель. Лишь спустя десятилетия бесплодных поисков пришло осознание, что выхода не существует. Во всяком случае сейчас.

<p>Первый, отринувший заветы Рахетай, внимательно наблюдал за хаотичным поведением демонов, не поддаваясь общему упадническому настроению и панике. Когда буйство и гнев снизились, он выступил перед братьями и, как обладатель превалирующих магических сил, объявил себя Архидьяволом — повелителем Нижнего мира. Он призвал прекратить страшиться своей участи и дал новую цель, к которой стали стремиться все демоны.

<p>В конце концов Нижний мир превратился в прибежище и новый дом, где разрасталась мощь демонической орды под неустанным взором Архидьвола.
</p>
     </div></div>

  <div class="world-block">
  <div class="header">
    <span>Дрессировщик</span>
<span>★★★★★✰✰✰✰✰</span>
  </div>
    <img src="https://upforme.ru/uploads/001c/12/48/2/334683.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Общее описание</h5>
<p>Дрессировщик имеет человеческие черты — крупное и атлетичное тело, высокий рост (190-200 см), обезображенное шрамами лицо, напоминающее жуткую бездушную маску. Его красная кожа усеяна множеством заостренных шипов, из головы торчат два кривых рога. На поясе он носит длинный кнут, которым ловко управляется в бою.

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

  <div class="world-block">
  <div class="header">
    <span>Крушитель</span>
<span>★★★★✰✰✰✰✰✰</span>
  </div>
    <img src="https://upforme.ru/uploads/001c/12/48/2/877249.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Общее описание</h5>
<p>Самые крупные из всех известных демонов, крушители, всегда находятся в центре повышенного внимания военачальников смертных армий, так как их необузданная мощь способна на сотворение невероятных и вместе с тем неприятных вещей. Они участвуют при любых осадах и наступлениях на более-менее людные поселения, умудряясь сносить прочные опоры и ломать стены, работая в качестве катапульты. Поднимая огромные валуны, эти демоны-исполины метают камни на далекие расстояния, чаще всего в пределах ширины стандартного рва с немыслимой силой. Редко какой оборонной стене удается выстоять от полученного урона.

<p>Крушители достигают высоты трех с половиной метров, их тела мускулистые и массивные, без хвоста, с широкими плечами. Подобно людям они перемещаются на двух конечностях, только вместо ног имеют копыта. Руки пятипалые, позволяющие хватать и брать предметы. Морды животного типа, с огромным собачьим носом и бледной красной кожей. На голове ветвистые рога. Нижняя челюсть, выдвинутая вперед, оголяет ряд острых клыков. Глаза мелкие, рыжие, светятся в темноте. Тело покрыто длинной густой темной шерстью.
</p>
     </div></div>

  <div class="world-block">
  <div class="header">
    <span>Гончая</span>
<span>★★★✰✰✰✰✰✰✰</span>
  </div>
    <img src="https://upforme.ru/uploads/001c/12/48/2/638290.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Общее описание</h5>
<p>Говорят, что вой гончих Бездны практически не отличим от лая собак. Это заверение отчасти правдиво, потому что обычному слуху недоступны частоты, которых достигают в своем устрашающем пении огненные псы. Они редко нападают поодиночке, чаще их спускают шумной оравой, несущейся к своей цели с выдающимся стремлением.

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

  <div class="world-block">
  <div class="header">
    <span>Черт</span>
<span>★✰✰✰✰✰✰✰✰✰</span>
  </div>
    <img src="https://upforme.ru/uploads/001c/12/48/2/26303.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
     <h5>Общее описание</h5>
<p>Не повезло тем высшим духам, которым была уготовлена судьба стать чертями. Как наименее востребованные, слабые и ничтожные сущности, что не справились с голодом отчаяния и порывами агрессии, им пришлось смириться с участью самого слабого демона.

<p>Черти невелики ростом, довольно худы и жилисты. Перемещаются они на четырех конечностях и в таком положении доходят взрослому человеку до середины бедра. У них красная, бурая или серая кожа с текстурой мелкой чешуи, на голове некрупные рога, уши удлиненные и заостренные, как у кадивов. Глаза пылающие, яркие и приметные на узких, скуластых мордах. Имеют длинный заостренный хвост, который используют не только для балансировки, но и для атаки. Помимо него используют в бою очень острые, похожие на копья, мелкие зубы и прочные когти.
</p>
     </div></div>

<style>
/* css мироописания от духа */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Rubik:wght@500;600;800;900&display=swap');

.world-container {
  column-gap: 0px;  /* отступ между колонками */
  margin: 0px auto 0px auto;
  column-count: 1; /* количество столбцов*/
  width: 900px;  /* ширина контейнера с блоками*/
  position: relative;
  text-align: center;
}

.world-block {
      margin: 1px 0px;
    padding: 0px;
    display: inline-block;
    line-height: 0;
    width: 200px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
    border: 1px solid #e0d1b8;
    outline: 1px solid #a08453;
}

.world-block .header {
  position: absolute;
    background: linear-gradient(to bottom, rgb(41 154 11 / 0%) 0%, rgb(0 0 0 / 0%) 18%, rgb(0 0 0 / 6%) 39%, rgb(0 0 0 / 43%) 74%, rgb(0 0 0 / 74%) 100%);
    color: #cecbc2;
    width: 100%;
    height: 100%;
    display: flex
;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    font: 18px 'beuafort';
    /* text-transform: uppercase; */
    z-index: 1;
}

.world-block:hover {
  filter: grayscale(100%)
}

.world-block img {
    transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
    width: 200px;
    height: 200px;
}

.world-block:hover img {
  transform: scale(1.1);
  filter: blur(1px);
}

.world-block .header span {
  display: block;
  margin-bottom: 10px;
  text-align: center;
font-family: 'BebasNeue';
    font-size: 22px;
}

.closed{
  background: #272727;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    padding: 25px;
    text-align: justify;
    display: none;
    /* border: 3px double #8b6f3e; */
    border: 1px solid #a08453;
    box-shadow: 0 0 1px 1px #201f1c70, inset 0px 0px 0px 1px #a1998a, inset 0 0 1px 1px #cec8bc;
    outline: 1px solid #272727;
    border-radius: 8px;
    color: #8b7154;
}

.closed > div:not(.close-btn) {
  overflow-y: auto;
  height: calc(100% - 35px);
  padding-right: 5px;
}

.close-btn {
  background: rgb(0 0 0 / 13%);
    border: 1px solid rgb(131 112 86);
    border-radius: 8px;
    /* height: 23px; */
    text-transform: uppercase;
    font: 13px beuafort;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    letter-spacing: 2px;
    color: #8b7154;
    padding: 3px;
}

.closed k1 {
  font: 20px you;  /* шрифт заголовков описания */
  margin: 30px 0px 10px;
  position: relative;
  padding-left: 45px;
  color: #8b7154;
}

.closed k1:before {
  content: "";
  height: 2px;
  width: 30px;
  background: #413525;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.closed k1:first-child {
  margin-top: 0;
}

.closed em {
  font: 12px SANTELLO;
    color: #000000;
    display: table;
    /* border: 1px solid rgb(28 28 28); */
    border-radius: 3px;
    padding: 7px 14px 7px 14px;
    text-align: right;
    /* width: 250px; */
    /* margin: 10px 0; */
    margin: 0px 0px 10px auto;
    background: #8b7154;
}

.closed h5 {
  font: 23px you;  /* шрифт заголовков описания */
  margin: 30px 0px 10px;
  position: relative;
  padding-left: 45px;
  color: #8b7154;
}

.closed h5:before {
  content: "";
  height: 2px;
  width: 30px;
  background: #413525;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%)
}

details{
  display: block;
    background: #151313;
    border: 1px solid #1c1c1c;
    /* width: 100%; */
    /* box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 20px;
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;}
summary {
   /*display: block; */
    cursor: pointer;
    position: relative;
    padding: 10px;
    /* border: 1px solid #1c1c1c; */
    /* background: #151313; */
    /* border-radius: 0px !important;
}
summary:before { 
  top: .4em;
  left: .3em;
  color: transparent;
  background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
  width: 1em;
  height: 1em; 
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: rotateZ(90deg);
}
summary ~ * {
   padding: 0 2em 10px 2em;
}
details[open] summary ~ *{
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
</style>

[/html]