<!--HTML--><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Spectral:ital@1&display=swap" rel="stylesheet">

<div id="good">
  <div class="bsq">
  </div>
  <div class="mait">
    <div class="imgb">
      <img src="https://i.imgur.com/MSqr1Zs.gif">
      <scr></scr>
    </div>
    <div class="nam">
      <div class="fna">
       Tian Guan Ci Fu
      </div>
      <div class="lna">
        天官赐福
      </div>
    </div>
    <div class="cbg">
    </div>
    <div class="ifo">
    body in abyss, heart in paradise
    </div>
    <input type="radio" name="ttta" id="gtab1" checked>
<label for="gtab1">Story</label>
    <input type="radio" name="ttta" id="gtab2">
<label for="gtab2">Main</label>
    <input type="radio" name="ttta" id="gtab3">
<label for="gtab3">AU - crossfandom</label>
<input type="radio" name="ttta" id="gtab4">
<label for="gtab4">Babai Poetry Nights</label>

<div class="lyrr">
"You've always been the strongest. But you don't need to be strong every waking moment of every day."
</div>
<div class="cont">
<div class="mbt">
<font size="5" color="8b2720">Story</font>
<br>Прошло около <b>трех сотен лет</b> с момента, как была разрушена Небесная столица и повержен Цзюнь У, что ныне заточен под горой Тунлу, полностью лишенный своих духовных сил благодаря проклятым кангам и уничтожению всех его храмов.<br> 
Небесные чертоги еще много лет находились в упадке. После пожара множество богов погибло, а те боги, что были на стороне Цзюнь У, изгнаны. Инь Юй жив и все еще является правой рукой Хуа Чэна, а Повелительница Дождя вернулась на небеса, чтобы помочь в восстановлении. <br> 
Ситуация была настолько критическая, что мог произойти дисбаланс сил. Таким образом, все оставшиеся небожители собирались решить, кто же станет новым Императором небес. Практически единогласно им был избран Се Лянь, который, конечно же, упорно отказывался. И тогда кто-то из небесных чиновников предложил создать верховный совет, который бы управлял поднебесной и отвечал за деятельность богов. Такое предложение оказалось самым разумным, к тому же так бы Небеса быстрее бы вернулись к своей прежней силе.<br> 
Во главе совета встал <b>Се Лянь</b>, помимо него в совет управления делами Небесной столицы были приглашены несколько богов войны, кто-то из богов литературы (возможно, сама Лин Вэнь, которой снова вернули статус и помиловали), <b>Ши Цинсюань</b>, как повелитель сразу двух стихий, и несколько других небесных чиновников. К слову, Цинсюань вознесся почти сразу, спустя год-два от своего низвержения, после одного инцидента, где спас невинные души, рискуя собой без каких-либо промедлений. Так же скорому вознесению поспособствовало то, в каком упадке была Небесная столица, и тот факт, что демон Черных вод не трогал судьбу Повелителя Ветров более, а значит, ему все еще было предначертано занять место на небесах. Из-за нехватки небожителей Цинсюаню отдали еще и "ставку" Повелителя Вод до вознесения нового, пускай артефакт брата он и похоронил вместе с его телом.<br>
<b>Хуа Чэн</b>, как сильнейший из существующих непревзойденных, тоже вошел в совет в качестве представителя демонов: у Небесной столицы и князей демонов общие цели — не допустить рождения нового непревзойденного, особенно в столь нестабильное для Небесных чертог время, поэтому вместе с небожителями он следит за демонами и горой Тунлу.<br>
Так же был принят ряд новых правил, к примеру, теперь тщательно проверяются те, кто только что вознесся, дабы не повторилась история братьев Ши, а демоны не могли так свободно притворяться небожителями, чтобы избежать прежнего проходного двора, на который была похожа Небесная столица при прежнем владыке. Таким образом, стали появляться новые боги, и медленно, но верно Небесная столица восстанавливается и по сей день.<br> 
<b>Се Лянь</b> отныне больше не мусорное божество, а стал высшим богом войны, благодаря чему и был избран главой совета. Возросло и число его последователей, однако он по прежнему временами занимается сбором хлама, помогает всем и вся, отвечая практически на все молитвы. Впрочем, не все так гладко с ним: под грузом ответственности новый владыка постепенно стал ломаться, срываясь, что снова едва не ввергло небеса в новую смуту. Именно в это время Медная Печь на горе Тунлу вновь пробудилась, призывая демонов в свое жерло. Из-за нестабильности главы совета ни небожителям, ни тому же Хуа Чэну не было уже никакого дела до печи (второму непревзойденному в лице <b>демона Черных вод</b> в целом все равно, все эти годы он продолжал сидеть у себя в чертоге Сумрачных вод и практически не отсвечивал), поэтому рождению нового непревзойденного некому было воспрепятствовать.<br> 
И все три мира сразу же потрясла новость, ведь новым непревзойденным впервые оказалась девушка. Хун Янь - хозяйка Тысячи дымов, бесплодной земли, на территории которой обитает преимущественно различная нечисть. О ней и в мире демонов ничего достоверно никогда не было известно, а сейчас ее личность подавно обросла самыми разными слухами. И лишь одному Повелителю Ветров (а ныне и Вод) Хун Янь неожиданно раскрывает свое истинное лицо. <b>Ши Уду</b>, бывший Повелитель Вод, возродился как демон и несколько столетий выжидал и тщательно продумывал каждый свой шаг. Смута в Небесной столице пришлась очень кстати, ведь никто не смог ему помешать, а теперь, выйдя из Печи непревзойденным, Ши Уду решительно настроен отомстить за свою смерть.
</div>

