обучение

Страница: 1

Сообщений 1 страница 6 из 6

Поделиться12024-02-23 18:24:19

Автор: gayladriel
Администратор
фейт хэнсон, 45
is it too late to come on home? Сервис "РыбаТекст.рф" генерирует заданное количество абзацев более-менее осмысленного текста на русском языке. В англоязычном варианте классическим примером такого рыба-текста является Lorem Ipsum.
Последний визит:
2024-11-18 20:49:30
Сообщений: 327
Уважение: +1
доллары: 100000 $

структура

Код:

/*************************************************************
CODE STRUCTURE BY BLANCHE FOR GAYLADRIEL
**************************************************************

FONTS / ROOT / LINKS
-------------------------------------------------------------*/
@import url(style_cs.css);
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0');

@font-face {
  font-family: Arial Black;
  font-weight: normal;
  src: local('arial_black'), url(https://forumstatic.ru/files/001c/03/d1/88675.woff) format('woff');
}



/***************************************/

:root {
  --bg: url() repeat fixed;
  --foot: url();
  --bg-color: #1e1e1d;
  --pun: #cbcbcb;
  --notify: var(--col1);
  --link: var(--col1);

  --col1: #9d8b68;

  --font: helv;

  --title-h: 352px;
  --prof-w: 220px;
  --profnav-w: 110px;
  --main-w: 1100px;
  --main-p: 50px;
  --usav: 25px;
  --foot-h: 100px;
  --icon-w: 10px;

  --mat: 'Material Symbols Outlined';
  --mat1: 'Material Symbols Rounded';
}

/***************************************/

a {
  text-decoration: none;
  transition: all 0.5s;
  color: var(--link);
}

#pun-admain a,
#MyBookmarks span.scrl {
  color: var(--link) !important;
}

a:hover,
a:focus,
a:active {
  color: var(--bg-color);
}

:focus {
  outline: none !important;
}

.adlabel,
.adlabel a {
  color: var(--pun) !important;
}

/* ETO BAZA: BODYb, PUNb, TITLEb
--------------------------------------------------------------------------------------------------------------------------*/
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background:    var(--bg) var(--bg-color);
}

body.redirect-page {
  background: var(--bg-color) !important;
}

/***************************************/

#pun {
  position: relative;
  width: var(--main-w);
  background: var(--pun);
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  color: #151515;
  margin: 0 auto;
}

.punbb {
  padding: var(--main-p);
  box-sizing: border-box;
}

/***************************************/

#pun-title,
#pun-announcement {
}

#pun-title {
}

#pun-announcement {
}



/* NAVLINKS / ULINKS
--------------------------------------------------------------------------------------------------------------------------*/
#pun-navlinks .container,
#pun-ulinks .container {
}

#pun-ulinks a,
#pun-navlinks a {
}

#pun-navlinks .container {
}

/* ulinks */

#pun-ulinks .container {
}

#pun-ulinks a,
#pun-navlinks a {
  color: var(--bg-color);
}

#pun-navlinks a:hover,
#pun-ulinks a:hover {
  color: var(--col1);
}

#navadmin a:before {
  content: 'амс';
}

/* STATUS
--------------------------------------------------------------------------------------------------------------------------*/
#pun-status .container {
}

#pun-status {
  color: var(--bg-color);
}
#pun-status a,
#pun-status strong {
  color: var(--col1);
}

#pun-status .status-right {
  float: none !important;
}

/* CATEGORY
--------------------------------------------------------------------------------------------------------------------------*/
.category h2 span,
#pun-stats h2 {
  font-size: 0;
}

#pun-index .category .container,
.statscon {
  position: relative;
}

.category h2,
#pun-stats h2 {
}

/***************************************/

.category h2 span,
#pun-stats h2 span {
}

/* HASICON / STRUCTURE EVERYWHERE
--------------------------------------------------------------------------------------------------------------------------*/
table {
  width: 100%;
}

.hasicon,
.usertable tbody,
#messages tbody,
#pun-respect .container tbody,
#pun-positive .container tbody,
#pun-online .container tbody {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--font);
  margin: 20px 0;
  width: calc(var(--main-w) - var(--main-p) * 2);
}

.hasicon tr,
thead tr,
.usertable tr,
#messages tr,
#pun-searchtopics tr,
#pun-respect tr,
#pun-positive tr,
#pun-online tr, .profile-awards-container tr {
    display: grid;
    gap: 10px;
    grid-template-columns: 50% 8% 8% 30%;
    justify-content: space-between;
    text-transform: lowercase;
    font-family: var(--font);
    color: var(--bg-color);
    margin: 0 60px 0 0;
    position: relative;
}

thead tr, #pun-respect tr, #pun-positive tr, .usertable tr, #pun-searchtopics tr, #pun-mod .hasicon tr  {
  margin-left: 60px;
}

#pun-viewforum thead tr {margin-left: 0px;}
#pun-viewforum thead tr .tcl {padding-left: 25px;}


/***************************************/

#pun-searchtopics tr {
  grid-template-columns: 40% 20% 6% 26%;
}

.usertable tr {
  grid-template-columns: 20% 32% 6% 6% 10% 10%;
}

#pun-messages .hasicon tr,
#messages thead tr {
  grid-template-columns: 1fr 18% 10% 3%;
  align-items: center;
}

#pun-respect tr,
#pun-positive tr {
  grid-template-columns: 12% 2% 15% 30% 30%;
}

#pun-online tr {
  grid-template-columns: 40% 40% 20%;
}

#pun-mod .container tr, .profile-awards-container tr {
    grid-template-columns: 20% 10% 40% 30%;
}

.profile-awards-container tr .tcl {
    width: inherit !important;
}

#pun-messages td,
#pun-messages th,
#pun-online td {
  width: auto !important;
}

#pun-viewforum .tcr,
#pun-searchtopics .tcr,
.tc2,
.usertable .last_visit,
#pun-respect .tcr,
#pun-positive .tcr {
  text-align: right;
}

#pun-viewforum td.tcr,
#pun-searchtopics td.tcr {
  grid-template-areas: 'time user ava';
  display: grid;
  align-items: center;
  justify-items: end;
  justify-content: end;
  grid-template-columns: auto auto var(--usav);
    gap: 7px;
    grid-template-columns: 45% 38% 13%;
}

#pun-viewforum td.tcr a,
#pun-searchtopics td.tcr a {
  grid-area: 'time';
}

th {
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 10px;
  text-align: left;
}

/* fieldset */
fieldset {
  margin: 10px 0 !important;
  padding: 0;
  border: none !important;
}

/* fs-box */
.fs-box.inline {
  display: flex;
  gap: 10px;
  border: 1px solid;
  padding: 10px;
  align-items: center;
}

#pun-userlist .fs-box.inline {
  margin-top: -11px;
  position: relative;
}

#pun-login .fs-box.inline {
  margin-top: 10px;
  position: relative;
}

.inline .infofield {
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-align: justify;
  color: var(--col1);
}

/* PUN-INDEX / PODFORUMS
--------------------------------------------------------------------------------------------------------------------------*/
#pun-index .hasicon {
  gap: 30px;
}

#pun-index .hasicon tr {
  position: relative;
  box-sizing: border-box;
  grid-template-columns: 440px 1fr;
  gap: 30px;
  color: #524943;
}

/* subforums */
#pun-index .hasicon .isub .tcl {
  padding-left: 0px !important;
}

.subforums {
  font-size: 0;
}

#pun-index .subforums a:first-of-type {
    margin-left: -10px;
}

#pun-viewforum .isub .tcl h3 {
  margin: 0 0;
}

.category,
.forum,
.usertable, #pun-stats, .section.online-list, #pun-positive #pun-main .container, #pun-respect #pun-main .container, .post-author ul, .quote-box,
.code-box,
textarea,
.inner,
.modal-inner,
.editBookmark,
#MyBookmarks,
.hvStickerPackModal, #viewprofile tr, #List-UserNames, .punbb #pun-navlinks #form-login  {
  border: var(--bord) !important;
  background: var(--col3) !important;
}

.category,
.forum,
.usertable, #pun-stats, .section.online-list, #pun-positive #pun-main .container, #pun-respect #pun-main .container {  margin: 40px 0;}

.section.online-list {padding: 20px 60px; margin: 0;}
#pun-positive #pun-main .container, #pun-respect #pun-main .container {margin: 0; padding: 20px 0;}
#pun-stats {margin-bottom: 10px;}

.category:first-of-type {
  margin-top: 10px;
}

/* left part */

#pun-index .tcl h3 {
  font-weight: 500;
  text-transform: lowercase;
  margin: 0 0 10px 0;
  font-size: 30px;
  transition: all 0.5s;
  text-align: left;
  font-family: var(--font-fav);
  line-height: 25px;
}

#pun-index .tcl h3 a {
  color: #988459;
}

#pun-index .tcl h3 a:hover {color: var(--bg-color)}

#pun-index .tclcon {
  font-size: 10px;
  text-align: justify;
  letter-spacing: 0.6px;
  line-height: 17px;
  text-transform: lowercase;
  font-weight: normal;
}

#pun-index .tclcon span,
#pun-index .subforums, .f_links {
  position: relative;
  display: flex;
  gap: 0 6px;
  flex-wrap: wrap;
  margin: 0;
}

#pun-index .tclcon span a,
#pun-index .subforums a, .f_links a {
  color: var(--bg-color);
  font-family: var(--font);
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0 6px;
}

#pun-index .tclcon span a:hover,
#pun-index .subforums a:hover, .f_links a:hover {color: var(--col1)}

#pun-index .tclcon span a:after,
#pun-index .subforums a:after, .f_links a:after {
  background: var(--col2);
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

#pun-index .tclcon span a:last-child:after,
#pun-index .subforums a:last-child:after, .f_links a:last-child:after {
  display: none;
}

/* right part */
#pun-index .tcr {
  display: grid;
  grid-template-columns: auto var(--usav);
  grid-template-rows: auto auto;
  gap: 3px 30px;
  grid-template-areas:
    'lastpost1 ava'
    'lastpost2 ava';
  justify-content: end;
  align-items: center;
  justify-items: end;    align-content: center;
}

.lastpost-link {
  font-weight: 700;
  grid-area: lastpost1;
  color: var(--col1);
  text-align: right;
  display: flex;
  height: 100%;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  font-size: 12px;
  align-items: flex-end;
  line-height: 15px;
}

.lastpost {
  grid-area: lastpost2;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
}

/* user-avatar */
.user-avatar,
.avatar-image {
  border-radius: 0 !important;
}
.user-avatar {
  margin: 3px 0 0 0 !important;
  background: #262626;
  width: var(--usav) !important;
  height: var(--usav) !important;
  grid-area: ava;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--col1);
}

.avatar-image {
  opacity: 1 !important;
  filter: grayscale(1);
  mix-blend-mode: screen;
  width: var(--usav) !important;
  height: var(--usav) !important;
}

.isonline {
  background: var(--col1) !important;
  top: 9px !important;
  right: 9px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 0 !important;
}

/* ICONb
--------------------------------------------------------------------------------------------------------------------------*/
.intd {
  display: grid;
  grid-template-columns: var(--icon-w) 1fr;
  align-items: center;
  gap: 20px;
  margin-left: -6px;
}

#pun-index .intd {
  align-items: start;
gap: 60px;}

.intd .icon {
  width: var(--icon-w);
  height: var(--icon-w);
  transition: all 0.2s;
  border-radius: 50%;
  background: var(--bg-color);
  position: relative;
}

.intd:hover .icon {
    transform: scale(1.3);
}

#pun-index .intd .icon {
  background: transparent;    margin-top: 10px;
}

.intd .icon.inew,
.intd .icon-new {
  background: var(--col1) !important;
}

.isticky .intd .icon {
  background: var(--col2);
}

.iclosed .icon {
  opacity: 0.5;
}
.intd:before {
  content: '';
  width: var(--icon-w);
  height: var(--icon-w);
  border-radius: 50%;
  position: absolute;
  background: var(--col3);
}
#pun-index .intd:before {
  display: none;
}

/* CRUMBS
--------------------------------------------------------------------------------------------------------------------------*/
.crumbs {
  margin: 20px 0;
  font-family: var(--font);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  text-transform: lowercase;
  align-items: center;
}

.crumbs a {
  color: var(--bg-color);
  display: inline-flex;
  align-items: center;
}

.crumbs,
.crumbs a:hover {
  color: var(--col1);
}

.crumbs a:after,
#pun-searchposts h3 span a:after {
    content: '';
    background: var(--bg-color);
    margin: 4px 0 0 10px;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    opacity: .3;
}


/* STATSCON
--------------------------------------------------------------------------------------------------------------------------*/
#pun-stats .container {
  display: grid;
  grid-template-columns: auto auto;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  font-size: 10px;
    margin: 20px 60px;
  font-family: var(--font);
  gap: 5px;
  grid-template-areas:
    'tem reg'
    'soo last'
    'active active'
    'day day';
}

.statscon .item1 {
  grid-area: tem;
}
.statscon .item2 {
  grid-area: soo;
}
.statscon .item3 {
  grid-area: reg;
  text-align: right;
}
.statscon .item4 {
  grid-area: last;
  text-align: right;
}

.statscon .item5 {
  text-align: justify;
  line-height: 15px;
  margin-top: 10px;
}
.statscon .item5.onlinelist {
  grid-area: active;
}
.statscon .item5.users_24h {
  grid-area: day;
}

.statscon strong,
.statscon a {
  color: var(--col1);
  font-weight: 600;
}

/* FOOTER
--------------------------------------------------------------------------------------------------------------------------*/
#pun-about {
    width: 1000px;
    height: var(--foot-h);
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    background: var(--foot);
    border: var(--bord);    position: relative;
}

#pun-about:before {
    content: 'friends';
    font-family: var(--font-fav1);
    color: var(--col1);
    font-size: 130px;
    position: absolute;
    top: -31px;
    right: 30px;
}

#pun-about .container {
  font-family: var(--font);
  font-size: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: absolute;
  margin-top: 125px;
}

#pun-about,
#pun-about a {
  color: var(--bg-color);
}

/* PROFILEb
--------------------------------------------------------------------------------------------------------------------------*/
/* structure */
.post-author {
  width: var(--prof-w);
  min-height: 85px;
  position: relative;
}

.post-author ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    width: var(--prof-w);
    gap: 10px 5px;
    font-family: var(--font);
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    margin: 0px 0 30px 0px;
    color: #282f38;
}

.post-author li {
  width: inherit;
}

/* pa */
.pa-author {
    font-size: 18px;
    text-transform: lowercase;
    transition: all 0.5s;
    font-family: var(--font-fav);
    letter-spacing: 1px;
}

.pa-author,
.pa-author a {
  color: #404040;
}

.pa-author a:hover {
  color: var(--col1);
}

.pa-title {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: lowercase;
  font-family: var(--font);
  font-weight: 500;
  margin: 0;
  line-height: 10px;
}

.pa-avatar {
    position: relative;
    width: var(--prof-w) !important;
    margin: 0 -10px;
    z-index: 1;
    padding: 30px 0;
    background: url(https://forumstatic.ru/files/001b/8a/62/78745.jpg) bottom;
    border-top: var(--bord);
    border-bottom: var(--bord);
    box-sizing: border-box;
}

.pa-avatar img,
#pa-avatar img {
max-width: 180px; max-height: 180px;
  position: relative;
  z-index: 2;
    box-shadow: 0 0 0 5px var(--pun), 0 0 0 6px var(--col1);
}

/* posts/respect */
.pa-respect,
.pa-posts, .pa-fld4 {
    width: calc(calc(var(--prof-w) - 30px) / 3.1) !important;
    text-transform: lowercase;
    font-weight: 500;
    font-size: 13px;
    position: relative;
    z-index: 1;margin-bottom: 10px;
}

.pa-respect,
.pa-respect a,
.pa-posts, .pa-fld4 {
  color: #626262;
}

.pa-respect .fld-name,
.pa-respect .fld-name a,
.pa-posts .fld-name, .pa-fld4 .fld-name {
  color: var(--col1);
}

.pa-respect .fld-name,
.pa-posts .fld-name, .pa-fld4 .fld-name {
    font-size: 9px;
    margin-bottom: 6px;
    text-transform: lowercase;
    display: block;
    font-weight: 600;
}

.pa-respect img {
  filter: grayscale(1);
  vertical-align: middle;
  margin-top: -4px;
}

/* FLDb */
.pa-fld1 a {
    font-size: 12px;
    text-transform: lowercase;
    font-weight: 600;
}

.pa-fld2 {
    line-height: 15px;
    font-size: 9px;
    letter-spacing: .8px;text-transform: lowercase;
}

.pa-fld5 a, .pa-fld3 f {
    background: var(--col1);
    color: var(--col3);
    font-size: 8px;
    text-transform: uppercase;
    padding: 3px 10px;
    width: 100%;
    display: block;
    letter-spacing: 1px;transition: all .5s; cursor: pointer;
  margin: -10px 0 0 -10px;}


.pa-fld5 a:hover, .pa-fld3 f:hover {
    background: var(--col2);
}

plash {
    width: 180px;
    height: 22px;
    display: flex;
    background: url(https://forumstatic.ru/files/001b/8a/62/99281.jpg);
    border: var(--bord);
    border-radius: 6px;
    flex-direction: column;
    letter-spacing: 1px;
    color: var(--pun);
    padding: 0px 7px;
    box-sizing: border-box;
    justify-items: center;
    font-weight: 600;
    margin: 10px;
    align-items: center;
    justify-content: center;
}

plash b {
    font-size: 10px;
    line-height: 1;
}

plash i {
    font-size: 7px;
    font-style: normal;
    line-height: 1;
}

/* online */
.indOnline,
.indOffline {
    cursor: pointer;
    position: absolute;
    top: 26px;
    left: -10px;
    height: 20px;
    width: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indOnline:before,
.indOffline:before {
content: ''
}

.indOnline:before {
    background: var(--bg-color);
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
}


/* QUOTES / SPOILER / TEXTAREA
--------------------------------------------------------------------------------------------------------------------------*/
.quote-box,
.code-box,
textarea,
.inner,
.modal-inner,
.editBookmark,
#MyBookmarks,
.hvStickerPackModal {
  box-shadow: none !important;
}

.quote-box {
  margin: 15px;
  position: relative;
}

.code-box {
  margin: 15px;
  position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.spoiler-box {
  margin: 20px 0;
}

td .spoiler-box {
  margin: 20px 10px;
}

cite,
.code-box .legend,
.spoiler-box > div {
    font-style: normal;
    display: block;
    font-size: 15px;
    letter-spacing: 0.2px;
    position: relative;
    text-align: left;
    padding: 0px 80px 5px 0px;
    font-family: var(--font-fav);
    width: fit-content;
    border-bottom: 1px solid var(--col1);
    margin: 0 20px;background: transparent !important;text-transform: lowercase;
}

.quote-box:before, .code-box:before {
    content: '';
    width: 100%;
    height: 20px;
    background: var(--foot);
    border-bottom: var(--bord);
    display: block;
    margin: 0px 0 5px 0px;
}

.quote-box .quote-box:before, .quote-box .code-box:before {display: none;}
.quote-box  .spoiler-box > div, .quote-box .code-box .legend {
    padding-top: 3px;
}

.code-box .legend {
    padding: 0 0 5px 80px;
    font-weight: normal;
}

.spoiler-box > div {
  margin-top: 0;
  padding-left: 30px !important;
    border: none;
width: auto;
}

cite,
cite a,
cite a:hover,
.code-box .legend,
.code-box .legend a,
.spoiler-box > div {
  color: var(--col1);
}

a.qc-post-link:before {
  font-family: var(--mat);
  margin-left: 5px;
  font-weight: 100;
  content: '\e0e6';
  vertical-align: middle;
}

a.qc-post-link img {
  display: none;
}

blockquote,
.blockcode {
  padding: 10px 20px;
  position: relative;
  z-index: 3;
  margin: 0;
    width: 100%;
    box-sizing: border-box;
}

blockquote p:last-child {
  padding: 0;
}

.scrollbox {
  overflow: auto;
  font-size: initial;
  max-height: 60px;
}

/* SPOILER ANIMATION © BLANCHE. free for use only with copy */

.spoiler-box > div:before {
    content: '';
    font-family: var(--mat);
    transition: all 0.5s;
    transform: rotate(0deg);
    position: absolute;
    left: 10px;
    font-style: normal;
    top: 33%;
    width: 6px;
    height: 6px;
    background: var(--bg-color);
    border-radius: 50%;
    opacity: .2;
}

.spoiler-box > div.visible:before {
opacity: 1; background: var(--col1);
}

/* textarea */
textarea {
  overflow: auto;
  font-size: 10.5px !important;
  line-height: 15px !important;
  padding: 10px;
  font-family: Verdana;
  box-sizing: border-box;
}

/* FORMA OTVETA
--------------------------------------------------------------------------------------------------------------------------*/
#pun-viewtopic #post {
  margin-top: 20px;
}

#pun-viewtopic .post-box #post,
#pun-viewtopic .post-box fieldset {
  margin: 0 !important;
  padding: 0;
}

.post-box {
  padding-bottom: 20px;
}

#post .areafield {
  margin: 0;
}

