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

[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://forumupload.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://forumupload.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://forumupload.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://forumupload.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 #313131;
    outline: 1px solid #000000;
}

.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 / 61%) 74%, rgb(0 0 0 / 90%) 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: #100e0e;
    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 #313131;
    /* border-radius: 5px; */
}

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

.close-btn {
  background: rgb(255 255 255 / 2%);
    border: 1px solid rgb(28 28 28);
    /*border-radius: 15px; */
    /* height: 23px; */
    text-transform: uppercase;
    font: 13px beuafort;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    letter-spacing: 2px;
    color: #555555;
    padding: 5px;
}

.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]