<div class="mbt">
<font size="4" color="8b2720">Main</font>

<a href="https://barcross.rusff.me/viewtopic.php?id=428">• Be there for you • </a><span>Обычные будни никогда не бывают обычными...
<br>Xie Lian | Hua Cheng</span>

<a href="https://barcross.rusff.me/viewtopic.php?id=1628#p108270">Want</a><span> ленивое утро в чертоге сумрачных вод [спустя множество лет после всего]
<br>He Xuan | Shi Qingxuan </span>

<a href="https://barcross.rusff.me/viewtopic.php?id=1689#p113095">Shoot me</a><span> небожитель болеет и говорит в бреду запрещенные вещи, что ранят демона больнее любого клинка [осень не счесть какого года]
<br>Shi Qingxuan | He Xuan</span>

<a href="https://barcross.rusff.me/viewtopic.php?id=1982#p137705">I’ll give you birthday cake</a><span> демону, отвыкшему от праздников, не повезло родиться в один день с повелителем ветров [день рождения шуансюаней]
<br>Shi Qingxuan | He Xuan </span>
<a href="https://barcross.rusff.me/viewtopic.php?id=2326#p161848">We beautiful now</a><span> ночь <s>первого</s> возвращения Хуа Чэна
<br>Hua Cheng | Xie Lian </span>

<a href="https://barcross.rusff.me/viewtopic.php?id=3110">Deepest in my heart</a><span> современный мир, 700 лет спустя после падения Небес
<br>Hua Cheng | Xie Lian </span>

<a href="linky link">название</a><span>описание</span>
</div>


<div class="mbt">
<font size="4" color="8b2720">AU</font>

<a href="https://barcross.rusff.me/viewtopic.php?id=828">From the new world</a><span>антиутопия ау, мистика
<br>Lee Haechan | Huang Renjun</span>
<a href="https://barcross.rusff.me/viewtopic.php?id=1632#p108464">Want you to sing on ma body</a><span> soulmates, mystic [дождливая ранняя весна]
<br>Lu Han | Kim Minseok </span>
<a href="https://barcross.rusff.me/viewtopic.php?id=2588">За двумя блохэй погонишься - застрянешь на всю ночь</a><span>  Икеа, канун рождества и лютейший снегопад [modern!au]
<br>Xie Lian | Hua Cheng </span>
<a href="https://barcross.ru/viewtopic.php?id=3099#p210654">Say you'll stay</a><span> Хэ Сюаню слишком плохо и тошно, Цинсюань пытается понять [мокрая осень, modrn!au]
<br>Shi Qingxuan | He Xuan</span>
<a href="https://barcross.ru/viewtopic.php?id=183#p2818">Kids in the dark</a><span>Глейд, чуть погодя после провалившейся попытки Ньюта "сбежать" из клятого лабиринта
<br>Minho | Newt </span>
<a href="https://barcross.ru/viewtopic.php?id=3241#p218675">Испытание карантином</a><span> все плюсы и минусы самоизоляции и попытки не сойти с ума [разгар пандемии, modern!au]
<br>Xiao | Aether </span>
<a href="https://barcross.ru/viewtopic.php?id=2648#p185110">Roses are red, violets are blue</a><span> Такуя хочет, чтобы от него отстали, главарь банды Аратаки хочет обратного [чуть погодя после принятия синего они в банду]
<br>Takuya | Itto </span>
<a href="https://barcross.rusff.me/viewtopic.php?id=1631#p108443">Curtain call</a><span> о разрушенных храмах и мести [modern!au]
<br>Shi Wudu | Shi Qingxuan </span>
<a href="https://barcross.rusff.me/viewtopic.php?id=1630#p108369">Согрей, согрей, согрей</a><span> о хорноте и кинках [modern!au]
<br>Shi Qingxuan | He Xuan </span>
<a href="https://barcross.ru/viewtopic.php?id=2658#p185699">Под ветвью омелы</a><span> в воздухе запах имбирного печенья, мандаринок и первой любви [канун Рождества, modern!au]
<br>Xiao | Aether </span>
<a href="https://barcross.ru/viewtopic.php?id=3782">Watching for comets</a><span>никто никогда не переписывал их судьбы, меняя звезды местами, и все идет так, как и было им предначертано
<br>Shi Qingxuan | He Xuan </span>