#pun-edit #post .areafield span.input a {
  margin: 10px 0;
  display: block;
  text-transform: lowercase;
  font-family: var(--font);
  letter-spacing: 0.5px;
}

.hashelp {
  position: relative;
}

#main-reply {
  height: 213px;
}

.grippie {
  margin-top: 5px;
}

#keyboard-span input {
    line-height: 10px;
}

/* CUSTOM FORM-BUTTONS WITH WRITTEN SYMBOLS © BLANCHE. free for use only with copy */
#form-buttons {
  display: grid;
  grid-template-columns: 145px 1fr;
  margin-bottom: -1px;
    background: var(--pun) !important;
    border: var(--bord);
}

#form-buttons table {
  width: 100% !important;
}

#form-buttons tr {
  width: 100%;
  display: flex;
  height: 26px;
  justify-content: space-between;
}

#plng,
#form-buttons td {
  display: flex;
  justify-content: center;
  gap: 3px;
  align-items: center;
  height: 26px;
  box-sizing: border-box;
  color: var(--bg-color);
}

#form-buttons td {
  background-image: none !important;
  font-family: var(--mat);
  font-size: 15px;
  width: inherit !important;
  cursor: pointer;
  transition: all 0.5s;
}

#plng {
    background: var(--bg-color) !important;
    font-size: 9px;
    font-family: var(
  --font);
    color: var(
  --col1);
    font-weight: 600;
}

#form-buttons td img {
  z-index: 9;
}

#form-buttons td:before {
  position: absolute;
}

#button-font:before {
  content: '\e264';
}

#button-size:before {
  content: '\eae2';
}

#button-bold:before {
  content: '\e238';
}

#button-italic:before {
  content: '\e23f';
}

#button-underline:before {
  content: '\e249';
}

#button-strike:before {
  content: '\e257';
}

#button-transL:before {
  content: '\e8e2';
}

#button-indent:before {
  content: '\e23e';
}

#button-left:before {
  content: '\e236';
}

#button-center:before {
  content: '\e234';
}

#button-right:before {
  content: '\e237';
}

#button-justify:before {
  content: '\e235';
}

#button-link:before {
  content: '\e157';
}

#button-spoiler:before {
  content: '\e875';
}

#button-image:before {
  content: '\e412';
}

#button-image2:before {
  content: '\e3f4';
}

#button-video:before {
  content: '\e1c4';
}

#button-hide:before {
  content: '\e898';
}

#button-quote:before {
  content: '\e625';
}

#button-code:before {
  content: '\ead1';
}

#button-html:before {
  content: '\ef54';
}

#button-color:before {
  content: '\e40a';
}

#button-table:before {
  content: '\f088';
}

#button-smile:before {
  content: '\e813';
}

#button-sticker:before {
  content: '\e87d';
}

#button-keyboard:before {
  content: '\f028';
}

#button-addition:before {
  content: '\e145';
}

#button-mask:before {
  content: '\e853';
}

#floatbut:before {
  content: '\e3b5';
}

/* tags */
#tags .container,
#float {
  overflow-y: auto;
  padding: 10px !important;
  height: 192px;
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  z-index: 99999;
  font-size: 10px;
  background: var(--bg-color);
  top: 27px !important;
  margin: 1px -6px 0 0px;
  color: var(--col1);
}

#font-area div,
#size-area div,
#addition-area div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  transition: all 0.5s;
  margin: -10px;
  padding: 10px;
  position: relative;
}

/*#font-area:hover div,
#size-area:hover div,
#addition-area:hover div {
  color: var(--col2);
}*/

#font-area div:hover,
#size-area div:hover,
#addition-area div:hover {
  background: var(--col1);
  color: var(--bg-color);
}

#font-area div img,
#size-area div img {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}

#font-area span,
#size-area span,
#addition-area div {
  height: auto !important;
}

#uploaded-images img {
  object-fit: cover;
}

#image-area,
#color-area,
#video-area,
#spoiler-area {
  height: auto !important;
}

#spoiler-area a,
#image-area a {
  color: inherit;
}

#float {
  left: 43%;
  z-index: 2;
  height: auto;
  position: absolute;
  display: none;
}

/* INPUT / BUTTONS
--------------------------------------------------------------------------------------------------------------------------*/
input,
select,
option,
.hvStickerPackModalTab {
  background: var(--pun) !important;
  border: 1px solid var(--bg-color);
  font-family: var(--font) !important;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 5px 7px;
  color: var(--bg-color);
  box-sizing: border-box;
}

select,
option {
  /*  color: var(--col2);*/
  text-transform: lowercase;
}

#topic-modmenu {
  margin-top: 20px;
}

/* button */
.button,
.hvStickerPackModalTab {
  background: var(--col1) !important;
  border: none !important;
  padding: 6px 10px !important;
  text-transform: lowercase;
  font-size: 10px !important;
  color: var(--pun);
  font-weight: 600 !important;
  transition: all 0.5s;
  cursor: pointer;
  border-radius: 0 !important;
}

.button:hover,
.hvStickerPackModalTab:hover,
.hvStickerPackModalTab.active {
  /*  background: var(--col2) !important;*/
  opacity: 0.5;
}

/* POST-LINKS / LINKST / LINSKB
--------------------------------------------------------------------------------------------------------------------------*/
.post-links {
  width: 100%;
}

#pun-viewtopic .post-links,
#pun-searchposts .post-links {
  margin-bottom: -8px;
}

#pun-viewtopic .endpost .post-links {margin-bottom: -10px; padding-left: var(--main-p)}

.post-links ul {
  text-align: right;
  margin: 0;
}

#pun-searchposts .post-links ul {
  text-align: left;
}

#pun-searchposts .post:last-child .post-links {
  margin-bottom: 10px;
}

.post-links ul,
#pun-viewtopic .linkst {
  padding-right: 35px;
}

.endpost .post-links ul,
#pun-messages .post-links ul {
  padding-right: 0;
}

.post-links li {
  display: inline-block;
}

.pl-email {
  float: left;
}

.pl-email.pm,
.pl-email.email {
  margin-left: 10px;
}

#pun-viewtopic .pl-delete,
.pl-edit,
#pun-messages .pl-quote {
  margin-right: 8px;
}

#pun-viewtopic h3,
#pun-searchposts h3,
#pun-multimove h3 {
  margin: 3px 0 10px 0;
}

.post h3 span,
.linkst,
.linksb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post h3 span {
  flex-direction: row-reverse;
  margin-top: -11px;
  padding-left: calc(var(--prof-w) + var(--main-p) + 20px) !important;
  box-sizing: border-box;position: relative;
}

.pagelink {
  order: 1;
}
.pagelink strong {
    display: inline-block;
    background: #9b9b9b;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--col3);
}

.pagelink a:hover {
    color: var(--col2);
}

.postlink {
  order: 3;
  width: auto !important;
  margin-right: var(--main-p);
}
.subscribelink{
  order: 2;
}

#pun-viewforum noindex {order: 3}

.post h3 span,
.post-links,
.pagelink,
.postlink,
.subscribelink,
#pun-viewforum .modmenu strong,
.postlink .button {
  font-family: var(--font);
  font-size: 9px !important;
  letter-spacing: 1px;
  font-weight: 600 !important;
  text-transform: uppercase;
}

.post h3 span a,
.post-links a,
.post h3 span,
.pagelink,
.pagelink a,
.postlink a,
.postlink .button, .subscribelink a {
  color: var(--bg-color);
}

.post-links a, .pagelink, .postlink {
    position: relative;
    z-index: 99;
}

.post h3 span,
.linkst,
.endpost .post-links,
#pun-messages .post-links,
#pun-viewforum .category {
  /*border-bottom: 1px solid;
  border-top: 1px solid;
    padding-bottom: 10px;*/
  padding: 5px 0;
}

.post h3 span,
.endpost .post-links,
.linksb,
#pun-viewforum .linkst {
    padding-right: var(--main-p);
    margin-left: calc(0px - var(--main-p));
    margin-right: calc(0px - var(--main-p));
    width: calc(100% + var(--main-p) * 2);
}

.linksb,
#pun-viewforum .linkst {
  /*  border-top: 1px solid;
  border-bottom: 1px solid;*/
  padding: 5px 0;
  box-sizing: border-box;
  padding-left: var(--main-p);
}

.gid3 .linksb {
  margin-top: 7px;
}

.post h3 span,
.linksb,
.linkst,
.endpost .post-links,
#pun-messages .post-links/*,
#pun-viewforum .category*/ {
    border-bottom: var(--bord);
}

#pun-viewtopic .linkst,
#pun-searchposts .linkst,
#pun-multimove .linkst {
  border: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -19px;
}

.linkst {
  margin-bottom: 10px;
    margin-left: calc(0px - var(--main-p));
    margin-right: calc(0px - var(--main-p));
    padding-right: var(--main-p);
    padding-left: var(--main-p);
}

/* PAGES: VIEWTOPIC / POST / PUN-POST
--------------------------------------------------------------------------------------------------------------------------*/
.post .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 15px;
}

.post-rating .container,
.post-vote .container {
  display: block;
  margin: 0 !important;
}

.post .post-rating a,
.post .post-vote a {
    font-family: var(--font);
    font-weight: 600;
    transition: all 0.2s;
    color: var(--bg-color);
    position: relative;
    z-index: 10;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    letter-spacing: -1px;
    cursor: pointer;font-size: 10px !important;
}

.post-rating a:hover:after,
.post-vote a:hover:after {
  color: var(--col1);
}

.post-rating a:after,
.post-vote a:after {
    font-family: var(--mat);
    color: var(--col1);
    transition: all 0.5s;
    font-size: 33px;
    font-weight: 100;
    position: absolute;
    z-index: -1;
    margin-top: 3px;
}
.post-rating a:after {
  content: '\e87d';
}
.post-vote a:after {
  content: '\e253';
}
.post-rating a:hover:after,
.post-vote a:hover:after {
    font-family: var(--mat1);}
.post-rating a:hover,
.post-vote a:hover { color: var(--pun)
}
div.post-vote {
  margin-bottom: 65px;
}

.post-body {
  display: block;
  width: calc(100% - var(--prof-w) - 20px);
  position: relative;
}

.reactions-root {
  padding: 0 5px;
  position: absolute;
  bottom: 0;
}

.post-content {
  width: 100%;
  text-align: justify;overflow: hidden;
}

.post-content img.postimg {
  vertical-align: middle;
}

.post-content table {
  table-layout: fixed;
}

.post-content table td {
  border: none !important;    vertical-align: top;
}

.post-content p {
  margin: 0;
  padding-bottom: 10px;
  line-height: 150%;
  text-align: justify;
}

#topic-users-in {
  text-transform: lowercase;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.5px;margin: 20px 0;
}

#topic-users-in span {
  font-weight: normal !important;
}

#topic-users-in a:after {
  content: ',';
  margin-right: 2px;
}

.formsubmit {
  display: flex;
  gap: 10px;
  align-items: center;
  text-transform: lowercase;
  font-family: var(--font);
  letter-spacing: 0.5px;
  color: var(--bg-color);
}

#pun-post .pa-author {
  margin: auto;
  text-align: center;
  position: relative;
  top: auto;
}

#pun-post #post-preview legend span,
#pun-userlist legend span,
#pun-search legend span,
.modal-inner legend span,
#pun-delete legend span {
  display: block !important;
  margin-bottom: 10px;
}

#pun-login label {
  white-space: nowrap;
}

/* fntslider */
.FNTslider {
    width: 160px;
    height: 8px;
    border: var(--bord);
    box-sizing: border-box;
}
.FNTslider .before {
    height: 6px;
    margin: 0px;
    background: var(--bg-color);
}
.FNTslider .thumb {
    width: 13px;
    height: 6px;
    position: relative;
    top: -6px;
    cursor: pointer;
    background: var(--col1);
}

/* new theme */
.required label,
.datafield .input,
.selectfield label,
.inputfield label,
.inputfield.required.longinput,
#pun-admain legend span,
#setmods dt {
  background-color: transparent !important;
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  font-size: 10px !important;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 7px;
}

.inputfield.required.longinput:last-child {
  display: flex;
  align-items: center;
}

/* checkboxes */
p[class='checkfield'] *,
div[class='checkfield'] *,
fieldset[class='radiofield'] * {
  vertical-align: middle;
  font-family: var(--font);
  font-weight: 300;
  font-size: 10px;
  padding: 2px 0;
  display: inline-block;
}

/* PAGES: VIEWFORUM, SEARCHPOSTS, ETC
--------------------------------------------------------------------------------------------------------------------------*/
.newtext {
  font-size: 10px;
}

.newtext a {
  color: var(--col1) !important;
}

.pagestext a {
  color: var(--col1) !important;
}

#pun-viewforum .category {
  margin-bottom: 10px;
}

#pun-searchposts h3 span {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  gap: 5px;
}

#pun-searchposts h3 strong {
  position: absolute;
  right: 30px;
}

#pun-searchposts .FNTslider {
  position: absolute;
  right: 50px;
}

#pun-searchposts h3 span a {
  display: inline-flex;
  align-items: center;
}

#pun-searchposts h3 span a:after {
  margin: 0px 0 2px 5px;
  display: inline-block;
  font-family: var(--font);
}

#pun-searchposts .pa-author strong {
    font-weight: 500;
    padding-bottom: 10px;
    display: block;
}

/* PAGES: VIEWPROFILEb
--------------------------------------------------------------------------------------------------------------------------*/
#viewprofile tr {
  display: grid;
  grid-template-columns: 260px 1fr;
  font-family: var(--font);
  gap: 20px;
  align-items: center;
  margin: 30px;
}

#profile-signature tr {
    display: block;
    margin: 0px 0 0 0;
    border: none !important;
    background: none !important;
}
#profile-signature {margin-top: -30px}

#profile-signature ul {
  border: none !important; padding: 0px !important;
}

/* left part */
#viewprofile #profile-left {
  width: inherit !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-transform: lowercase;
  letter-spacing: 1px;
  padding: 15px !important;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  /*  background: var(--col3);*/
  font-size: 9px;
  justify-content: center;
}

#profile-name {
  font-size: 15px;
}

#profile-left #profile-title strong,
#profile-left #pa-online strong {
  font-weight: 200 !important;
}

#profile-name strong,
#pa-edit a {
  color: var(--bg-color) !important;
}

#pa-avatar img {
  margin: 7px 0;
}

/* right part */
#profile-right {
  width: inherit !important;
  padding: 10px !important;
  display: flex;
  gap: 10px;
  flex-direction: column;
}

#profile-right a:hover {
    color: var(--col1);
}

#profile-right li {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  text-transform: lowercase;
  font-size: 10px;
  align-items: center;
}

#profile-right li span:first-child {
  text-transform: lowercase;
  font-weight: 600;
  padding: 2px 10px 4px 10px;
}

#profile-right li span:first-child,
#profile-right li span:first-child a {
  color: var(--bg-color);
}

#profile-right strong {
  font-weight: 500;
  padding: 0 !important;
  letter-spacing: 0.5px;
}

#profile-right strong,
#profile-right strong a {
  color: var(--bg-color);
}

/* inside */
#profilenav,
#pun-adnav {
  float: left;
  width: var(--profnav-w);
  font-family: var(--font);
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

#profilenav ul,
#pun-adnav ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#profile fieldset,
.adformal {
  padding: 20px;
}

#pun-profile fieldset,
#pun-profile .adfs-box {
  text-transform: lowercase;
  font-family: var(--font);
  color: var(--bg-color);
  letter-spacing: 0.5px;
  margin-left: var(--profnav-w) !important;
}

#profile fieldset fieldset {
  margin-left: 0px !important;
  padding: 0px;
}

#filetable thead tr {
  display: table-row;
}

#pun-profile #profile {
  min-height: 280px;
}

/* PAGES: USERLIST, RESPECT, ONLINE
--------------------------------------------------------------------------------------------------------------------------*/
.usertable .container {
  margin: 20px 0;
}

.usertable td,
.usertable th {
  text-align: center;
}

.usertable .tcl,
#pun-respect .tcl,
#pun-positive .tcl {
  text-align: left;
}

#pun-respect td,
#pun-respect th,
#pun-positive td,
#pun-positive th {
  width: auto !important;
  text-align: center;    overflow: hidden;
}

/* userlist */
.username,
td.pmtc22 {
  display: grid;
  grid-template-columns: 36px auto;
  grid-template-areas: 'ava user';
  gap: 10px;
  align-items: center;
}

#pun-online .username {
  display: block;
}

/*td.pmtc22 {
  justify-content: end;
}*/

.usersname,
td.pmtc22 a,
#pun-viewforum td.tcr .byuser,
#pun-searchtopics td.tcr .byuser {
  grid-area: user;
}

.usersname a {
  color: var(--col2);
}

/* PAGES: MESSAGES
--------------------------------------------------------------------------------------------------------------------------*/
#pun-messages .hasicon {
  width: auto;
}

#pun-messages h3 {
  margin-top: -21px;
  position: relative;
}

.postlink .button {
  background: transparent !important;
  padding: 0 !important;
}

#profile.formal.messages-container .container {
  min-height: 70px;
}

#notify-settings {
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  font-size: 9px;
  color: var(--bg-color);
  margin-left: calc(var(--profnav-w) + 15px);
}

input#OnOff_Notify {
  margin-top: -2px;
}

#volSlider.vol_slider {
  margin-top: 1px;
}

#pun-messages .post-links {
    margin-bottom: 20px;
    padding-right: var(--main-p);
    padding-left: 0px;
    width: calc(100% + 60px) !important;
    margin-right: -70px;
}

#pun-messages .post h3 span {
  padding-left: 540px !important;
  white-space: nowrap;
  margin-left: 0 !important;
  gap: 10px; width: calc(100% + 70px)
}

/* SCROLLBAR / SELECTION
--------------------------------------------------------------------------------------------------------------------------*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: var(--col1);
}

.scrollbox::-webkit-scrollbar-track {background: var(--pun);}

/* selection */
::selection {
  color: var(--col1);
  background: var(--bg-color);
}