<br><font size="4" color="8b2720">
Crossfandom</font>

<a href="linky link">название</a><span>описание</span>

</div>

<div class="mbt">
<font size="4" color="8b2720">Babai Poetry Nights</font>

<a href="https://barcross.rusff.me/viewtopic.php?id=293&p=31#p108548">Бабаинские вечера поэзии - 1</a><span>Хван Чжин И, "Гора всегда одна и та же.." (Корея)</span>

<a href="https://barcross.ru/viewtopic.php?id=293&p=65#p218784">Бабаинские вечера поэзии - 2</a><span>Фудзивара-но Садаиэ,"Благоуханьем сливовых цветов..." (Япония)</span>

<a href="linky link">название</a><span>описание</span>
</div>
</div>

<div class="imgb2">
<img src="https://i.imgur.com/GjX0e1t.png">
</div>
  </div>
</div>
<style>
#good {
  height: 500px;
  width: 500px;
  position: relative;
  margin: auto;
  text-align: left
}

#good .bsq {
  height: 485px;
  width: 485px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  border: 1px solid #000;
  background: #8b2720;
  opacity: .7;
}

#good .mait {
  height: 485px;
  width: 485px;
  position: absolute;
  right: 0;
  box-sizing: border-box;
  top: 0;
  background: #fff;
  border: 1px solid #000;
}

#good .imgb {
  height: 350px;
  width: 350px;
  position: absolute;
  top: 70px;
  right: 70px;
  background: grey;
}

#good .imgb img {
  height: 100%;
  width: 100%;
  position: absolute;
  object-fit: cover
}

#good .imgb scr {
  height: 100%;
  width: 120px;
  position: absolute;
  right: 0;
  background: #000;
  mix-blend-mode: color
}

#good .cbg {
  height: 100%;
  width: 190px;
  background: #969696;
  position: absolute;
  mix-blend-mode: multiply;
  right: 0
}

#good .nam {
  height: 50px;
  width: 330px;
  right: 70px;
  bottom: 20px;
  background: none;
  position: absolute;
  display: flex;
  justify-content: space-between
}

.nam .fna {
  width: 60%;
  background: none;
  height: 140%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.nam .lna {
  width: 50%;
  background: none;
  height: 130%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 30px;
  justify-content: flex-end
}

.nam .fna,
.nam .lna {
  font-size: 22px;
  font-family:Spectral Light Italic ;
  text-transform: none;
  font-weight: 900;
  font-style: italic;
  color: #4d4d4d
}

#good .ifo {
  height: 300px;
  position: absolute;
  width: 50px;
  background: none;
  top: 70px;
  left: 20px;
  display: flex;
  align-items: center;
  font-family: roboto mono;
  writing-mode: vertical-rl;
  font-size: 13px;
  letter-spacing: 1px;
  color: #611f1a;
}

#good .lyrr {
  width: calc(100% - 190px - 80px);
  left: 20px;
  background: none;
  height: 100px;
  position: absolute;
  top: 40px;
  color: #791f19;
  font-family: Spectral Light Italic;
  font-size: 18px;
  font-weight: 900;
  text-transform: none;
  font-style: italic;
  line-height: 1.2
}

#good .cont {
  height: 280px;
  width: calc(100% - 190px - 80px);
  bottom: 40px;
  left: 20px;
  overflow: hidden;
  position: absolute;
}