/* HIDDEN ELEMENTS
--------------------------------------------------------------------------------------------------------------------------*/
.acchide,
h1,
#pun-navlinks h2,
#pun-status h2,
#pun-ulinks h2,
.multipage .topic h2,
form#post.container legend span,
.post-sig dt span,
.crumbs strong,
.divider hr,
#pun-userlist .main h2,
#pun .modlist,
.stickytext,
.closedatafield,
#pun-viewforum #pun-main h2,
#pun-announcement h2,
#pun-break4,
#pun-messages .post-sig,
.tipsy-arrow,
.clearer,
#pun-searchtopics #pun-main h2,
.num_msg:before,
/* проверить все ДО этого */
#topic-users-in a:last-child:after,
#topic-modmenu span,
#pun-viewforum .modmenu span,
#post-form h2,
#pun-index th,
#pun-index .tcr br,
#pun-index .tc2,
#pun-index .tc3,
.lastedit,
.pa-reg,
.pa-gifts,
.pa-replies,
.sharelink,
.postlink .closed,
.pl-share,
.pl-reports,
.pa-last-visit,
#viewprofile-next #profilenav,
#pa-invites,
#profile-gifts,
#navadmin span,
#pun-live-rusff,
.crumbs em,
#pun-searchposts em,
#pun-searchtopics .modmenu,
.bubble:after,
#pa-fld4,
#pun-post .topic h2,
.hide-box .qcn,
#topic-feed,
.modal-inner h2 span, 
.catleft, 
.catright, 
#button-smile,
#button-files_rusff, 
#button-graffiti_rusff,
#pun-index .subforums em,
.pa-online,
.reactions-root,
.qcn {
  display: none !important;
}

.pun-modal.unread-notifications .modal-inner h2 span, .pun-modal.rating_theme h2 span {display: inline-block !important;}

/* MOBILE / MOZILLA
--------------------------------------------------------------------------------------------------------------------------*/
@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
  }
  #form-buttons {
    margin-bottom: -2px;
  }
}

/*html{min-width: 1200px!important;}для мобил*/
@media screen and (max-device-width: 480px) {
  a,
  a:hover,
  a:focus,
  a:active,
  #pun-status,
  .crumbs,
  #pun-stats ul.container,
  .modmenu .container,
  #pun-index .tcr .lastpost, #pun-respect td, #pun-respect th, #pun-positive td, #pun-positive th, #pun-viewforum td, #pun-searchtopics td {
    -webkit-text-size-adjust: none;
  }
  .hashelp center div a button,
  .button,
/*  input,*/
  select {
    -webkit-appearance: none !important;
    border-radius: 0px !important;
  }
}

цвета

Код:

/* TABLA
--------------------------------------------------------------------------------------------------------------------------*/
.banners::-webkit-scrollbar,
.gost gost2 span::-webkit-scrollbar,
.gost gost3 span::-webkit-scrollbar,
.gost gost1::-webkit-scrollbar, .anketa anketa7::-webkit-scrollbar, .anketa anketa8::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

/* banners */
.banners {
}

.banners a {
}

.banners a:hover {
}

/* copy */
a.copy {
    width: 100%;
    font-family: var(--font);
    text-transform: uppercase;
    font-size: 7px;
    letter-spacing: 1px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    opacity: 0.85;
    height: 20px;
    margin: -130px 0 0 -50px;
    align-items: center;
    color: var(--col1) !important;
    opacity: 0.5;
    position: absolute;
}

a.copy:hover {
  opacity: 1;
}

a.copy span {
  position: absolute;
  background: var(--pun);
  transition: all 0.5s;
  opacity: 0;
  letter-spacing: 0.5px;
}

a.copy:hover span {
  opacity: 1;
  transform: scale(1.2) translateY(-1px);
}

/* FUNCTIONAL
--------------------------------------------------------------------------------------------------------------------------*/
ul,
dl,
li,
dd,
dt {
  padding: 0px;
  list-style: none;
}

.modal-inner {
  padding: 10px;
}

/* mask */
#mask_dialog .inner,
.editBookmark,
#MyBookmarks,
.hvStickerPackModal {
  font-family: var(--font);
  text-transform: lowercase;
  letter-spacing: 0.5px;
  border-radius: 0 !important;
}

#mask_dialog .hv-mask-dialog-title,
.editBookmark h1,
#MyBookmarks h2,
#MyBookmarks h1 {
  color: var(--notify);
}

#mask_dialog form#mask_form {
  max-width: 480px;
}

/* bookmark */
.post .bookmark,
#BookmCntToggle.default-style {
  color: var(--notify) !important;
}

.editBookmark h1,
#MyBookmarks h2,
#MyBookmarks h1 {
  display: block !important;
  font-size: 14px;
  margin: 10px 10px 0 10px;
  text-align: center;
}

#MyBookmarks span.scrl {
  box-shadow: none !important;
  margin-left: 5px !important;
  width: 114px !important;
  text-shadow: none !important;
  background: #00000014 !important;
  transition: all 0.5s;
  line-height: 0 !important;
  padding: 0 !important;
  height: 20px;
  display: flex;
  justify-content: center;
}

#MyBookmarks span.scrl span:before {
  content: '\e5ce' !important;
  font-family: var(--mat);
  font-size: 20px;
  font-weight: 800;
}

#MyBookmarks span.scrl span {
  height: 100%;
  display: flex !important;
  align-items: center;
}

#MyBookmarks span.scrl.b span {
  transform-origin: 50% 50% !important;
}

#MyBookmarks span.scrl:hover {
  background: var(--col1) !important;
}

#MyBookmarks .BookmarkL > span.last_click {
  box-shadow: none !important;
  background: var(--bg-color) !important;
}

#MyBookmarks inner {
  padding-top: 30px !important;
}

/* smilies */
.hvStickerPackModalContent {
  border: 1px solid var(--col1);
  align-items: center;
  justify-content: start !important;
}

/* legends */
#profile .container legend,
.adformal h2,
#viewprofile h2 span,
#profilenav h2,
#pun-adnav h2,
#pun-admain h2 span,
legend span {
  font-family: var(--font);
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  font-size: 14px !important;
  margin: 0px;
  position: relative;
  padding: 0 50px 10px 0;
  color: var(--bg-color);
  border-bottom: 1px solid var(--col1);
}

/* del, abbr, underline */
del {
  filter: blur(1px);
  text-decoration: none;
  transition: all 1s cubic-bezier(0.2, 0.2, 0.2, 1), color 0.5s 0.2s linear;
  opacity: 0.5;
}
del:hover {
  font: inherit;
  filter: none;
  opacity: 1;
}

abbr {
  border-bottom: 2px dotted var(--col1);
  text-decoration: none;
}

.bbuline {
  border-bottom: 1px solid;
  font-style: normal;
}

/* lines */
.post-content hr {
  border-top: none;
}

.post-sig dt {
  border-top: 1px solid;
  margin-bottom: 20px;
}

dd {
  line-height: 150%;
  margin-left: 0px;
}

.fs-box.inline,
.post-sig dt,
.post-content hr {
  border-color: var(--col1) !important;
  opacity: 1 !important;
}

/* infoboxes */
.info-box,
.info {
  font-family: var(--font);
  text-transform: lowercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  line-height: 15px;
}

/* TITLE, TOOLTIP / NOTIFICATIONS
--------------------------------------------------------------------------------------------------------------------------*/
#tooltip,
.tipsy-inner {
  z-index: 999999;
  border-radius: 0px !important;
  padding: 3px 7px;
  font-family: var(--font);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
}

#tooltip,
.tipsy-inner,
#respect figure .prof,
.tipsy-inner a {
  color: var(--pun) !important;
  text-decoration: none !important;
}

#tooltip {
  position: absolute;
  max-width: 200px;
  display: none;
}

#tooltip,
.tipsy-inner,
.num_msg,
.bubble,
.jGrowl-notification,
.jGrowl .messag_theme,
#messages-list a.Author {
  background: var(--notify) !important;
}

/* notifications */
.num_msg,
.bubble,
.jGrowl-notification,
.jGrowl .messag_theme,
#messages-list a.Author {
  text-shadow: none !important;
  font-weight: normal !important;
}

.notification-right {overflow: hidden;}
.notification-item {
    padding: 10px;
}

#navpm {
  position: relative;
}

.num_msg {
  margin: 0 !important;
  right: -11px;
  top: calc(50% - 5px);
  font-size: 8px !important;
  height: 10px !important;
  font-family: var(--font);
  font-weight: 600 !important;
  display: block !important;
  border-radius: 50% !important;
}

.bubble {
  position: relative !important;
  top: -1px !important;
  right: -4px !important;
}

.notify-message .jGrowl-close {
  padding: 2px 5px !important;
}

/* ADMINSTYLE
--------------------------------------------------------------------------------------------------------------------------*/
#pun-admain legend span {
  padding: 0 !important;
  border: none;
  margin: 10px 0 0 -10px !important;
}

#pun-admain h2 span {
  white-space: nowrap;
}

#pun-adnav li,
#pun-adnav h2,
.adformal h2 {
  padding: 0 !important;
}

.adcontainer {
  padding-top: 20px;
}

.contains-textarea .adlabel {
  color: #000 !important;
}

#pun-admain fieldset p {
  font-family: var(--font);
  text-transform: lowercase;
  margin: 10px 1px;
  background: #00000008 !important;
  border: none !important;
  outline: 1px solid var(--bg-color);
  border-left: 200px solid var(--bg-color) !important;
  min-height: 40px;
  padding: 10px !important;
}

#pun-adnav h2,
.adformal h2 {
  background-color: inherit !important;
  border: none !important;
}
.adcontainer {
  border: none !important;
}
#pun-admain1 form.adcontainer,
#pun-admain2 form.adcontainer,
#pun-admain-new form.adcontainer,
#pun-admain1 div.adcontainer,
#pun-admain2 div.adcontainer {
  padding: 0px !important;
}
#pun-adnav a {
  font-weight: normal !important;
}
.adformal h2 {
  margin-top: -20px !important;
}
#pun-admain fieldset {
  padding: 0 !important;
}
#pun-admain .adcontainer th {
  background-color: transparent !important;
}
#pun-admain .linksb {
  width: 733px;
  height: 40px !important;
}
#pun-admain .postlink {
  margin-top: -10px;
}

#pun-admain #form-buttons {
  display: block;
}

.punbb-admin thead tr {
  display: table-row;
}

#pun-admain .usermail {
    display: block;
    margin-top: 5px;
}

/* UPb / DOWNb
--------------------------------------------------------------------------------------------------------------------------*/
.go-up,
.go-down, #Go_Top, #Go_Bottom {
    cursor: pointer;
    opacity: 1;
    display: none;
    position: fixed;
    z-index: 9999;
    transition: all 0.5s;
    margin-left: 1090px;
    bottom: 50%;
    font-family: var(--font-fav1);
    font-size: 150px;
    text-transform: lowercase;
    color: #947e46;
    height: 80px;
    line-height: 45px;
}
.go-up, #Go_Top {
  margin-bottom: 65px;
}
.go-up:before, #Go_Top:before, #Go_Bottom:before {
  content: 'o';
}
.go-down, #Go_Bottom {
  margin-bottom: -65px;
}

/* THEMES
--------------------------------------------------------------------------------------------------------------------------*/

Подпись автора

Поделиться22024-02-25 17:13:14

Автор: gayladriel
Администратор
фейт хэнсон, 45
is it too late to come on home? Сервис "РыбаТекст.рф" генерирует заданное количество абзацев более-менее осмысленного текста на русском языке. В англоязычном варианте классическим примером такого рыба-текста является Lorem Ipsum.
Последний визит:
2024-11-18 20:49:30
Сообщений: 327
Уважение: +1
доллары: 100000 $

Код:

background: -webkit-linear-gradient(#335429, #ecffe9, #5c8d4e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

Подпись автора

Поделиться32024-03-17 17:00:14

Автор: gayladriel
Администратор
фейт хэнсон, 45
is it too late to come on home? Сервис "РыбаТекст.рф" генерирует заданное количество абзацев более-менее осмысленного текста на русском языке. В англоязычном варианте классическим примером такого рыба-текста является Lorem Ipsum.
Последний визит:
2024-11-18 20:49:30
Сообщений: 327
Уважение: +1
доллары: 100000 $

Код:

<div class="ban" id="horizontal-scroller"></div>

Код:

<!---------------------------------------------------------------------------------------------------— ПРОКРУТКА БАННЕРОВ ---->
<script>
document.getElementById("horizontal-scroller")
  .addEventListener('wheel', function(event) {
    if (event.deltaMode == event.DOM_DELTA_PIXEL) {
      var modifier = 1;
      // иные режимы возможны в Firefox
    } else if (event.deltaMode == event.DOM_DELTA_LINE) {
      var modifier = parseInt(getComputedStyle(this).lineHeight);
    } else if (event.deltaMode == event.DOM_DELTA_PAGE) {
      var modifier = this.clientHeight;
    }
    if (event.deltaY != 0) {
      // замена вертикальной прокрутки горизонтальной
      this.scrollLeft += modifier * event.deltaY;
      event.preventDefault();
    }
  });
</script>

Подпись автора

Поделиться42024-04-14 22:09:25

Автор: gayladriel
Администратор
фейт хэнсон, 45
is it too late to come on home? Сервис "РыбаТекст.рф" генерирует заданное количество абзацев более-менее осмысленного текста на русском языке. В англоязычном варианте классическим примером такого рыба-текста является Lorem Ipsum.
Последний визит:
2024-11-18 20:49:30
Сообщений: 327
Уважение: +1
доллары: 100000 $

верх

Код:

*************************************************************
CREATED BY BLANCHE
**************************************************************

FONTS / ROOT / LINKS
-------------------------------------------------------------*/
@import url(style_cs.css);
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

@import url('https://forumstatic.ru/files/001a/e6/32/15560.css'); /*helvetica neue*/
@import url('https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css'); /*font awesome*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap');

@import url(https://forumstatic.ru/files/001b/7b/68/43827.css);
@import url('https://fonts.googleapis.com/css?family=Anton|Astloch|Berkshire+Swash|Bigshot+One|Caveat|Chathura|Cookie|Cormorant+Unicase|Cutive+Mono|Geo|Oleo+Script+Swash+Caps|Pirata+One|Share+Tech+Mono');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Dancing+Script:400,700|Handlee|Kaushan+Script|Lobster|Marmelad|Open+Sans+Condensed:300|Roboto+Slab|Rochester|Six+Caps|Yeseva+One&subset=cyrillic,cyrillic-ext,latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:400,400i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,latin-ext');
@import url('https://fonts.googleapis.com/css?family=Cuprum');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900&subset=cyrillic,latin-ext');

@font-face {
  font-family: Quindove;
  font-weight: normal;
  src: local('Quindove Italic'),
    url(https://forumstatic.ru/files/001a/a6/af/20174.woff) format('woff');
}

@font-face {
  font-family: The Rivers;
  font-weight: normal;
  src: local('The Rivers Regular'),
    url(https://forumstatic.ru/files/001a/a6/af/12310.woff) format('woff');
}

/***************************************/

:root {
  --bg: url(https://forumstatic.ru/files/001a/a6/af/88286.jpg) no-repeat fixed top center / cover;
  --foot: url();
  --bg-color: #78778f;
  --pun: #d3d3e0;
  --notify: rgba(var(--col1));
  --link: rgba(var(--col4));

  --col1: 122, 122, 160;
  --col2: 77, 73, 112;
  --col3: 227, 227, 242;
  --col4: 83, 75, 143;
  --col5: 150, 148, 195;

  --font: 'Helvetica Neue';
  --font-fav: 'Quindove', 'Lora';
  --font-fav1: 'The Rivers';
  --font-awe: 'Font Awesome 5 Pro';

  --title-h: 250px;
  --prof-w: 238px;
  --profnav-w: 110px;
  --main-w: 1050px;
  --main-p: 65px;
  --usav: 25px;
  --foot-h: 90px;
  --icon-w: 15px;

  --mat: 'Material Symbols Outlined';
  --mat1: 'Material Symbols Rounded';
}

/***************************************/

a {
  text-decoration: none;
  transition: all 0.5s;
  color: var(--link);
}

#pun-admain a,
#MyBookmarks span.scrl {
  color: var(--link) !important;
}

a:hover,
a:focus,
a:active {
  color: rgba(var(--col4));
}

:focus {
  outline: none !important;
}

.adlabel,
.adlabel a {
  color: var(--pun) !important;
}

/* ETO BAZA: BODYb, PUNb, TITLEb
--------------------------------------------------------------------------------------------------------------------------*/
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: url(https://forumstatic.ru/files/001a/a6/af/70527.png) top center no-repeat fixed,
    url(https://forumstatic.ru/files/001a/a6/af/95334.png) bottom center no-repeat fixed,
    var(--bg) var(--bg-color);
}

body.redirect-page {
  background: var(--bg-color) !important;
}

/***************************************/

#pun {
  position: relative;
  width: var(--main-w);
  padding: var(--main-p);
  padding-bottom: 20px;
  box-sizing: border-box;
  font: 68.75% verdana, arial, helvetica, sans-serif;
  color: rgb(21, 21, 21);
  margin: var(--title-h) auto var(--foot-h) auto;
  border-radius: 10px;
  border: 1px solid #babad5;
  box-shadow: inset 0 0 10px rgb(208 208 218 / 50%), 0 0 20px rgb(106 102 131 / 15%);
  background: url(https://forumstatic.ru/files/001a/a6/af/20939.jpg) repeat-y top center;
}

/*#pun:before,
#pun:after {
  content: '' !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  z-index: -1;
  border-radius: 10px;
}

#pun:before {
  backdrop-filter: blur(20px);   -webkit-backdrop-filter: blur(20px);
  background: rgb(200 200 214 / 50%);
}

#pun:after {
  background: url(https://forumstatic.ru/files/001a/a6/af/32932.jpg);
  mix-blend-mode: soft-light;visibility: visible !important;
}*/

.post-body,
.hasicon,
textarea,
#pun-respect #pun-main .container,
#pun-positive #pun-main .container,
.inner,
.modal-inner {
  background: var(--pun);
  border: 1px solid #dfdfe5;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
}

#post textarea {
  border-radius: 0 0 5px 5px;
}

.hasicon,
#pun-respect #pun-main .container,
#pun-positive #pun-main .container,
.inner,
.modal-inner {
  box-shadow: inset 0 0 20px #c4c2d5, 0 0 20px rgba(var(--col2), 0.3);
}
#pun-main {
  min-height: 230px;
}

/***************************************/

#pun-announcement:before,
.gost:before {
  content: 're:';
  font-size: 23px;
  font-family: var(--font-fav);
  color: #5e56a9;
}

#pun-announcement:before {
  top: 144px;
  left: calc(50% + 51px);
}

#pun-announcement:after,
.gost:after {
  content: 'play';
  font-family: var(--font-fav1);
  font-style: italic;
  font-size: 67px;
  color: #797990;
  letter-spacing: -6px;
}

#pun-announcement:after {
  top: 142px;
  left: calc(50% + 39px);
}

#pun-announcement:before,
#pun-announcement:after {
  position: fixed;
  z-index: -2;
}

#pun-announcement:before,
#pun-announcement:after,
.gost:before,
.gost:after {
  mix-blend-mode: plus-lighter;
}

#html-header info,
.gost-point {
  font-family: var(--font);
  color: rgba(var(--col3));
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#html-header info {
  position: fixed;
  top: 87px;
  left: calc(50% + 15px);
  z-index: -2;
}

#html-header info b,
.gost-point b {
  font-family: var(--font-fav);
  font-size: 10px;
  font-weight: 100;
  color: #988bff;
  margin-right: 1px;
}

/* NAVLINKS / ULINKS
--------------------------------------------------------------------------------------------------------------------------*/
#pun-navlinks {
  position: sticky;
  top: 120px;
  z-index: 999;
}

#pun-navlinks .container,
#pun-ulinks .container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 600;
}

#pun-navlinks .container {
  gap: 10px;
  width: var(--main-p);
  flex-direction: column;
  left: calc(0px - var(--main-p));
  position: absolute;
}

#pun-ulinks a,
#pun-navlinks a,
#pun-navlinks a:hover span,
#pun-navlinks a:hover:after,
.go-up:before,
.go-down:after,
.go-up:hover:after,
.go-down:hover:before,
#navlogout a:hover:after,
#New-exit:hover:after {
  color: rgba(var(--col1), 1);
}

/* navlinks */
#pun-navlinks a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 47px;
  height: 47px;
  border-radius: 3px;
}

#pun-navlinks a:hover,
.go-up:hover:before,
.go-down:hover:before {
  background: rgba(var(--col3), 0.5);
}

#pun-navlinks a span,
#pun-navlinks a:after,
.go-up:after,
.go-down:before,
#navlogout a:after,
#New-exit:after {
  font-size: 9px;
  text-transform: lowercase;
  color: rgba(var(--col3));
  transition: all 0.5s;
  text-shadow: 0 0 3px rgba(var(--col4), 0.5);
  letter-spacing: 0.5px;
}

#pun-navlinks a:before,
.go-up:before,
.go-down:after {
  font-family: var(--font-awe);
  font-size: 16px;
  transition: all 0.5s;
  text-shadow: 0px 1px rgba(var(--col3), 0.2);
}

#navindex a:before {
  content: '\f4c9';
}
#navuserlist a:before {
  content: '\f500';
}
#navsearch a:before {
  content: '\f002';
}
#navprofile a:before {
  content: '\f004';
}
#navpm a:before {
  content: '\f2b6';
}
#navadmin a:before {
  content: '\f013';
}

/*#navlogout a:before,*/
#navlogin a:before,
a#New-exit:before {
  content: '\f2f5' !important;
}

#navregister a:before {content: '\f067'}

#navlogout a:before {
  content: '\f2f1';
}
#navlogout a:first-child:after {
  content: 'твинки';
}
a#New-exit:after {
  content: 'выход';
}

#navpr_1 a:before {
  content: '\f0a1';
}

#navuserlist a:after {
  content: 'игроки';
}
#navadmin a:after {
  content: 'амс';
}
#navpm a:after {
  content: 'соо';
}

/* ulinks */

#pun-ulinks .container {
  font-size: 11px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: var(--main-w);
  padding: 7px 0;
  background: rgb(229 229 255 / 40%);
  margin: calc(0px - var(--main-p) - 2px) 0 0 calc(0px - var(--main-p) - 1px);
  text-transform: lowercase;
  border-radius: 10px 10px 0 0;
  gap: 5px;
}

#pun-ulinks a {
  padding: 3px 7px;
  border-radius: 3px;
  background: transparent;
}

#pun-ulinks a:hover {
  background: rgba(var(--col1), 0.2);
  color: rgba(var(--col2));
}

/* STATUS
--------------------------------------------------------------------------------------------------------------------------*/
#pun-status .container {
  position: fixed;
  top: 0;
  height: 60px;
  margin: 0;
  display: flex;
  font-family: var(--font);
  gap: 1px;
  text-transform: lowercase;
  font-size: 9px;
  letter-spacing: 0.7px;
  text-shadow: 1px 1px 0 rgba(var(--col2), 0.5);
  z-index: -2;
  flex-direction: column;
  right: calc(50% - 390px);
  font-weight: 300;
  justify-content: center;
  align-items: flex-end;
}

#pun-status,
#pun-status a {
  color: rgba(var(--col3));
}

#pun-status strong,
#pun-status a {
  font-weight: 300;
}

/* CATEGORY
--------------------------------------------------------------------------------------------------------------------------*/
#pun-index .category .container,
.statscon {
  position: relative;
}

.category h2 {
  margin: 0;
  background: url(https://forumstatic.ru/files/001a/a6/af/91114.png);
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.category h2:before {
  content: 'chapter';
  font-family: var(--font);
  font-weight: 300;
  font-size: 14px;
  font-style: italic;
  color: rgba(var(--col2));
}

.category h2:after {
  font-family: var(--font-fav);
  color: rgba(var(--col4));
}

#pun-category2 h2:after {
  content: 'one';
}
#pun-category3 h2:after {
  content: 'two';
}
#pun-category4 h2:after {
  content: 'three';
}
#pun-category5 h2:after {
  content: 'four';
}
#pun-category6 h2:after {
  content: 'five';
}
#pun-category7 h2:after {
  content: 'six';
}

/* HASICON / STRUCTURE EVERYWHERE
--------------------------------------------------------------------------------------------------------------------------*/
table {
  width: 100%;
}

.hasicon,
.usertable tbody,
#messages tbody,
#pun-respect .container tbody,
#pun-positive .container tbody,
#pun-online .container tbody {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--font);
  margin: 20px 0;
  width: 100%;
}

.hasicon tr,
thead tr,
.usertable tr,
#messages tr,
#pun-searchtopics tr,
#pun-respect tr,
#pun-positive tr,
#pun-online tr {
  display: grid;
  gap: 10px;
  grid-template-columns: 50% 8% 8% 30%;
  justify-content: space-between;
  text-transform: lowercase;
  font-family: var(--font);
  align-items: center;
  color: var(--bg-color);
}

/***************************************/

#pun-searchtopics tr {
  grid-template-columns: 40% 20% 6% 26%;
}

.usertable tr {
  grid-template-columns: 20% 32% 6% 6% 10% 10%;
}

#pun-messages .hasicon tr,
#messages thead tr {
  grid-template-columns: 1fr 18% 10% 3%;
  align-items: center;
}

#pun-respect tr,
#pun-positive tr {
  grid-template-columns: 13% 2% 15% 30% 30%;
}

#pun-online tr {
  grid-template-columns: 40% 40% 20%;
}

#pun-messages td,
#pun-messages th,
#pun-online td {
  width: auto !important;
}

#pun-viewforum .tcr,
#pun-searchtopics .tcr,
.tc2,
.usertable .last_visit,
#pun-respect .tcr,
#pun-positive .tcr {
  text-align: right;
}

#pun-viewforum td.tcr,
#pun-searchtopics td.tcr {
  /*  grid-template-areas: 'time user ava';
  display: grid;
  align-items: center;
  justify-items: end;
  justify-content: end;
  grid-template-columns: auto auto var(--usav);
  gap: 7px;*/
}

#pun-viewforum td.tcr a,
#pun-searchtopics td.tcr a {
  grid-area: 'time';
}

th {
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 10px;
  text-align: left;
  color: rgba(var(--col3));
}

/* fieldset */
fieldset {
  margin: 10px 0 !important;
  padding: 0;
  border: none !important;
}

/* fs-box */
.fs-box.inline {
  display: flex;
  gap: 10px;
  border: 1px solid;
  padding: 10px;
  align-items: center;
}

#pun-userlist .fs-box.inline {
  margin-top: -11px;
  position: relative;
}

#pun-login .fs-box.inline {
  margin-top: 10px;
  position: relative;
}

.inline .infofield {
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-align: justify;
  color: var(--col1);
}

/* PUN-INDEX / PODFORUMS
--------------------------------------------------------------------------------------------------------------------------*/
#pun-index .hasicon {
  gap: 30px;
  margin: 0;
}

#pun-index .hasicon tr {
  position: relative;
  box-sizing: border-box;
  grid-template-columns: 1fr 300px;
  margin: 0;
  gap: 0;
}

#pun-index .hasicon tr:before {
  content: '';
  position: absolute;
  width: 100%;
  border-top: 1px solid rgba(var(--col1), 0.2);
}

/* subforums */
#pun-index .hasicon .isub .tcl {
  padding-left: 0px !important;
}

.subforums {
  font-size: 0;
  margin-left: -15px !important;
}

#pun-viewforum .isub .tcl h3 {
  margin: 0 0;
}

/* left part */

#pun-index .tcl h3 {
  text-transform: lowercase;
  margin: -16px 0 0 0;
  font-size: 15px;
  transition: all 0.5s;
  text-align: left;
  font-family: var(--font-fav);
  font-weight: 100;
}

#pun-index .tcl h3 a {
  color: rgba(var(--col1));
}

#pun-index .tclcon {
  display: flex;
  gap: 30px;
  align-items: center;
}

.podfl {
  display: flex;
  gap: 10px;
}

.podfl a {
  background: #bdbcd8;
  border-radius: 2px;
  padding: 3px 5px;
  font-size: 9px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: rgba(var(--col2), 0.8);
}

.podfl a:hover {
  background: rgba(var(--col5));
  color: rgba(var(--col3));
}

.podfl a .fas {
  margin-right: 3px;
  font-size: 8px;
}

/* right part */
#pun-index .tcr {
  display: grid;
  grid-template-columns: var(--usav) auto;
  grid-template-rows: auto auto;
  gap: 10px 0px;
  grid-template-areas:
    'ava lastpost1'
    'ava lastpost2';
  justify-content: end;
  align-items: center;
  justify-items: end;
}

.lastpost-link {
  font-weight: 900;
  grid-area: lastpost1;
  text-align: right;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  font-size: 9px;
  color: rgba(var(--col2), 0.8);
}

.lastpost {
  grid-area: lastpost2;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  font-weight: 500;
  color: rgba(var(--col2));
}

/* user-avatar */
.user-avatar,
.avatar-image {
  border-radius: 0 !important;
}
.user-avatar {
  margin: 3px 0 0 0 !important;
  background: #3e3e3e;
  width: var(--usav) !important;
  height: var(--usav) !important;
  grid-area: ava;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.avatar-image {
  opacity: 1 !important;
  filter: grayscale(1);
  mix-blend-mode: screen;
  width: calc(var(--usav) - 0px) !important;
  height: calc(var(--usav) - 0px) !important;
}

.isonline {
  background: var(--col1) !important;
  top: 9px !important;
  right: 9px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 0 !important;
}

/* ICONS
--------------------------------------------------------------------------------------------------------------------------*/
.intd {
  display: grid;
  grid-template-columns: var(--icon-w) 1fr;
  align-items: center;
  gap: 10px;
}

#pun-index .intd {
  height: 29px;
  gap: 15px;
  position: relative;
}

.intd .icon {
  width: var(--icon-w);
  height: var(--icon-w);
  background: #bdbcd9;
  transition: all 0.5s;
  border-radius: 2px;
  font-family: var(--font);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--pun);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
}

.intd .icon:before {
  content: 'o';
}

.intd .icon.inew,
.intd .icon-new {
  background: rgba(var(--col5)) !important;
}

.isticky .intd .icon {
  background: #7f77af !important;
}

.iclosed .icon {
  background: rgba(var(--col3), 0.8);
}

/* CRUMBS
--------------------------------------------------------------------------------------------------------------------------*/
.crumbs {
  font-family: var(--font);
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
  height: 29px;
  text-transform: uppercase;
  position: relative;
  padding-top: 24px;
}

#pun-crumbs1 .crumbs {
  margin: 0 0 15px 0;
  border-bottom: 1px solid var(--bg-color);
}
#pun-crumbs2 .crumbs {
  margin: 20px 0 0px 0;
}
#pun-index .crumbs {
  border: none;
  margin: 0;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
}

.crumbs a:first-of-type,
#pun-index .crumbs span {
  font-family: var(--font-fav);
  white-space: nowrap;
  font-size: 30px;
  font-weight: 100;
  text-transform: lowercase;
  position: absolute;
  top: 0;
}

.crumbs a:first-of-type:after {
  content: ':';
}

.crumbs,
.crumbs a {
  color: #f4f4ff;
  text-shadow: 1px 1px 0px rgba(var(--col2), 0.4);
}

.crumbs a:after,
#pun-searchposts h3 span a:after {
  content: '—';
  margin: 0 -5px 0 5px;
}

.crumbs a:last-child:after,
#pun-searchposts h3 span a:last-child:after {
  display: none;
}

/* STATSCON
--------------------------------------------------------------------------------------------------------------------------*/
#pun-stats .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  margin: 20px 0px;
  font-family: var(--font);
  gap: 0px 10px;
  grid-template-areas:
    'tem soo last'
    'active active active'
    'day day day';
}

#onlinelist,
#onlinelist a {
  color: rgba(var(--col2));
}

#onlinelist strong {
  font-family: var(--font-fav);
  font-size: 12px;
}

.statscon .item1 {
  grid-area: tem;
}
.statscon .item2 {
  grid-area: soo;
}
.statscon .item3 {
  grid-area: reg;
  text-align: right;
}
.statscon .item4 {
  grid-area: last;
  text-align: right;
}

.statscon .item5 {
  text-align: justify;
  line-height: 15px;
  margin-top: 10px;
}
.statscon .item5.onlinelist {
  grid-area: active;
}
.statscon .item5.users_24h {
  grid-area: day;
}

/* FOOTER
--------------------------------------------------------------------------------------------------------------------------*/
#pun-about {
  width: 100%;
  height: 1px;
  text-align: center;
  position: absolute;
  left: 0;
  margin-top: 0px;
  display: flex;
  justify-content: center;
}

#pun-about .container {
  font-family: var(--font);
  font-size: 6px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  margin-top: 92px;
}

#pun-about,
#pun-about a {
  color: #f6f6f6;
}

/* PROFILEb
--------------------------------------------------------------------------------------------------------------------------*/
/* structure. sticky by max, the murderer! */
.post-author,
#form-buttons,
#profile fieldset {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: rgba(var(--col3), 0.2);
  border: 1px solid #dfdfe5 !important;
}

#profile fieldset,
.usertable,
#mask_dialog .inner.container {
  border-radius: 5px;
}

.editBookmark,
#MyBookmarks,
.hvStickerPackModal,
#viewprofile tr,
.usertable,
#mask_dialog .inner.container {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(var(--col3), 0.4) !important;
  border: 1px solid #dfdfe5 !important;
  box-shadow: none !important;
}
#mask_dialog .inner.container {
  background: rgba(var(--col3), 0.6) !important;
}

#viewprofile tr {
  backdrop-filter: none;
  position: relative;
}

.post-author {
  width: var(--prof-w);
  min-height: 85px;
  position: relative;
  border-radius: 5px 0 0 5px;
  border-right: none !important;
  box-sizing: border-box;
}

.post-author ul {
  position: sticky;
  top: 0px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  width: var(--prof-w);
  gap: 10px 5px;
  font-family: var(--font);
  padding: 0px 10px 6px 10px;
  box-sizing: border-box;
  margin: 0 0 5px 0;
  color: #222222;
}

.post-author li {
  width: inherit;
}

/* pa */
.pa-author {
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}
.pa-author,
.pa-author strong {
  font-weight: 200;
}

.pa-author a {
  display: flex;
  justify-content: flex-end;
  line-height: 1;
  height: 25px;
  align-items: center;
}

.pa-author,
.pa-author a,
.pa-author a:hover span,
.pa-title {
  color: #f7f6ff;
}

.pa-author a:hover,
.pa-author a span {
  color: rgba(var(--col2));
}

.pa-author a span {
  font-family: var(--font-fav);
  font-size: 16px;
  transition: all 0.5s;
  margin-top: 2px;
}

.pa-title {
  text-align: right;
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  font-family: var(--font);
  font-weight: 500;
  margin: -10px -10px 0 0px;
  line-height: 10px;
  padding: 7px 10px;
  box-sizing: border-box;
  background: rgba(var(--col1), 0.2);
  border-top: 1px solid rgba(var(--col1), 0.5);
  border-top-left-radius: 5px;
}

.pa-avatar {
  position: relative;
  margin: -10px -10px 0 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(var(--col5), 0.6), rgba(var(--col1), 0.2));
  padding-bottom: 10px;
}

.pa-avatar img {
  max-width: 190px;
  max-height: 190px;
  outline: 1px solid rgba(var(--col3), 0.5);
  outline-offset: 3px;
  margin-top: 3px;
}

/* posts/respect */
.pa-respect,
.pa-posts,
.pa-fld3 {
  width: calc(calc(var(--prof-w) - 20px - 10px - 4px) / 3) !important;
  text-transform: lowercase;
  font-weight: 100;
  font-family: var(--font-fav);
  font-size: 13px;
  position: relative;
}

.pa-respect,
.pa-respect a,
.pa-posts,
.pa-fld3 {
  color: rgba(var(--col4));
}

.pa-respect .fld-name,
.pa-respect .fld-name a,
.pa-posts .fld-name,
.pa-fld3 .fld-name {
  color: #f5f3ff;
}

.pa-respect .fld-name,
.pa-posts .fld-name,
.pa-fld3 .fld-name {
  font-size: 8px;
  margin-bottom: 3px;
  text-transform: lowercase;
  display: block;
  font-weight: 600;
  font-style: normal;
  font-family: var(--font);
  letter-spacing: 0.5px;
  text-shadow: 1px 1px rgba(var(--col1), 0.3), 0px 0px 2px rgba(var(--col2), 0.5);
}

.pa-posts .fld-name {
  font-size: 0;
}

.pa-posts .fld-name:before {
  content: 'сообщения:';
  font-size: 8px;
}

.pa-respect img {
  filter: grayscale(1);
  vertical-align: middle;
  margin-top: -4px;
}

.pa-ip {
  font-size: 8px;
  letter-spacing: 0.5px;
}

.pa-ip,
.pa-ip a {
  color: rgba(var(--col1));
}

/* fld */
.pa-fld2 {
  margin: -22px -10px 0 -10px;
  position: relative;
  z-index: 1;
  height: 38px;
  overflow: hidden;
}

.pa-fld2 img {
  cursor: pointer;
}