#good .cont .mbt {
  position: absolute;
  overflow: auto;
  box-sizing: border-box;
  font-family: Spectral;
  font-size: 14px;
  line-height: 1.6;
  text-align: justify;
  padding-right: 10px;
  opacity: 0;
  height: 100%;
  width: 100%;
  top: 0;
  color: #000;
  transition: .4s ease;
}

#good .cont .mbt:nth-of-type(3) {
  display: flex;
  flex-direction: column;
  line-height: 1.3
}

#good .cont .mbt:nth-of-type(3) a {
  font-size: 14px;
  text-decoration: none;
  text-transform: none;
  font-weight: 900;
  font-style:Spectral ;
  color: #6d6d6d;
}

#good .cont .mbt:nth-of-type(3) span {
  margin-bottom: 15px;
}

#good .cont .mbt:nth-of-type(4) {
  display: flex;
  flex-direction: column;
  line-height: 1.3
}

#good .cont .mbt:nth-of-type(4) a {
  font-size: 14px;
  text-decoration: none;
  text-transform: none;
  font-weight: 900;
  font-style:Spectral ;
  color: #6d6d6d;
}

#good .cont .mbt:nth-of-type(4) span {
  margin-bottom: 15px;
}
#good .cont .mbt:nth-of-type(3) span:nth-child(1) {
  margin-bottom: 0
}

#good .cont .mbt:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  line-height: 1.3
}

#good .cont .mbt:nth-of-type(2) a {
  font-size: 14px;
  text-decoration: Spectral;
  text-transform: none;
  font-weight: 900;
  font-style:normal ;
  color: #6d6d6d;
}

#good .cont .mbt:nth-of-type(2) span {
  margin-bottom: 15px;
}


#good .mbt h1 {
  font-family: Spectral Light;
  font-weight: 900;
  color: #8b2720;
  margin: 10px 0;
  text-transform: none;
  font-style: normal;
  font-size: 20px
}

#good .mbt h1:nth-child(1) {
  margin-top: 0
}

#good .imgb2 {
  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(120%);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 190px;
  height: 330px;
}

#good .imgb2 img {
  height: 100%;
  width: 100%;
  object-fit: cover
}


#good input {
  display: none
}

#good input+label {
  font-family: Spectral Light Italic;
  height: 25px;
  width: 130px;
  color: #732621;
  text-transform: lowercase;
  position: relative;
  top: 35px;
  left: 345px;
  background: none;
  display: block;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  transition: .5s ease;
}

#good input:checked+label {
  color: #2b2929;
  transition-delay: 0s !important;
}

#good #gtab1:checked+label~.cont .mbt:nth-of-type(1) {
  opacity: 1;
  z-index: 5
}

#good #gtab2:checked+label~.cont .mbt:nth-of-type(2) {
  opacity: 1;
  z-index: 5
}

#good #gtab3:checked+label~.cont .mbt:nth-of-type(3) {
  opacity: 1;
  z-index: 5
}
#good #gtab4:checked+label~.cont .mbt:nth-of-type(4) {
  opacity: 1;
  z-index: 5
}

#good ::-webkit-scrollbar {
  width: 7px
}

#good ::-webkit-scrollbar-track {
  background: none !important;
  border: 1px solid #000;
}

#good ::-webkit-scrollbar-thumb {
  background: #616161;
  border: 1px solid #000;
}



/*transitions*/

#good .imgb {
  transition: .5s ease .6s
}

#good .ifo {
  transition: .5s ease .6s
}

#good .nam {
  transition: .5s ease .6s
}

#good:hover .imgb {
  opacity: 0;
  transition-delay: 0s
}

#good:hover .ifo {
  left: 30px;
  opacity: 0;
  transition-delay: 0s
}

#good:hover .nam {
  bottom: 30px;
  opacity: 0;
  transition-delay: 0s
}

#good input+label {
  opacity: 0
}

#good .cont {
  opacity: 0;
  transition: .5s ease
}

#good .lyrr {
  opacity: 0;
  transition: .5s ease
}

#good .imgb2 {
  opacity: 0;
  transition: .8s ease
}

#good:hover .lyrr {
  transition-delay: .6s;
  left: 40px;
  opacity: 1
}

#good:hover .cont {
  transition-delay: .6s;
  left: 40px;
  opacity: 1
}

#good:hover input+label {
  left: 325px;
  opacity: 1;
}

#good:hover .imgb2 {
  opacity: 1;
  transition: 1s ease;
}</style>