.pa-fld1 {
  line-height: 14px;
  text-align: justify;
  text-align-last: center;
  background: rgba(var(--col3), 0.3);
  padding: 15px 5px;
  margin: -10px 10px 0px 10px;
  border-radius: 0 0 7px 5px;
  font-size: 9px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

.pa-fld1,
.pa-fld1 a {
  color: var(--bg-color);
}

.pa-fld1 a,
.pa-fld1 b {
  font-weight: 800;
}

alz a {
  font-family: var(--font-fav);
  font-size: 13px;
  letter-spacing: 0px;
  display: block;
  margin-bottom: -8px;
  font-weight: 100 !important;
  color: rgba(var(--col4)) !important;
}

.pl {
  height: 45px;
  width: 237px;
  background-image: url(https://i.imgur.com/RCsdrPH.png);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.pl pl1 {
  position: relative;
  display: block;
  width: 231px;
  padding: 5px 3px 0px 3px;
  height: 17px;
  font: 13px/13px Roboto Condensed;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.pl pl2 {
  position: relative;
  display: block;
  width: 231px;
  padding: 0px 3px 0px 3px;
  height: 10px;
  font: 9px/9px Roboto;
  letter-spacing: 0.8px;
  text-transform: lowercase;
}

.pa-fld4 {
  display: none; /*-рип фишки-*/
}

.pa-fld5 {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -20px 0 -5px 0;
}

.pa-fld5:before {
  content: '';
  position: absolute;
  left: -12px;
  border-top: 1px solid rgba(var(--col3), 0.3);
  width: var(--prof-w);
  z-index: -1;
  margin-top: 16px;
}

.pa-fld5 a {
  background: rgba(var(--col1), 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pa-fld5 a img {
  max-width: 40px;
  max-height: 40px;
}

/* online */
.indOnline,
.indOffline {
  cursor: pointer;
  position: absolute;
  top: 16px;
  left: 1px;
  height: 20px;
  width: 20px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.indOnline:before,
.indOffline:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.indOnline:before {
  background: rgba(var(--col4), 0.8);
}
.indOffline:before {
  background: rgba(var(--col3), 0.5);
}

/* QUOTES / SPOILER / TEXTAREA
--------------------------------------------------------------------------------------------------------------------------*/
.quote-box,
.code-box {
  background: rgba(var(--col5), 0.3) !important;
  border: 1px solid rgba(var(--col4), 0.1) !important;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(var(--col5), 0.3) !important;
}

.quote-box {
  margin: 8px 10px 10px;
  position: relative;
}

.code-box {
  margin: 10px 10px 15px;
  position: relative;
}

.spoiler-box {
  margin: 20px 0;
}

td .spoiler-box {
  margin: 20px 10px;
}

cite,
.code-box .legend,
.spoiler-box > div {
  font-style: normal;
  display: block;
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  font-size: 11px;
  letter-spacing: 1px;
  position: relative;
  text-align: left;
  background: transparent !important;
  padding: 5px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(var(--col5), 0.3);
  text-shadow: 0 0 3px rgba(var(--col4), 0.4);
}

.code-box .legend,
.hide-box cite {
  text-align: right;
}

.spoiler-box > div {
  margin-bottom: -1px;
}

cite,
cite a,
cite a:hover,
.code-box .legend,
.code-box .legend a,
.spoiler-box > div {
  color: rgba(var(--col4));
}

blockquote,
.blockcode {
  padding: 15px;
  position: relative;
  z-index: 3;
  color: rgba(var(--col2));
  margin: 0;
}

blockquote p:last-child {
  padding: 0;
}

.scrollbox {
  overflow: auto;
  font-size: initial;
  max-height: 60px;
}

.post-content .spoiler-box > blockquote {
  /*  padding: 0 !important;*/
}

/* SPOILER ANIMATION © BLANCHE. free for use only with copy */

.spoiler-box > div:before {
  content: '\e5cd';
  font-family: var(--mat);
  transition: all 0.5s;
  transform: rotate(45deg);
  font-size: 10px;
  font-weight: 600;
  position: absolute;
  top: 25%;
  left: 5px;
}

.spoiler-box > div.visible:before {
  transform: rotate(0deg);
}

/* textarea */
textarea {
  overflow: auto;
  font-size: 10.5px !important;
  line-height: 15px !important;
  padding: 10px;
  font-family: Verdana;
  box-shadow: inset 0 0 20px #c4c2d5;
}

/* FORMA OTVETA
--------------------------------------------------------------------------------------------------------------------------*/
#pun-viewtopic #post {
  margin-top: 20px;
}

#pun-viewtopic .post-box #post,
#pun-viewtopic .post-box fieldset {
  margin: 0 !important;
  padding: 0;
}

.post-box {
  padding-bottom: 20px;
}

#post .areafield {
  margin: 0;
}

#pun-edit #post .areafield span.input a {
  margin: 10px 0;
  display: block;
  text-transform: lowercase;
  font-family: var(--font);
  letter-spacing: 0.5px;
}

#post.container.formal {
    display: block !important;
}

.hashelp {
  position: relative;
}

#main-reply {
  height: 213px;
}

.grippie {
  margin-top: 5px;
}

/* CUSTOM FORM-BUTTONS WITH WRITTEN SYMBOLS © BLANCHE. free for use only with copy */
#form-buttons {
  display: grid;
  grid-template-columns: 145px 1fr;
  border-bottom: none !important;
  border-radius: 5px 5px 0 0;
}

#form-buttons table {
  width: 100% !important;
}

#form-buttons tr {
  width: 100%;
  display: flex;
  height: 26px;
  justify-content: space-between;
}

#plng,
#form-buttons td {
  display: flex;
  justify-content: center;
  gap: 3px;
  align-items: center;
  height: 26px;
  box-sizing: border-box;
}

#form-buttons td,
#Knopa2-2 {
  background-image: none !important;
  font-family: var(--mat);
  font-size: 15px;
  color: rgba(var(--col2));
  width: inherit !important;
  cursor: pointer;
  transition: all 0.5s;
}

#form-buttons td:hover {
  color: rgba(var(--col4), 0.5);
}

#plng {
  font-size: 9px;
  font-family: var(--font);
  color: rgba(var(--col2));
  font-weight: 600;
  border-top-left-radius: 5px;
  border-right: 1px solid rgba(var(--col3));
  background: rgba(var(--col4), 0.1);
  letter-spacing: 0.5px;
}

#plng b {
  color: rgba(var(--col4));
  font-family: var(--font-fav);
  font-size: 11px;
}

#form-buttons td img {
  z-index: 9;
}

#form-buttons td:before {
  position: absolute;
}

#button-font:before {
  content: '\e264';
}

#button-gid:before {
  content: '\e0e0';
}

#button-size:before {
  content: '\eae2';
}

#button-bold:before {
  content: '\e238';
}

#button-italic:before {
  content: '\e23f';
}

#button-underline:before {
  content: '\e249';
}

#button-strike:before {
  content: '\e257';
}

#button-transL:before {
  content: '\e8e2';
}

#button-indent:before {
  content: '\e23e';
}

#button-left:before {
  content: '\e236';
}

#button-center:before {
  content: '\e234';
}

#button-right:before {
  content: '\e237';
}

#button-justify:before {
  content: '\e235';
}

#button-link:before {
  content: '\e157';
}

#button-spoiler:before {
  content: '\e875';
}

#button-image:before {
  content: '\e412';
}

#button-imagetwo:before {
  content: '\e3f4';
}

#button-video:before {
  content: '\e1c4';
}

#button-hide:before {
  content: '\e898';
}

#button-quote:before {
  content: '\e625';
}

#button-code:before {
  content: '\ead1';
}

#button-html:before {
  content: '\ef54';
}

#button-color:before {
  content: '\e40a';
}

#button-table:before {
  content: '\f088';
}

#button-smile:before {
  content: '\e813';
}

#button-sticker:before {
  content: '\e87d';
}

#button-keyboard:before {
  content: '\f028';
}

#button-addition:before {
  content: '\e145';
}

#button-mask:before {
  content: '\e853';
}

#floatbut:before {
  content: '\e3b5';
}
#Knopa2-2:before {
  content: '\f0ec';
  font-family: var(--mat1);
  color: rgba(var(--col3), 0.8);
  text-shadow: 1px 1px rgba(var(--col2), 0.5);
  transition: all 0.5s;
}

#Knopa2-2:hover:before {
  color: rgba(var(--col3), 1);
}

/* tags */
#tags .container,
#float {
  overflow-y: auto;
  padding: 10px !important;
  height: 191px;
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  z-index: 99999;
  font-size: 10px;
  background: rgba(var(--col5), 0.3);
  top: 27px !important;
  margin: 0 -6px 0 0px;
  color: rgba(var(--col2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--col3));
}

#font-area div,
#size-area div,
#addition-area div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  transition: all 0.5s;
  margin: -10px;
  padding: 10px;
  position: relative;
}

/*#font-area:hover div,
#size-area:hover div,
#addition-area:hover div {
  color: var(--col2);
}*/

#font-area div:hover,
#size-area div:hover,
#addition-area div:hover {
  background: var(--col1);
  color: var(--bg-color);
}

#font-area div img,
#size-area div img {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}

#font-area span,
#size-area span,
#addition-area div {
  height: auto !important;
}

#uploaded-images img {
  object-fit: cover;
}

#image-area,
#color-area,
#video-area,
#spoiler-area {
  height: auto !important;
}

#spoiler-area a,
#image-area a {
  color: inherit;
}

#float {
  left: 43%;
  z-index: 2;
  height: auto;
  position: absolute;
  display: none;
}

/* INPUT / BUTTONS
--------------------------------------------------------------------------------------------------------------------------*/
input,
select,
option,
.hvStickerPackModalTab,
.gostcode {
  background: transparent !important;
  border: 1px solid rgba(var(--col3), 0.4);
  box-shadow: 0 0 7px rgba(var(--col1), 0.4), 0 0 7px inset rgba(var(--col3), 0.2);
  font-family: var(--font) !important;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 4px 5px;
  color: rgba(var(--col4));
  box-sizing: border-box;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 5px;
}

select,
option {
  /*  color: var(--col2);*/
  text-transform: lowercase;
}

#topic-modmenu {
  margin-top: 20px;
}

/* buttonb */
.button,
.hvStickerPackModalTab,
.gostcode .copy {
  padding: 6px 10px !important;
  text-transform: uppercase;
  font-size: 7px !important;
  font-weight: 600 !important;
  transition: all 0.5s;
  cursor: pointer;
  color: rgba(var(--col3));
  text-shadow: 0 0 3px rgba(var(--col2), 1);
}

.button:hover,
.hvStickerPackModalTab:hover,
.hvStickerPackModalTab.active,
.gostcode .copy {
  background: rgba(var(--col5), 0.4) !important;
  transform: translateY(-3px);
}

.post-body .button,
.hvStickerPackModalTab,
#mask_dialog .inner .button {
  background: rgba(var(--col5), 0.4) !important;
  border-color: rgba(var(--col5), 0.4) !important;
}

/* POST-LINKS / LINKST / LINSKB
--------------------------------------------------------------------------------------------------------------------------*/
.post-links {
  width: 100%;
}

#pun-viewtopic .post-links,
#pun-searchposts .post-links {
  margin: -6px 0 -2px 0;
}

.post-links ul {
  text-align: right;
  margin: 0;
}

#pun-searchposts .post-links ul {
  text-align: left;
}

#pun-searchposts .post:last-child .post-links {
  margin-bottom: 10px;
}

.post-links ul,
#pun-viewtopic .linkst {
  padding-right: 65px;
}

.endpost .post-links ul,
#pun-messages .post-links ul {
  padding-right: 0;
}

.post-links li {
  display: inline-block;
}

.pl-email {
  float: left;
}

.pl-email.pm,
.pl-email.email {
  margin-left: 10px;
}

#pun-viewtopic .pl-delete,
.pl-edit,
#pun-messages .pl-quote {
  margin-right: 8px;
}

#pun-viewtopic h3,
#pun-searchposts h3,
#pun-multimove h3 {
  margin: 0 0 15px 0;
}

.gid3 #pun-viewtopic h3 {
    margin: 20px 0 10px 0;
}

.gid3 #pun-viewtopic .post:first-of-type h3 {
    margin: 0 0 15px 0 !important;
}

.post h3 span,
.linkst,
.linksb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post h3 span {
  flex-direction: row-reverse;
  margin-top: -10px;
  padding-left: var(--prof-w) !important;
  box-sizing: border-box;
}

.pagelink {
  order: 1;
}
.postlink {
  order: 3;
  width: auto !important;
}
.linkst .postlink {
  margin-top: -4px;
}
.subscribelink,
#pun-viewforum noindex {
  order: 2;
}

.post h3 span a,
.post h3 span strong,
.post-links a,
.pagelink,
.postlink a,
.subscribelink,
#pun-viewforum .modmenu strong,
.postlink .button {
  font-family: var(--font);
  font-size: 8px !important;
  letter-spacing: 0.5px;
  font-weight: 600 !important;
  background: rgba(var(--col3), 0.3) !important;
  padding: 3px 5px !important;
  border-radius: 3px;
  color: rgba(var(--col2));
  text-transform: uppercase;
  transition: all 0.5s;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.post h3 span a:hover,
.post h3 span strong:hover,
.post-links a:hover,
.pagelink:hover,
.postlink a:hover,
.subscribelink:hover,
#pun-viewforum .modmenu strong:hover,
.postlink .button:hover {
  background: rgba(var(--col3), 0.5) !important;
}

.post h3 span,
.endpost .post-links,
.linksb,
#pun-viewforum .linkst {
  width: 100%;
}

.linksb {
  padding-top: 10px;
  box-sizing: border-box;
}

#pun-viewtopic .linksb {
  border-top: 1px solid var(--bg-color);
}

.gid3 .linksb {
  margin-top: 7px;
}

.linkst {
  margin-bottom: 10px;
}

#pun-viewtopic .linkst,
#pun-searchposts .linkst,
#pun-multimove .linkst {
  border: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -15px;
}

.post h3 span strong:before {
  content: 'пост';
  margin-right: 5px;
}

.post h3 span strong {
  width: 45px;
  text-align: center;
}

/* PAGES: VIEWTOPIC / POST / PUN-POST
--------------------------------------------------------------------------------------------------------------------------*/
.post .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px 0px;
  border-radius: 5px;
  position: relative;
}

.post #tags .container {
    display: block;
}

.post .container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 20px rgba(var(--col2), 0.3);
  border-radius: 5px;
  width: 100%;
  height: calc(100% - 25px);
}

#pun-post .post .container:before, .gid3 .post .container:before {
  height: 100%;
}
#pun-post .post {
  margin-top: 20px;
}
#pun-multimove .post .container:before {
  height: calc(100% - 40px);
}
#pun-messages .post .container:before {
  height: calc(100% - 47px);
}
#pun-searchposts .post:last-of-type .container:before {
  height: calc(100% - 37px);
}

.post-rating .container,
.post-vote .container {
  display: block;
  margin: 0 !important;
}

.post-rating .container:before,
.post-vote .container:before {
  display: none;
}

.post .post-rating a,
.post .post-vote a {
  border: 2px solid var(--col1);
  min-width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font);
  font-weight: 600;
  font-size: 11px !important;
  transition: all 0.2s;
  color: var(--bg-color);
}

.post-rating a:before,
.post-vote a:before {
  font-family: var(--mat1);
  color: var(--col1);
  margin-right: 3px;
  transition: all 0.5s;
}
.post-rating a:before {
  content: '\e87d';
}
.post-vote a:before {
  content: '\e253';
}
.post-rating a:hover:before,
.post-vote a:hover:before {
  color: rgba(var(--col4));
}
div.post-vote {
  margin-bottom: 65px;
}

.post-body {
  display: block;
  width: calc(100% - var(--prof-w) - 0px);
  position: relative;
  border-radius: 0 5px 5px 0;
  box-shadow: inset 0 0 20px #c4c2d5;
  padding: 30px;
}

.reactions-root {
  padding: 0 5px;
  position: absolute;
  bottom: 0;
}

.post-content {
  width: 100%;
  text-align: justify;
}

.post-content img.postimg {
  vertical-align: middle;
}

.post-content table {
  table-layout: fixed;
}

.post-content table td {
  border: none !important;
}

.post-content p {
  margin: 0;
  padding-bottom: 10px;
  line-height: 150%;
  text-align: justify;
}

#topic-users-in {
  text-transform: lowercase;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(var(--col2));
}

#topic-users-in span {
  font-weight: normal !important;
}

#topic-users-in a:after {
  content: ',';
  margin-right: 2px;
}

.formsubmit {
  display: flex;
  gap: 10px;
  align-items: center;
  text-transform: lowercase;
  font-family: var(--font);
  letter-spacing: 0.5px;
  color: rgba(var(--col2));
}

#pun-post .pa-author {
  margin: auto;
  text-align: right;
  position: relative;
  top: auto;
  padding: 10px;
  box-sizing: border-box;
}

#pun-post #post-preview legend span,
#pun-userlist legend span,
#pun-search legend span,
.modal-inner legend span,
#pun-delete legend span {
  display: block !important;
  margin-bottom: 10px;
}

#pun-login label {
  white-space: nowrap;
}

/* fntslider */
.FNTslider {
  width: 160px;
  height: 4px;
  background: rgba(var(--col3), 0.3);
  box-sizing: border-box;
}
.FNTslider .before {
  height: 4px;
  margin: 0px;
  background: rgba(var(--col3), 0.5);
}
.FNTslider .thumb {
  width: 3px;
  height: 10px;
  position: relative;
  top: -7px;
  cursor: pointer;
  background: rgba(var(--col4), 0.8);
  border-radius: 3px;
}

/* new theme */
.required label,
.datafield .input,
.selectfield label,
.inputfield label,
.inputfield.required.longinput,
#pun-admain legend span,
#setmods dt {
  background-color: transparent !important;
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  font-size: 10px !important;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 7px;
}

.inputfield.required.longinput:last-child {
  display: flex;
  align-items: center;
}

/* checkboxes */
p[class='checkfield'] *,
div[class='checkfield'] *,
fieldset[class='radiofield'] * {
  vertical-align: middle;
  font-family: var(--font);
  font-weight: 300;
  font-size: 10px;
  padding: 2px 0;
  display: inline-block;
}

/* PAGES: VIEWFORUM, SEARCHPOSTS, ETC
--------------------------------------------------------------------------------------------------------------------------*/
.newtext {
  font-size: 10px;
}

.newtext a {
  color: var(--col1) !important;
}

.pagestext a {
  color: var(--col1) !important;
}

#pun-viewforum .category {
  margin-bottom: 10px;
}

#pun-searchposts h3 span {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  gap: 5px;
}

#pun-searchposts h3 strong {
  position: absolute;
  right: 30px;
}

#pun-searchposts .FNTslider {
  position: absolute;
  right: 50px;
}

#pun-searchposts h3 span a {
  display: inline-flex;
  align-items: center;
}

#pun-searchposts h3 span a:after {
  margin: 0px 0 2px 5px;
  display: inline-block;
  font-family: var(--font);
}

/* PAGES: VIEWPROFILEb
--------------------------------------------------------------------------------------------------------------------------*/
#viewprofile tr {
  display: grid;
  grid-template-columns: var(--prof-w) 1fr;
  font-family: var(--font);
  gap: 20px;
  align-items: center;
  border-radius: 5px;
}

#profile-signature ul {
  border: none !important;
}

/* left part */
#viewprofile #profile-left {
  width: inherit !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-transform: lowercase;
  letter-spacing: 1px;
  padding: 15px !important;
  text-align: center;
  color: rgba(var(--col3));
  text-shadow: 0 0 3px rgba(var(--col1), 0.5);
  height: 100%;
  box-sizing: border-box;
  background: rgba(var(--col1), 0.3);
  font-size: 9px;
  justify-content: center;
  border-right: 1px solid rgba(var(--col3));
}

#profile-name {
  font-size: 18px;
  font-family: var(--font-fav);
}

#profile-left #profile-title strong,
#profile-left #pa-online strong {
  font-weight: 300 !important;
}

li#profile-name strong,
#pa-edit a {
  color: rgba(var(--col4)) !important;
  font-weight: 400 !important;
}

#pa-avatar {
  width: var(--prof-w);
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 10px 0;
  margin: 5px 0;
  border-color: rgba(var(--col3), 0.3);
}

/* right part */
#profile-right {
  width: inherit !important;
  padding: 10px !important;
  gap: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#profile-right li {
  display: flex;
  gap: 10px;
  text-transform: lowercase;
  font-size: 10px;
  flex-direction: column;
}

#profile-right li span:first-child {
  background: rgba(var(--col5), 0.3);
  border-bottom: 1px solid rgba(var(--col3), 0.5);
  text-transform: lowercase;
  font-weight: 700;
  padding: 3px 10px 4px 10px;
  text-align: center;
}

#profile-right li span:first-child,
#profile-right li span:first-child a {
  color: rgba(var(--col2), 0.8);
}

#profile-right strong {
  font-weight: 500;
  padding: 0 !important;
  letter-spacing: 0.5px;
  text-align: center;
}

#profile-right strong,
#profile-right strong a {
  color: var(--bg-color);
}

/* inside */
#profilenav,
#pun-adnav {
  float: left;
  width: var(--profnav-w);
  font-family: var(--font);
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

#pun-messages #profilenav {
  margin-right: 20px;
}

#profilenav ul,
#pun-adnav ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#profile fieldset,
.adformal {
  padding: 20px;
}

#pun-profile fieldset,
#pun-profile .adfs-box {
  text-transform: lowercase;
  font-family: var(--font);
  color: var(--bg-color);
  letter-spacing: 0.5px;
  margin-left: calc(var(--profnav-w) + 20px) !important;
}

#profile fieldset fieldset {
  margin-left: 0px !important;
  padding: 0px;
}

#filetable thead tr {
  display: table-row;
}

#pun-profile #profile {
  min-height: 280px;
}

.select-file {
  width: fit-content;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-left: 130px;
}

#profile10 .submitend {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

#profile10 .submitend .pagelink {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 13px;
}

/* PAGES: USERLIST, RESPECT, ONLINE
--------------------------------------------------------------------------------------------------------------------------*/
.usertable .container {
  margin: 20px;
}

.usertable td,
.usertable th {
  text-align: center;
}

.usertable .tcl,
#pun-respect .tcl,
#pun-positive .tcl {
  text-align: left;
}

#pun-respect td,
#pun-respect th,
#pun-positive td,
#pun-positive th {
  width: auto !important;
  text-align: center;
}

/* userlist */
.username,
td.pmtc22 {
  /*  display: grid;
  grid-template-columns: 36px auto;
  grid-template-areas: 'ava user';
  gap: 10px;
  align-items: center;*/
}

#pun-online .username {
  display: block;
}

td.pmtc22 {
  justify-content: end;
}

.usersname,
td.pmtc22 a,
#pun-viewforum td.tcr .byuser,
#pun-searchtopics td.tcr .byuser {
  grid-area: user;
}

/* PAGES: MESSAGES
--------------------------------------------------------------------------------------------------------------------------*/
#pun-messages .hasicon {
  width: auto;
}

#pun-messages h3 {
  margin-top: -21px;
  position: relative;
}

.postlink .button {
  box-shadow: none !important;
  text-shadow: none !important;
  border: none !important;
}
.postlink .button:hover {
  transform: none;
}

#profile.formal.messages-container .container {
  min-height: 70px;
}

#notify-settings {
  font-family: var(--font);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  font-size: 9px;
  color: rgba(var(--col3));
  margin-left: calc(var(--profnav-w) + 15px);
}

input#OnOff_Notify {
  margin-top: -2px;
}

#volSlider.vol_slider {
  margin-top: 1px;
}

#pun-messages .post-links {
  margin-bottom: 14px;
}

#pun-messages .post h3 span {
  padding-left: 540px !important;
  white-space: nowrap;
  margin-left: 0 !important;
  gap: 10px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 400;
  color: rgba(var(--col2));
}

/* SCROLLBAR / SELECTION
--------------------------------------------------------------------------------------------------------------------------*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--col3));
}

/* selection */
::selection {
  color: var(--col1);
  background: var(--bg-color);
}

/* HIDDEN ELEMENTS
--------------------------------------------------------------------------------------------------------------------------*/
.acchide,
h1,
#pun-navlinks h2,
#pun-status h2,
#pun-ulinks h2,
.multipage .topic h2,
form#post.container legend span,
.post-sig dt span,
.crumbs strong,
.divider hr,
#pun-userlist .main h2,
#pun .modlist,
.stickytext,
.closedatafield,
#pun-viewforum #pun-main h2,
#pun-announcement h2,
#pun-break4,
#pun-messages .post-sig,
.tipsy-arrow,
.clearer,
#pun-searchtopics #pun-main h2,
.num_msg:before,
/* проверить все ДО этого */
#topic-users-in a:last-child:after,
#topic-modmenu span,
#pun-viewforum .modmenu span,
#post-form h2,
#pun-index th,
#pun-index .tcr br,
#pun-index .tc2,
#pun-index .tc3,
.lastedit,
.pa-reg,
.pa-gifts,
.pa-replies,
.sharelink,
.postlink .closed,
.pl-share,
.pl-reports,
.pa-last-visit,
#viewprofile-next #profilenav,
#pa-invites,
#profile-gifts,
#navadmin span, #navuserlist span, #navpm span:first-child,
#pun-live-rusff,
.crumbs em,
#pun-searchposts em,
#pun-searchtopics .modmenu,
.bubble:after,
#pa-fld4,
#pun-post .topic h2,
.hide-box .qcn,
#topic-feed,
.modal-inner h2 span, 
.catleft, 
.catright, 
#button-smile,
#button-files_rusff, 
#button-graffiti_rusff,
#pun-index .subforums em,
.pa-online,
.reactions-root,
.qcn, #pun-status .status-right, #h-uploads, #pun-category1 h2, #pun-stats h2, #pun-index #forum_f22, #pun-index #forum_f24, #pun-index #forum_f12, #pun-index #forum_f14, #pun-index #forum_f17, #pun-index #forum_f18, .category h2 span, #pun-stats .item3, #post.container:before, .itoginov .tpostname, .itoginov .tcitname, .itoginov .tpp1, .itoginov .tpp2, .itoginov .tpp3, .itoginov .tpp4, .itoginov .tga, .itoginov .tan, .itoginov .tpost2, .itoginov .tpost3, .pa-fld3 br, #navlogout span:first-child, #New-exit img, .post #tags .container:before {
  display: none !important;
}

/* MOBILE / MOZILLA
--------------------------------------------------------------------------------------------------------------------------*/
@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
  }
  #form-buttons {
    margin-bottom: -2px;
  }
}

/*html{min-width: 1200px!important;}для мобил*/
@media screen and (max-device-width: 480px) {
  a,
  a:hover,
  a:focus,
  a:active,
  #pun-status,
  .crumbs,
  #pun-stats ul.container,
  .modmenu .container,
  #pun-index .tcr .lastpost {
    -webkit-text-size-adjust: none;
  }
  .hashelp center div a button,
  .button,
/*  input,*/
  select {
    -webkit-appearance: none !important;
    border-radius: 0px !important;
  }
  .go-up,
  .go-down {
    display: none;
  }
}

/************************* 
Стиль для Быстрой смены аккаунтов 
Deff 
*************************/
/*Cкрытие формы входа без клика*/
#pun-navlinks a:not(.NextShow) + span.odd {
  display: none !important;
}
#pun-ulinks ul {
  /*display: block!important;
 position:relative!important;
 z-index:-1999999!important;*/
}

.punbb #pun-navlinks #form-login {
  position: absolute !important;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(var(--col5), 0.5);
  box-shadow: 0 0 10px rgba(var(--col1), 0.3);
  font-family: var(--font);
  text-transform: lowercase;
  font-size: 10px;
  color: rgba(var(--col2));
  padding: 10px;
  box-sizing: border-box;
  top: -180px;
  left: 56px;
  z-index: 100000 !important;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 30px auto auto auto;
  grid-template-areas:
    'form1 usernames'
    'form2 usernames'
    'form3 usernames'
    'form4 usernames';
  height: 270px;
  gap: 0px 20px;
    align-items: start;
}

#List-UserNames {
  position: relative !important;
  grid-area: usernames !important;
}

.punbb #pun-navlinks #form-login span {
  grid-area: form1;
}

.punbb #pun-navlinks #form-login div {
  grid-area: form2;
}

.punbb #pun-navlinks #form-login input[type='submit'] {
  min-width: 102px;
  transform: none !important;
  grid-area: form3;
}

#pun-navlinks #form-login input[value='Войти'] + p {
  margin-bottom: 11px;
  margin-top: 11px;
  grid-area: form4;
}

.punbb #List-UserNames ul {
  padding-right: 10px;
  overflow: hidden;
  overflow-y: auto;
  max-height: 120px;
}

#pun-navlinks #navlogin #form-login {
  margin-left: 0px; /*Подвижки формы влево от вход*/
}
#pun-navlinks #navlogout #form-login {
  margin-left: 0px; /*Подвижки формы влево от выход*/
}
.ismoderator #pun-navlinks #navlogout #form-login {
  margin-left: 0px !important; /*Подвижки формы влево от выход для АМС*/
}
/*Стиль ссылок в форме "Не зарегистрированы" и "Забыли пароль" */
#pun-navlinks #form-login input[value='Войти'] + p {
  margin-bottom: 11px;
}
.punbb #pun-navlinks #form-login a.Rega,
.punbb #pun-navlinks #form-login a.Forgot {
    position: relative;
    z-index: 20;
    cursor: pointer;
    display: inline;
}
.punbb #pun-navlinks #form-login a.Rega:before,
.punbb #pun-navlinks #form-login a.Forgot:before {
  content: none !important;
}
/* Помечаем красным незаполненные поля!*/
#form-login input.none {
  outline: red dashed 2px !important;
}

.punbb #List-UserNames li {
  position: relative;
  transition: 0.33s;
  background: rgba(var(--col1), 0.5);
  text-align: left;
  padding: 2px 10px;
  margin-bottom: 5px;
  color: rgba(var(--col3));
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: 3px;
}

.punbb #List-UserNames li > b {
  font-weight: 400;
}

#List-UserNames ul li > span {
  display: inline-block;
  padding: 0 3px;
  position: absolute;
  opacity: 0.88;
  cursor: pointer;
  top: 0;
  bottom: 0;
  right: 2px;
}

/*Текст при отсутствии запомненных Ников!*/
#List-UserNames ul:empty:before {
  display: inline-block;
  content: 'У Вас нет запомненных ников, введенных через форму справо, или через перенос ниже!';
}
/*Кнопка выход-2*/
#navlogin #exit-2 {
  display: none;
}
#pun:not(.isguest) #navlogout .Rega,
#pun:not(.isguest) #navlogout .Forgot {
  display: none !important;
}
/*Стиль блока с инпутом для переноса и вставки запомненных Аккаунтов*/
#List-UserNames ul + span {
  display: inline-block;
  padding: 10px 0;
  text-align: left;
  font-size: 11px;
}

/*Стрелочки к инпуту*/
#List-UserNames ul + span b {
  font: normal normal 400 13px / normal Verdana;
  padding: 0 3px;
  color: #fcfaf5;
}
/*Кликалка слева, чуть выше инпута*/
#List-UserNames .a1-copy {
  display: inline-block !important;
  cursor: pointer;
  float: left;
}
/*Кликалка справа*/
#List-UserNames .a1-paste {
  cursor: pointer;
  display: inline-block !important;
  float: right;
}
/*Подсказки на кликалках*/
.tipsy.a11 {
  font: normal normal 400 11px / normal Roboto !important;
  margin-top: -22px !important;
  margin-left: 148px !important;
  max-width: 170px;
}
/************************* 
//Конец Стиля для Быстрой смены аккаунтов 
*************************/

Подпись автора

Поделиться52024-04-14 22:09:42

Автор: gayladriel
Администратор
фейт хэнсон, 45
is it too late to come on home? Сервис "РыбаТекст.рф" генерирует заданное количество абзацев более-менее осмысленного текста на русском языке. В англоязычном варианте классическим примером такого рыба-текста является Lorem Ipsum.
Последний визит:
2024-11-18 20:49:30
Сообщений: 327
Уважение: +1
доллары: 100000 $

низ

Код:

/* TABLA
--------------------------------------------------------------------------------------------------------------------------*/
.banners::-webkit-scrollbar,
.tblock act3 .text::-webkit-scrollbar,
.gosttext::-webkit-scrollbar,
.gost1::-webkit-scrollbar,
.vnen::-webkit-scrollbar,
.it2::-webkit-scrollbar,
.tem2::-webkit-scrollbar,
.itoginov .tposttext::-webkit-scrollbar,
.itoginov .tcit::-webkit-scrollbar,
.punbb #List-UserNames ul::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

/* plashki */
#pun-announcement plash {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 15px 0;
  flex-wrap: wrap;
}

#pun-announcement plash a,
#pun-stats .item1,
#pun-stats .item2,
#pun-stats .item4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(var(--col4), 0.5);
  border-radius: 3px;
  padding: 0px 7px;
  font-family: var(--font);
  text-transform: lowercase;
  color: rgba(var(--col3));
  font-size: 10px;
  font-weight: 500;
  height: 18px;
  line-height: 0;
  gap: 5px;
  min-width: 90px;
  transition: all 0.5s;
}

#pun-stats  strong {
   font-weight: 500;
}

#pun-stats .item4 a {
  color: rgba(var(--col3)) !important;
}

#pun-announcement plash a img {
  max-width: 16px;
  max-height: 16px;
}

#pun-announcement plash a:hover,
#pun-stats .item1:hover,
#pun-stats .item2:hover,
#pun-stats .item4:hover {
  background: rgba(var(--col4), 0.8);
  transform: translateY(-4px);
}

/* tabla blocks */
.tblock {
    position: absolute;
    top: 190px;
    left: 0;
    background-color: rgb(255 255 255 / 17%);
    width: 200px;
    height: 120px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
    padding: 7px;
    box-sizing: border-box;
    transition: all .5s;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.vnen,
.kom {
  background: rgba(var(--col3), 0.4);
}

#pun-announcement .tblock {
  position: fixed;
  top: 60px;
  z-index: -2;
}
.tblock {
  height: 120px;
  width: 170px;
}

.tblock:hover {
  background: rgba(var(--col3), 0.3);
  box-shadow: 0 0 10px rgba(var(--col2), 0.2);
}

.tblock.one {
  left: calc(50% - 440px);
}

.tblock.two {
  left: calc(50% - 250px);
}

.tblock.three {
  left: calc(50% + 220px);
}

/* tabla */
.tblock ams {
  font-family: var(--font);
  font-weight: 300;
  font-size: 12px;
  color: rgba(var(--col3));
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 5px;
  text-transform: lowercase;
}

.tblock ams img {
  transition: all 0.7s;
  transform: translateY(60px);
  display: block;
  position: absolute;
  top: 0;
  left: 1px;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.tblock ams a:hover img {
  opacity: 1;
  transform: translateY(30px);
  visibility: visible;
}

.tblock ams a:hover {
  color: rgba(var(--col2));
}

.tblock ams a:nth-child(2n) {
  font-style: italic;
}

.tblock navigation a {
  background: rgba(var(--col3), 0.3);
  padding: 3px;
  border-radius: 2px;
  width: inherit;
  text-align: center;
  white-space: nowrap;
  color: rgba(var(--col2));
  transition: all 0.2s;
}
.tblock navigation a:hover {
  transform: scale(1.1);
  background: rgba(var(--col3), 0.6);
}

.tblock navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 7px 0;
}

.tblock navigation span {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  font-family: var(--font);
  letter-spacing: 0.5px;
  font-weight: 500;
  font-size: 9px;
  text-transform: lowercase;
  width: 100%;
}

.tblock rpg {
  width: 100%;
  display: flex;
  justify-content: center;
  transition: all 0.7s;
  opacity: 0.3;
  z-index: 1;
}

.tblock rpg:hover {
  opacity: 1;
}

.tblock navigation .fas {
  margin-right: 3px;
  font-size: 8px;
  color: rgba(var(--col2), 0.7);
}

.tblock active {
  display: grid;
  grid-template-columns: 30px 70px 30px;
  justify-content: space-between;
  grid-template-areas: 'act1 act2 act3';
  gap: 12px;
}

.tblock active .act1:first-child {
  grid-area: act1;
}

.tblock active .act2 {
  grid-area: act2;
}

.tblock active .act1:last-child {
  grid-area: act3;
}

.tblock active .act1,
.tblock active .act1 img,
.tblock active .act2,
.tblock active .act2 img,
.tblock act3 .img,
.tblock act3 .img img,
.itoginov .tfl1 a,
.itoginov .tfl2 a,
.itoginov .tfl3 a,
.itoginov .tfl4 a,
.itoginov .tfl1 img,
.itoginov .tfl2 img,
.itoginov .tfl3 img,
.itoginov .tfl4 img,
.itoginov .ttan,
.itoginov .ttan img,
.itoginov .tep a,
.itoginov .tep img,
.itoginov .tpost1 a,
.itoginov .tpost1 img,
.itoginov .tcitp a,
.itoginov .tcitp img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  transition: all 0.4s;
}

.tblock active .act2,
.tblock active .act2 img {
  width: 70px;
}
.tblock act3 .img,
.tblock act3 .img img {
  height: 50px;
}

.itoginov .tfl1 a,
.itoginov .tfl2 a,
.itoginov .tfl3 a,
.itoginov .tfl4 a,
.itoginov .ttan,
.itoginov .tep a,
.itoginov .tpost1 a,
.itoginov .tcitp a {
  display: block;
}
.itoginov .tfl1 a,
.itoginov .tfl2 a,
.itoginov .tfl3 a,
.itoginov .tfl4 a,
.itoginov .tfl1 img,
.itoginov .tfl2 img,
.itoginov .tfl3 img,
.itoginov .tfl4 img,
.itoginov .tpost1 a,
.itoginov .tpost1 img,
.itoginov .tcitp a,
.itoginov .tcitp img {
  width: 36px;
  height: 41px;
}
.itoginov .ttan,
.itoginov .ttan img,
.itoginov .tep a,
.itoginov .tep img {
  width: 139px;
  height: 37px;
}

.tblock active .act1 img,
.tblock active .act2 img,
.tblock act3 .img img,
.itoginov .tfl1 img,
.itoginov .tfl2 img,
.itoginov .tfl3 img,
.itoginov .tfl4 img,
.itoginov .ttan img,
.itoginov .tep img,
.itoginov .tpost1 img,
.itoginov .tcitp img {
  filter: grayscale(1);
  object-fit: cover;
  mix-blend-mode: soft-light;
}

.tblock active .act1,
.tblock active .act2,
.tblock act3 .img,
.itoginov .tfl1 a,
.itoginov .tfl2 a,
.itoginov .tfl3 a,
.itoginov .tfl4 a,
.itoginov .ttan,
.itoginov .tep a,
.itoginov .tpost1 a,
.itoginov .tcitp a {
  background: linear-gradient(0deg, #9290a7, #b1b0c2);
  box-shadow: 0 0 10px inset rgb(212 212 252 / 50%), 0 0 5px rgba(var(--col4), 0.5);
  border: 1px solid #bdbdd2;
}

.tblock.three .act2 {
  cursor: default !important;
}

.tblock act3 {
  display: grid;
  grid-template-columns: 1fr 30px;
  grid-template-rows: 20px 1fr;
  grid-template-areas:
    'link img'
    'text img';
  margin-top: 10px;
  position: relative;
  gap: 7px;
  align-items: center;
}

.tblock act3 a {
  grid-area: link;
  z-index: 1;
  font-family: var(--font);
  font-weight: 300;
  color: rgba(var(--col3));
  display: flex;
  align-items: center;
  font-size: 10px;
  gap: 5px;
  line-height: 1;
}

.tblock act3 .text {
  grid-area: text;
  text-align: justify;
  overflow: auto;
  height: 31px;
  font-family: var(--font);
  text-transform: lowercase;
  font-size: 9px;
  color: #464662;
  padding-right: 7px;
}

.tblock act3 .img {
  grid-area: img;
  z-index: 1;
  transition: all 0.4s;
}

.tblock act3:before {
    content: '';
    position: absolute;
    top: 0;
    left: -7px;
    width: calc(100% + 14px);
    height: 20px;
    z-index: 0;
}

.tblock act3:before,
.quest,
.gostt {
  background: rgba(var(--col1), 0.3);
  border-bottom: 1px solid rgba(var(--col3), 0.3);
}

.tblock act3 a b {
  font-family: var(--font-fav);
  font-size: 12px;
  color: #312a60;
  font-weight: normal;
}

.tblock.three act3 {
  grid-template-columns: 30px 1fr;
  grid-template-areas:
    'img link'
    'img text';
}

.tblock.three act3 a {
  justify-content: flex-end;
}

.tblock act3:hover .img,
.tblock active a:hover {
  transform: translateY(-5px);
}

/* banners */
.banners {
  position: absolute;
  display: flex;
  gap: 7px;
  margin-top: 45px;
  left: 0;
  width: 100%;
  flex-wrap: wrap;
  overflow: auto;
  height: 34px;
}

.banners a {
  background: rgba(var(--col1));
  opacity: 0.5;
  height: 31px;
}

.banners img {
  mix-blend-mode: luminosity;
}

.banners a:hover {
  opacity: 1;
}

.banners a:hover img {
  mix-blend-mode: normal;
}

/* FUNCTIONAL
--------------------------------------------------------------------------------------------------------------------------*/
ul,
dl,
li,
dd,
dt {
  padding: 0px;
  list-style: none;
}

.modal-inner {
  padding: 10px;
}

/* mask */
#mask_dialog .inner,
.editBookmark,
#MyBookmarks,
.hvStickerPackModal {
  font-family: var(--font);
  text-transform: lowercase;
  letter-spacing: 0.5px;
  border-radius: 0 !important;
}

#mask_dialog .hv-mask-dialog-title,
.editBookmark h1,
#MyBookmarks h2,
#MyBookmarks h1 {
  color: var(--notify);
}

#mask_dialog form#mask_form {
  max-width: 480px;
}

/* bookmark */
.post .bookmark,
#BookmCntToggle.default-style {
  color: var(--notify) !important;
}

.editBookmark h1,
#MyBookmarks h2,
#MyBookmarks h1 {
  display: block !important;
  font-size: 14px;
  margin: 10px 10px 0 10px;
  text-align: center;
}

#MyBookmarks span.scrl {
  box-shadow: none !important;
  margin-left: 5px !important;
  width: 114px !important;
  text-shadow: none !important;
  background: #00000014 !important;
  transition: all 0.5s;
  line-height: 0 !important;
  padding: 0 !important;
  height: 20px;
  display: flex;
  justify-content: center;
}

#MyBookmarks span.scrl span:before {
  content: '\e5ce' !important;
  font-family: var(--mat);
  font-size: 20px;
  font-weight: 800;
}

#MyBookmarks span.scrl span {
  height: 100%;
  display: flex !important;
  align-items: center;
}

#MyBookmarks span.scrl.b span {
  transform-origin: 50% 50% !important;
}

#MyBookmarks span.scrl:hover {
  background: var(--col1) !important;
}

#MyBookmarks .BookmarkL > span.last_click {
  box-shadow: none !important;
  background: var(--bg-color) !important;
}

#MyBookmarks inner {
  padding-top: 30px !important;
}

/* smilies */
.hvStickerPackModalContent {
  border: 1px solid var(--col1);
  align-items: center;
  justify-content: start !important;
}

/* legends */
.adformal h2,
#viewprofile h2 span,
#profilenav h2,
#pun-adnav h2,
#pun-admain h2 span,
legend span,
legend strong {
  font-family: var(--font);
  font-weight: 300 !important;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  font-size: 14px !important;
  margin: 0px;
  position: relative;
  padding: 0 10px 2px 10px;
  color: rgba(var(--col3));
  text-shadow: 0 0 3px rgba(var(--col2), 0.5);
  background: rgba(var(--col1), 0.3);
  border-radius: 3px;
  text-align: center;
}

/* del, abbr, underline */
del {
  transition: all 0.5s;
  color: inherit;

}
del:hover {
  font: inherit;
}

abbr {
  border-bottom: 2px dotted var(--col1);
  text-decoration: none;
}

.bbuline {
  border-bottom: 1px solid;
  font-style: normal;
}

/* lines */
.post-content hr {
  border-top: none;
}

.post-sig dt {
  border-top: 1px solid;
  margin-bottom: 20px;
}

dd {
  line-height: 150%;
  margin-left: 0px;
}

.fs-box.inline,
.post-sig dt,
.post-content hr {
  border-color: rgba(var(--col5), 0.3) !important;
  opacity: 1 !important;
}

/* infoboxes */
.info-box,
.info {
  font-family: var(--font);
  text-transform: lowercase;
  color: rgba(var(--col2));
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  line-height: 15px;
}

/* TITLE, TOOLTIP / NOTIFICATIONS
--------------------------------------------------------------------------------------------------------------------------*/
#tooltip,
.tipsy-inner {
  z-index: 999999;
  border-radius: 0px !important;
  padding: 3px 7px;
  font-family: var(--font);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
}

#tooltip,
.tipsy-inner,
#respect figure .prof,
.tipsy-inner a {
  color: var(--pun) !important;
  text-decoration: none !important;
}

#tooltip {
  position: absolute;
  max-width: 200px;
  display: none;
}

#tooltip,
.tipsy-inner,
.num_msg,
.bubble,
.jGrowl-notification,
.jGrowl .messag_theme,
#messages-list a.Author {
  background: var(--notify) !important;
}

/* notifications */
.num_msg,
.bubble,
.jGrowl-notification,
.jGrowl .messag_theme,
#messages-list a.Author {
  text-shadow: none !important;
  font-weight: normal !important;
}

#navpm {
  position: relative;
}

.num_msg {
  margin: 0 !important;
  right: 17px;
  top: 14px;
  font-size: 8px !important;
  height: 10px !important;
  width: 15px !important;
  font-family: var(--font);
  font-weight: 900 !important;
  display: block !important;
  border-radius: 50% !important;
  color: rgba(var(--col3)) !important;
  padding: 0px !important;
  text-align: center;
}

.bubble {
  position: relative !important;
  top: -1px !important;
  right: -4px !important;
}

.notify-message .jGrowl-close {
  padding: 2px 5px !important;
}

/* ADMINSTYLE
--------------------------------------------------------------------------------------------------------------------------*/
#pun-admain legend span {
  padding: 0 !important;
  border: none;
  margin: 10px 0 0 -10px !important;
}

#pun-admain h2 span {
  white-space: nowrap;
}

#pun-adnav li,
#pun-adnav h2,
.adformal h2 {
  padding: 0 !important;
}

.adcontainer {
  padding-top: 20px;
}

.contains-textarea .adlabel {
  color: #000 !important;
}

#pun-admain fieldset p {
  font-size: 9px;
  letter-spacing: 0.5px;
  font-family: var(--font);
  text-transform: lowercase;
  margin: 10px 1px;
  background: #00000008 !important;
  border: none !important;
  outline: 1px solid var(--notify);
  border-left: 180px solid var(--notify) !important;
  min-height: 40px;
  padding: 10px !important;
}

#pun-adnav h2,
.adformal h2 {
  background-color: inherit !important;
  border: none !important;
}
.adcontainer {
  border: none !important;
}
#pun-admain1 form.adcontainer,
#pun-admain2 form.adcontainer,
#pun-admain-new form.adcontainer,
#pun-admain1 div.adcontainer,
#pun-admain2 div.adcontainer {
  padding: 0px !important;
}
#pun-adnav a {
  font-weight: normal !important;
}
.adformal h2 {
  margin-top: -20px !important;
}
#pun-admain fieldset {
  padding: 0 !important;
}
#pun-admain .adcontainer th {
  background-color: transparent !important;
}
#pun-admain .linksb {
  width: 733px;
  height: 40px !important;
}
#pun-admain .postlink {
  margin-top: -10px;
}

#pun-admain #form-buttons {
  display: block;
}

.punbb-admin thead tr {
  display: table-row;
}

#pun-adnav {
  position: sticky;
  top: 20px;
}

/* UP / DOWN
--------------------------------------------------------------------------------------------------------------------------*/
.go-up,
.go-down {
  cursor: pointer;
  opacity: 1;
  display: none;
  position: fixed;
  z-index: 9999;
  margin-left: 927px;
  bottom: 50%;
}
.go-up,
.go-down,
.go-up:before,
.go-down:before,
.go-up:after,
.go-down:after {
  width: 47px;
  height: 47px;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 5px 0;
}
.go-up:before,
.go-down:before,
.go-up:after,
.go-down:after {
  display: flex;
  justify-content: center;
  transition: all 0.5s;
}
.go-up {
  margin-bottom: 30px;
}
.go-up:before {
  content: '\f0de';
  align-items: flex-start;
}
.go-up:after {
  content: 'up';
}
.go-down {
  margin-bottom: -30px;
}
.go-down:before {
  content: 'down';
}
.go-down:after {
  content: '\f0dd';
}
.go-up:after,
.go-down:after {
  align-items: flex-end;
  margin-top: -47px;
}
.go-up:before,
.go-down:after {
  font-weight: 800;
  font-size: 22px !important;
}

/* THEMES
--------------------------------------------------------------------------------------------------------------------------*/
/* Анкета
-------------------------------------------------------------*/
.ank {
  background: url(https://forumstatic.ru/files/001a/a6/af/63761.png);
  width: 600px;
  height: 640px;
  text-align: center;
  position: relative;
}
.ank:before,
.prin:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(var(--col1));
  top: 0;
  left: 0;
  z-index: 0;
  mix-blend-mode: hue;
}
.aimg {
  position: absolute;
  margin-top: 130px !important;
  margin-left: 225px !important;
  background-blend-mode: luminosity !important;
  background-size: cover;
  border-radius: 14px;
  width: 150px !important;
  height: 150px !important;
  background-color: rgba(var(--col3));
}
.aank0 {
  overflow-y: auto;
  padding-right: 2px !important;
  font-family: roboto;
  text-transform: lowercase;
  font-size: 11px;
  padding-top: 9px !important;
  color: #151515;
  text-shadow: 1px 1px 0px #ffffff;
  line-height: 11px;
  letter-spacing: 0.4px;
}
.aank1 {
  position: absolute;
  width: 158px;
  height: 13px;
  margin-top: 204px !important;
  margin-left: 52px !important;
}
.aank2 {
  position: absolute;
  width: 158px;
  height: 13px;
  margin-top: 248px !important;
  margin-left: 52px !important;
}
.aank3 {
  position: absolute;
  width: 158px;
  height: 13px;
  margin-top: 248px !important;
  margin-left: 392px !important;
}
.aank4 {
  position: absolute;
  width: 158px;
  height: 13px;
  margin-top: 204px !important;
  margin-left: 392px !important;
}
.aank5 {
  position: absolute;
  width: 158px;
  height: 13px;
  margin-top: 158px !important;
  margin-left: 392px !important;
}
.aank6 {
  position: absolute;
  width: 158px;
  height: 13px;
  margin-top: 158px !important;
  margin-left: 52px !important;
}
.aname {
  position: absolute;
  width: 455px;
  height: 69px;
  overflow-y: hidden;
  line-height: 24px;
  margin-top: 47px !important;
  margin-left: 81px !important;
  font-family: roboto;
  font-weight: 700;
  font-size: 26px;
  color: #363d3c !important;
  text-shadow: 1px 1px 0px #ffffff;
  text-transform: uppercase;
  text-align: right;
  padding-top: 1px;
}
.aname:first-letter {
  color: var(--accent3);
}
.anameru {
  font-size: 15px;
  letter-spacing: 1px;
  color: #757575;
}
.abio1 {
  position: absolute;
  width: 489px;
  height: 328px;
  margin-top: 292px !important;
  margin-left: 56px !important;
  padding: 0px !important;
  font-family: arial;
  font-size: 11px;
  color: #151515;
  text-shadow: 1px 1px 0px #ffffff;
  line-height: 170%;
  overflow-y: auto;
  text-align: justify;
}
.abio2 {
  padding-right: 10px !important;
}
.abio1::-webkit-scrollbar,
.aank0::-webkit-scrollbar {
  width: 2px !important;
  height: 0px !important;
  border: none !important;
  background-color: #e5eaea !important;
}

/* Принятие
-------------------------------------------------------------*/
.prin {
  background: url(https://forumstatic.ru/files/001a/a6/af/82922.png);
  width: 600px;
  height: 220px;
  text-align: center;
  position: relative;
}
.prin1 {
  width: 539px;
  position: absolute;
  height: 39px;
  overflow-y: hidden;
  line-height: 24px;
  margin-top: 37px !important;
  margin-left: 30px !important;
  font-family: roboto;
  font-weight: 700;
  font-size: 26px;
  color: #363d3c !important;
  text-shadow: 1px 1px 0px #ffffff;
  text-transform: uppercase;
  text-align: center;
  padding-top: 1px;
}
.prin2 {
  font-size: 9px;
  letter-spacing: 1px;
  color: #757575;
}
.prin2 a {
  color: #757575;
}
.prin3 {
  position: absolute;
  width: 419px;
  height: 105px;
  margin-top: 79px !important;
  margin-left: 56px !important;
  padding: 0px !important;
  font-family: arial;
  font-size: 11px;
  color: #151515;
  text-shadow: 1px 1px 0px #ffffff;
  line-height: 180%;
  overflow-y: auto;
  text-align: justify;
}

/* Оформление оргтем / орги
-------------------------------------------------------------*/

/*-----— Шапки тем ------*/
.tem,
.it {
  background: url(https://forumstatic.ru/files/001a/a6/af/18647.jpg) repeat-y;
  width: 600px;
  position: relative;
  min-height: 140px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(var(--col1), 0.3), inset 0 0 10px rgba(var(--col3), 0.3);
  border: 1px solid rgba(var(--col3), 0.8);
  box-sizing: border-box;
  padding: 20px;
  margin: auto;
  font-family: var(--font);
  color: #181822;
}
.it {
  height: 350px;
}

.tem1,
.vnet,
.it1 {
  font-family: var(--font-fav);
  text-transform: lowercase;
  color: rgba(var(--col3));
  text-shadow: 0 0 5px rgba(var(--col2), 0.5);
}

.tem1 {
  font-size: 23px;
}
.it1 {
  font-size: 20px;
}
.vnet {
  font-size: 17px;
  margin: 15px 0;
}

.tem1:before,
.tem1:after,
.it1:before,
.it1:after {
  content: '—';
  margin: 0 7px;
  font-size: 17px;
  vertical-align: middle;
}

.tem2 {
  text-align: justify;
  line-height: 15px;
  margin: 15px 0;
}

.tem2 b,
.tem2 a,
.it2 b,
.itoginov .tposttext a {
  color: rgba(var(--col4));
}

/*------------------------переключатели в темах----------------------*/
.kom label {
  display: inline-block;
  width: auto;
  background: rgba(var(--col1), 0.5);
  margin: 0 5px;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: rgba(var(--col2));
  transition: all 0.5s;
}

.kom label:hover {
  background: rgba(var(--col1), 0.8);
}

.kom > div,
.kom > input {
  display: none;
}
.kom {
  text-align: center;
}
.kom input[type='radio']:checked + label {
  background: rgba(var(--col4), 0.5);
  color: rgba(var(--col3));
}
.kom > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.kom > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.kom > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.kom > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.kom > input:nth-of-type(5):checked ~ div:nth-of-type(5) {
  display: block;
  margin-top: 10px;
  text-align: justify;
}

/*-----------------------— внешности ----------------------*/
.vnen {
  overflow-y: auto;
  height: 148px;
  line-height: 17px;
  letter-spacing: 0.5px;
  font-size: 10px;
  color: rgba(var(--col2));
  margin-bottom: 30px;
}

vf a,
vm a,
vs a {
  padding: 1px 5px 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 600;
  margin-right: 2px !important;
}
vf a,
vs a {
  background: rgba(var(--col3), 0.5);
}
vm a {
  background: rgba(var(--col4), 0.5);
  color: rgba(var(--col3)) !important;
}

vf a:hover,
vs a:hover {
  background: rgba(var(--col3), 1);
}
vm a:hover {
  background: rgba(var(--col4), 1);
}

/*-----------------------— биржа ----------------------*/
.bir {
  width: auto;
  height: 120px;
  overflow-y: auto;
  font-size: 11px;
  font-family: arial;
  text-transform: lowercase;
  line-height: 140%;
  padding-top: 2px !important;
  padding-right: 5px !important;
}
.bir a {
  font-size: 11px;
  text-transform: lowercase;
  font-family: roboto condensed;
  margin-top: 20px !important;
}
.bir::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}
.birz {
  font-size: 16px;
  font-family: oswald;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 21px !important;
  margin-top: 12px !important;
  height: 5px;
  padding-top: 3px !important;
  width: auto;
  color: #92988b;
}

/*-----— Гостевая -------*/
.gost {
  background: url(https://forumstatic.ru/files/001a/a6/af/62307.jpg);
  width: 800px;
  height: 300px;
  position: relative;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(var(--col1), 0.3), inset 0 0 10px rgba(var(--col3), 0.3);
  border: 1px solid rgba(var(--col3), 0.8);
  box-sizing: border-box;
  font-family: var(--font);
}

.gosttext,
.gost1 {
  position: absolute;
  top: 20px;
  height: 200px;
}

.gosttext {
  text-align: justify;
  font-size: 10px;
  text-transform: lowercase;
  line-height: 14px;
  color: rgba(var(--col2));
  letter-spacing: 0.5px;
  overflow: auto;
  padding-right: 10px;
}

.gosttext,
.gostcode {
  width: 450px;
  box-sizing: border-box;
  left: 20px;
}

.gosttext span,
.gost1 span {
  display: block;
}

.gost1 {
  right: 20px;
  width: 260px;
  overflow: auto;
  padding-right: 10px;
  box-sizing: border-box;
  transform: scale(-1, 1);
}

.gost1 span {
  transform: scale(-1, 1);
  height: 100%;
}

.quest,
.gostt {
  margin: 0px -10px 10px -5px;
  padding: 3px 10px;
  box-sizing: border-box;
}

.quest.two,
.gostt {
  margin-top: 10px;
}

.quest.one,
.gostt:first-child {
  margin-top: 10px;
  border-radius: 5px 5px 0 0;
}

.gostcode {
  position: absolute;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gostcode .copy {
  border-radius: 3px;
}

.gostcode .copy:hover {
  background: rgba(var(--col5), 0.6) !important;
}

.gostt {
  text-align: center;
  font-family: var(--font-fav);
  text-transform: lowercase;
  color: rgba(var(--col4));
  font-weight: 600;
}

.quest:before {
  content: '?';
  font-size: 14px;
  margin-right: 5px;
  font-family: var(--font-fav);
  vertical-align: middle;
  color: rgba(var(--col3));
}

.gost1 a {
  margin-bottom: 5px;
  display: block;
  text-transform: lowercase;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(var(--col2));
}

.gostic {
  position: absolute;
  font-family: var(--font-awe);
  top: 20px;
  right: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 30px;
  font-size: 14px;
  font-weight: 100;
  text-shadow: 0 0 3px rgba(var(--col4), 0.6), 1px 1px rgba(var(--col3), 0.3);
}

.gostic a {
  color: rgba(var(--col4));
}

.gostic a:hover {
  font-weight: 600;
  color: rgba(var(--col4));
}

.gost-point {
  position: absolute;
  bottom: 17px;
  right: 60px;
  font-size: 9px !important;
  align-items: center !important;
}

.gost-point b {
  color: rgba(var(--col4)) !important;
  font-size: 12px !important; /*font-weight: 600 !important;*/
}

.gost:before,
.gost:after {
  position: absolute;
}

.gost:before {
  bottom: 19px;
  right: 262px;
  color: #3b347e !important;
  font-size: 35px !important;
}

.gost:after {
  bottom: 6px;
  right: 172px;
  color: #3c3c46 !important;
}

/*-- скрыть подписи в гостевой --*/
#topic_t5283 .post-sig {display: none !important;}



/*-----------------------— итоги недели ----------------------*/
/*--текст--*/
.itoginov .tposttext,
.itoginov .tcit {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(var(--col3), 0.2);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 7px;
  transition: all 0.5s;
}

.it2 {
  overflow-y: auto;
  position: absolute;
  width: 368px;
  height: 254px;
  top: 70px;
  right: 20px;
  line-height: 17px;
  padding-right: 10px;
  box-sizing: border-box;
}

/*--активисты--*/
.itoginov .tfl1,
.itoginov .tfl2,
.itoginov .tfl3,
.itoginov .tfl4 {
  position: absolute;
  top: 70px;
}

.itoginov .tfl1 {
  left: 20px;
}
.itoginov .tfl2 {
  left: 68px;
}
.itoginov .tfl3 {
  left: 116px;
}
.itoginov .tfl4 {
  left: 164px;
}

/*--тандем эп--*/
.itoginov .ttan {
  position: absolute;
  top: 123px;
}

.itoginov .tep {
  position: absolute;
  top: 172px;
  left: 61px;
}

.itoginov .ttan:after,
.itoginov .tep:before {
  position: absolute;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 37px;
  height: 37px;
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(var(--col3));
  text-transform: uppercase;
  line-height: 11px;
}

.itoginov .ttan:after {
  content: 'тандем недели';
  left: 145px;
}
.itoginov .tep:before {
  content: 'эпизод недели';
  left: -40px;
}

.itoginov .tpost1 {
  position: absolute;
  top: 221px;
}

.itoginov .tposttext,
.itoginov .tcit {
  position: absolute;
  width: 134px;
  height: 45px;
  overflow-y: auto;
  font-size: 10px;
  text-transform: lowercase;
  line-height: 13px;
  padding: 3px 7px !important;
}

.itoginov .tposttext {
  top: 220px;
  left: 68px;
}
.itoginov .tcit {
  top: 275px;
}
.itoginov .tcitp {
  position: absolute;
  top: 275px;
  left: 164px;
}

.it .tblock {
    margin-top: 20px;
    position: relative;
    left: auto;
    top: auto;
}

/*------------------------ личные страницы / лс ----------------------*/

.nls {
  position: relative;
  width: 900px;
  height: 540px;
  background: url(https://forumstatic.ru/files/001a/16/90/41027.png);
}
.ls0 {
  width: 900px;
  height: 540px;
}
.nls1 {
  background: url(https://forumstatic.ru/files/001a/16/90/41027.png);
}
.nls2 {
  background: url(https://forumstatic.ru/files/001a/16/90/87708.png);
}
.nls3 {
  background: url(https://forumstatic.ru/files/001a/16/90/17060.png);
}
.knopka {
  display: inline-block;
  width: 176px;
  height: 24px;
  cursor: pointer;
}
.nred {
  position: absolute;
  margin-left: -409px !important;
  margin-top: 36px !important;
  width: 20px;
  height: 21px;
  z-index: 99999;
}
.nprofile {
  position: absolute;
  margin-left: -441px !important;
  margin-top: 486px !important;
  width: 157px;
  height: 30px;
}
.nkn1 {
  position: absolute;
  margin-left: -450px !important;
  margin-top: 155px !important;
  z-index: 99999;
}
.nkn2 {
  position: absolute;
  margin-left: -450px !important;
  margin-top: 185px !important;
  z-index: 99999;
}
.nkn3 {
  position: absolute;
  margin-left: -450px !important;
  margin-top: 215px !important;
  z-index: 99999;
}
.lsname {
  font: 26px roboto;
  width: 401px;
  position: absolute;
  margin: 330px 0px 0px 176px !important;
  padding: 0 20px;
  text-align: center;
  color: #cccccc;
  text-shadow: 1px 1px 0px #000;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.lspstep {
  font: 12px roboto;
  width: 401px;
  position: absolute;
  margin: 380px 0px 0px 176px !important;
  padding: 0 20px;
  text-align: center;
  color: #cccccc;
  text-shadow: 1px 1px 0px #000;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.lspic {
  width: 245px;
  height: 245px;
  position: absolute;
  margin-left: 272px !important;
  margin-top: 56px !important;
  border-radius: 50%;
  background-color: #181e24;
  background-blend-mode: luminosity !important;
  background-size: cover;
}
.lsplashki {
  position: absolute;
  width: 280px;
  height: 382px;
  margin-top: 50px !important;
  margin-left: 619px !important;
  overflow-y: auto;
}
.lsplashki img {
  margin-top: 6px;
}
.lsplashki::-webkit-scrollbar {
  width: 2px;
  height: 0px;
  background: #12181c;
  border: none;
}
.lsplashki::-webkit-scrollbar-thumb {
  background: #eaeaec;
}
.lsicons {
  position: absolute;
  width: 710px;
  height: 60px;
  margin-top: 480px !important;
  margin-left: 190px !important;
  overflow-y: auto;
  line-height: 37px;
  text-align: left;
}
.lsicons img {
  margin-right: 6px;
}
.lsicons::-webkit-scrollbar {
  width: 2px;
  height: 0px;
  background: #eaeaec;
  border: none;
}
.lsicons::-webkit-scrollbar-thumb {
  background: #12181c;
}

.lsgms {
  text-align: left;
  width: 702px;
  height: 530px;
  margin-left: 176px !important;
  padding: 10px 10px 0px 0px;
  overflow-y: auto;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  -webkit-align-content: flex-start;
}
.lsgms::-webkit-scrollbar {
  width: 2px;
  height: 0px;
  background: #eaeaec;
  border: none;
}
.lsgms::-webkit-scrollbar-thumb {
  background: #12181c;
}

.gmt {
  text-align: left;
  font: 13px/13px roboto;
  letter-spacing: 0.2px;
  position: relative;
  margin-top: 160px !important;
  margin-bottom: 2px !important;
  margin-left: 0px !important;
  width: 147px;
  padding: 0 9px;
  height: 16px;
  overflow: hidden;
  color: #fff;
  z-index: 3;
}
.gmst {
  text-align: left;
  font: 8px/8px roboto;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  position: relative;
  width: 147px;
  height: 9px;
  padding: 1px 9px 0px 9px;
  overflow: hidden;
  color: #fff;
  z-index: 3;
}
gz {
  background: #f56c2d;
  padding: 1px 3px 0px 4px;
}
.gm {
  opacity: 0;
  width: 165px;
  height: 198px;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  background: url(https://i.imgur.com/tFJV15x.png);
  margin-top: -188px !important;
  position: relative;
  z-index: 5;
}
.gm:hover {
  opacity: 1;
}
.gmz {
  width: 150px;
  height: 178px;
  padding: 10px 5px 10px 10px;
  font-size: 10px;
  text-align: left;
  text-transform: lowercase;
  overflow-y: auto;
  color: #fefefe;
  text-shadow: none;
  font-family: roboto;
  line-height: 140%;
  letter-spacing: 0.4px;
}
.gmfl {
  width: 165px;
  height: 198px;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  color: #fefefe;
  text-shadow: none;
  font-family: roboto;
  line-height: 140%;
  letter-spacing: 0.6px;
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gmfl a {
  color: #fff;
}
.gmfl a:hover {
  color: #fff;
  opacity: 0.5;
}
.gmf {
  position: relative;
  height: 198px;
  width: 165px;
  margin: 5px !important;
}
.gmf0 {
  position: relative;
  height: 198px;
  width: 165px;
  margin: 5px !important;
  background-color: #000;
  background-blend-mode: luminosity !important;
  background-size: cover;
}
.gmz::-webkit-scrollbar-thumb {
  color: #fefefe;
}
.gmz::-webkit-scrollbar {
  width: 2px;
  height: 0px;
  background-color: #12181c;
  border: none;
}
.gmz s {
  opacity: 0.2;
  text-decoration: none;
}
.lsb11 {
  position: absolute;
  margin-left: 220px !important;
  margin-top: 47px !important;
  width: 66px;
  height: 70px;
}
.lsb12 {
  position: absolute;
  margin-left: 330px !important;
  margin-top: 47px !important;
  width: 66px;
  height: 70px;
}
.lsb13 {
  position: absolute;
  margin-left: 440px !important;
  margin-top: 47px !important;
  width: 66px;
  height: 70px;
}
.lsb21 {
  position: absolute;
  margin-left: 567px !important;
  margin-top: 47px !important;
  width: 66px;
  height: 70px;
}
.lsb22 {
  position: absolute;
  margin-left: 677px !important;
  margin-top: 47px !important;
  width: 66px;
  height: 70px;
}
.lsb23 {
  position: absolute;
  margin-left: 787px !important;
  margin-top: 47px !important;
  width: 66px;
  height: 70px;
}
.bo {
  filter: grayscale(1);
  opacity: 0.3;
}
.vvk {
  background: url(https://i.imgur.com/veNKh8b.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 214px !important;
  margin-top: 183px !important;
}
.vvs {
  background: url(https://i.imgur.com/UXcDtlQ.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 214px !important;
  margin-top: 228px !important;
}
.vkv {
  background: url(https://i.imgur.com/zD7fGi8.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 214px !important;
  margin-top: 273px !important;
}
.vkk {
  background: url(https://i.imgur.com/gs7JYwR.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 214px !important;
  margin-top: 318px !important;
}
.vks {
  background: url(https://i.imgur.com/lsohk8V.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 214px !important;
  margin-top: 363px !important;
}
.vsv {
  background: url(https://i.imgur.com/NHZxOFv.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 214px !important;
  margin-top: 408px !important;
}
.vsk {
  background: url(https://i.imgur.com/lzj6Xjc.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 376px !important;
  margin-top: 183px !important;
}
.vss {
  background: url(https://i.imgur.com/kQm2L9C.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 376px !important;
  margin-top: 228px !important;
}
.kvv {
  background: url(https://i.imgur.com/CoIo81s.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 376px !important;
  margin-top: 273px !important;
}
.kvk {
  background: url(https://i.imgur.com/vlkYKmt.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 376px !important;
  margin-top: 318px !important;
}
.kvs {
  background: url(https://i.imgur.com/p0PQ8tN.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 376px !important;
  margin-top: 363px !important;
}
.kkv {
  background: url(https://i.imgur.com/Db7ddy7.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 376px !important;
  margin-top: 408px !important;
}
.kks {
  background: url(https://i.imgur.com/T7XeyTO.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 538px !important;
  margin-top: 183px !important;
}
.ksv {
  background: url(https://i.imgur.com/JNOmwpW.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 538px !important;
  margin-top: 228px !important;
}
.ksk {
  background: url(https://i.imgur.com/YP1kh1T.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 538px !important;
  margin-top: 273px !important;
}
.kss {
  background: url(https://i.imgur.com/WkWAROH.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 538px !important;
  margin-top: 318px !important;
}
.svv {
  background: url(https://i.imgur.com/2cXtX5f.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 538px !important;
  margin-top: 363px !important;
}
.svk {
  background: url(https://i.imgur.com/ZKRjLxf.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 538px !important;
  margin-top: 408px !important;
}
.svs {
  background: url(https://i.imgur.com/WL78We3.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 700px !important;
  margin-top: 183px !important;
}
.skv {
  background: url(https://i.imgur.com/OEjBKqD.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 700px !important;
  margin-top: 228px !important;
}
.skk {
  background: url(https://i.imgur.com/pNHBgJv.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 700px !important;
  margin-top: 273px !important;
}
.sks {
  background: url(https://i.imgur.com/t7TbrOd.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 700px !important;
  margin-top: 318px !important;
}
.ssv {
  background: url(https://i.imgur.com/QqG4MHj.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 700px !important;
  margin-top: 363px !important;
}
.ssk {
  background: url(https://i.imgur.com/loV0dtR.png);
  width: 159px;
  height: 41px;
  position: absolute;
  margin-left: 700px !important;
  margin-top: 408px !important;
}
.vvv {
  background: url(https://i.imgur.com/WGPNMJx.png);
  width: 221px;
  height: 43px;
  position: absolute;
  margin-left: 214px !important;
  margin-top: 473px !important;
}
.kkk {
  background: url(https://i.imgur.com/ebpChUq.png);
  width: 221px;
  height: 43px;
  position: absolute;
  margin-left: 425px !important;
  margin-top: 473px !important;
}
.sss {
  background: url(https://i.imgur.com/uiftIIg.png);
  width: 221px;
  height: 43px;
  position: absolute;
  margin-left: 639px !important;
  margin-top: 473px !important;
}
.lskn1 {
  position: absolute;
  margin-left: 9px !important;
  margin-top: 454px !important;
  width: 157px;
  height: 21px;
  padding-top: 9px;
  font: 12px/12px roboto;
  letter-spacing: 0.4px;
  text-align: center;
  color: #fff;
}
.lskn2 {
  position: absolute;
  margin-left: 9px !important;
  margin-top: 494px !important;
  width: 157px;
  height: 21px;
  padding-top: 9px;
  font: 12px/12px roboto;
  letter-spacing: 0.4px;
  text-align: center;
  color: #53595f;
}
.kc1,
.kc2,
.kc3,
.kc4,
.kc5,
.kc6,
.kc7,
.kc8,
.kc9,
.kc10,
.kc11,
.kc12,
.kc13,
.kc14,
.kc15,
.kc16,
.kc17,
.kc18,
.kc19,
.kc20,
.kc21,
.kc22,
.kc23,
.kc24,
.kc25,
.kc26,
.kc27 {
  position: absolute;
  width: 10px;
  height: 10px;
  padding: 2px;
  font: 9px/9px roboto;
  text-align: center;
  color: #fff;
  background: #f56c2d;
  border-radius: 50%;
}
.kc1 {
  margin-left: 355px !important;
  margin-top: 186px !important;
}
.kc2 {
  margin-left: 355px !important;
  margin-top: 231px !important;
}
.kc3 {
  margin-left: 355px !important;
  margin-top: 277px !important;
}
.kc4 {
  margin-left: 355px !important;
  margin-top: 322px !important;
}
.kc5 {
  margin-left: 355px !important;
  margin-top: 367px !important;
}
.kc6 {
  margin-left: 355px !important;
  margin-top: 412px !important;
}
.kc7 {
  margin-left: 517px !important;
  margin-top: 186px !important;
}
.kc8 {
  margin-left: 517px !important;
  margin-top: 231px !important;
}
.kc9 {
  margin-left: 517px !important;
  margin-top: 277px !important;
}
.kc10 {
  margin-left: 517px !important;
  margin-top: 322px !important;
}
.kc11 {
  margin-left: 517px !important;
  margin-top: 367px !important;
}
.kc12 {
  margin-left: 517px !important;
  margin-top: 412px !important;
}
.kc13 {
  margin-left: 679px !important;
  margin-top: 186px !important;
}
.kc14 {
  margin-left: 679px !important;
  margin-top: 231px !important;
}
.kc15 {
  margin-left: 679px !important;
  margin-top: 277px !important;
}
.kc16 {
  margin-left: 679px !important;
  margin-top: 322px !important;
}
.kc17 {
  margin-left: 679px !important;
  margin-top: 367px !important;
}
.kc18 {
  margin-left: 679px !important;
  margin-top: 412px !important;
}
.kc19 {
  margin-left: 842px !important;
  margin-top: 186px !important;
}
.kc20 {
  margin-left: 842px !important;
  margin-top: 231px !important;
}
.kc21 {
  margin-left: 842px !important;
  margin-top: 277px !important;
}
.kc22 {
  margin-left: 842px !important;
  margin-top: 322px !important;
}
.kc23 {
  margin-left: 842px !important;
  margin-top: 367px !important;
}
.kc24 {
  margin-left: 842px !important;
  margin-top: 412px !important;
}
.kc25 {
  margin-left: 415px !important;
  margin-top: 477px !important;
}
.kc26 {
  margin-left: 616px !important;
  margin-top: 477px !important;
}
.kc27 {
  margin-left: 841px !important;
  margin-top: 477px !important;
}
.op {
  opacity: 0;
}

.lsgms1 {
  text-align: left;
  width: 880px;
  height: auto;
  padding: 10px 0 0px 0px;
  margin-left: 10px !important;
  overflow-y: auto;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}
.lsgms1::-webkit-scrollbar {
  width: 2px;
  height: 0px;
  background: #eaeaec;
  border: none;
}
.lsgms1::-webkit-scrollbar-thumb {
  background: #12181c;
}

/*----------- Акция для гостей ------------*/
.act {
  position: relative;
  text-align: center;
  overflow: hidden;
  width: 110px;
  height: 110px;
  border-radius: 100%;
}

.act img {
  border-radius: 100%;
  width: 100px;
  filter: grayscale(1);
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  mix-blend-mode: multiply;
  margin-top: 5px;
}

.act img:hover {
  width: 110px;
  filter: grayscale(0);
  mix-blend-mode: normal;
  margin-top: 0px;
}

.act,
.act0 {
  background: var(--bg-color);
}
.act0 {
  position: relative;
  text-align: center;
  overflow: hidden;
  width: 110px;
  height: 110px;
  border-radius: 100%;
}

.act0 img {
  border-radius: 100%;
  width: 100px;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: 0.5;
  margin-top: 5px;
}

.grey {
  position: relative;
  text-align: center;
  overflow: hidden;
  background: #767676;
  width: 110px;
  height: 110px;
  border-radius: 100%;
}

.grey img {
  border-radius: 100%;
  width: 100px;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: 0.5;
  margin-top: 5px;
}

/*---------------------- оформа эпизодов ------------------------*/

.epic0 {
  font-family: codepro;
  font-weight: 600;
  font-size: 10px !important;
  letter-spacing: 1.5px;
  margin: 4px 0 -8px 0 !important;
  height: 14px;
  padding-top: 3px;
}
.epic {
  padding: 12px 0 12px 0 !important;
  background-color: #a9a9a975;
  width: 550px;
  border: #d9d9d9 1px solid !important;
  margin: auto !important;
}
.epic img {
  border: #d9d9d9 1px solid !important;
  margin: auto !important;
  max-width: 550px !important;
  margin-left: -1px !important;
}

.side-song {
  position: relative;
  z-index: 5;
  margin: auto !important;
  width: 550px;
  height: 100px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  background-color: #a9a9a975;
  border-bottom-left-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
  border: #d9d9d9 1px solid;
  border-top: none !important;
}

.side-song-title {
  width: 100%;
  color: #756c6c;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  font-family: codepro;
  font-size: 8px;
  font-weight: bold;
}

.side-song-title b {
  font-size: 18px !important;
  font-weight: bold;
  color: #f4f4f4;
  letter-spacing: 2.5px !important;
  text-shadow: 1px 1px 0 #918d88;
}

.side-song-line {
  position: relative;
  width: 100%;
  height: 2px;
  margin: 10px 0px !important;
  border-radius: 5px;
  background-color: rgba(244, 244, 244, 0.5);
}

.side-song-dot {
  position: absolute;
  top: -4px;
  left: 0px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #f4f4f4;
  -webkit-animation: song 30s linear infinite;
}

@-webkit-keyframes song {
  0% {
    left: 0px;
  }

  10% {
    left: 0px;
  }

  80% {
    left: 98%;
  }

  100% {
    left: 98%;
  }
}

.side-song-icons {
  display: flex;
  align-items: center;
  color: #f4f4f4;
}

.side-song-icons svg {
  width: 16px;
  height: 16px;
  margin: 0px 5px;
}

.side-song-icons svg:nth-of-type(3) {
  width: 25px;
  height: 25px;
  fill: #f4f4f4;
}

Подпись автора

Поделиться62024-04-14 23:03:07

Автор: gayladriel
Администратор
фейт хэнсон, 45
is it too late to come on home? Сервис "РыбаТекст.рф" генерирует заданное количество абзацев более-менее осмысленного текста на русском языке. В англоязычном варианте классическим примером такого рыба-текста является Lorem Ipsum.
Последний визит:
2024-11-18 20:49:30
Сообщений: 327
Уважение: +1
доллары: 100000 $

зачеркнутй

Код:

del {
  text-decoration: none;
  transition: all 0.5s;
  background: rgba(var(--col1));
  color: rgba(var(--col1));
}
del:hover {
  font: inherit;
  color: inherit;
  background: transparent;
}