Код:

/* THEMES  BY BLANCHE
--------------------------------------------------------------------------------------------------------------------------*/

/* general */

guest,
faces,
roles,
skills,
news,
daily,
shop,
tinfo {
  width: 1000px;
  display: block;
  margin: auto;
  position: relative;
}
guest,
faces,
roles,
skills,
tinfo,
news,
daily,
#character,
shop {
  border: 1px solid var(--color-dark1);
  border-radius: 20px;
}

faces,
roles,
skills,
tinfo,
news,
daily,
shop {
  padding: 130px 40px 30px 40px;
}

faces_title,
roles_title,
skills_title,
tinfo_title,
news_title,
daily_title,
theme_title,
shop_title {
    width: 350px;
    height: 43px;
    margin: auto;
    position: absolute;
    top: 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    text-transform: lowercase;
    font-weight: 700;
    letter-spacing: 0.1em;
}

guest_txt,
faces_text,
roles_text,
skills_text,
tinfo_text,
news_text,
daily_text,
theme_text,
shop_text {
  letter-spacing: 0.1em;
  width: 540px;
  position: absolute;
  height: 80px;
  overflow: auto;
  font-size: 10px;
  line-height: 20px;
  color: var(--color-light1);
  padding-right: 10px;
}

faces_content,
roles_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
    background: url(https://forumstatic.ru/files/001c/a5/fe/44553.jpg) no-repeat center / cover;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
}

.guest_role,
faces_block,
roles_block,
skills #submenu1,
tinfo #submenu1,
daily_content,
.ls_block {
  border-radius: 10px;
  padding: 30px;
  position: relative;
  transition: all 0.3s;
}

faces_block,
roles_block,
.guest_role,
.ls_block {
    display: flex;
    justify-content: center;
}


faces_block,
roles_block,
.ls_block {
    background: rgba(18, 18, 18, 1);
}

faces_block:hover,
roles_block:hover,
.guest_role:hover,
shop_block:hover {
  border-color: rgb(var(--accent-secondary));
}

faces_block:hover:before,
roles_block:hover b,
guest_ams a:hover,
.guest_role:hover:before,
skills_block a:hover,
tinfo .menu1 span:hover,
tinfo .menu1 .tabactive1,
news_block:hover:before,
.daily_block:hover b,
shop_block:hover b{
  background: rgb(var(--accent-secondary));
}

.menu .tabactive,
.menu span:hover {
background: rgba(170, 110, 83, 1);
box-shadow: 0px 0px 13.7px 0px rgba(143, 103, 68, 1);
}

skills .menu1 span:hover,
skills .menu1 .tabactive1 {
  background: rgb(var(--accent));
  box-shadow: 0px 0px 13.7px 0px rgba(143, 103, 68, 1);
}

.guest_role span,
faces_block span,
roles_block span {
  height: 327px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  align-items: flex-start;
  overflow-x: hidden;
}

guest_ams a,
.guest_role:before,
roles_block b,
skills .menu1 span,
skills_block a,
tinfo .menu1 span,
news_block:before,
.daily_block b,
.ls_block.bag b,
.ls_block.pet b,
.ls_block.artifact b,
faces_block:before,
.guest_role b,
.lsposts,
plash_content b,
shop_block b,
shop_block span s, shop_block span u {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    color: rgb(var(--canvas-quarternary)) !important;
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: rgba(47, 47, 47, 1);
    border-radius: 10px;
    padding: 4px 13px;
    box-sizing: border-box;
    font-family: Spectral;
    font-weight: 500;
    font-style: Italic;
    font-size: 11px;
    line-height: 90%;
    text-align: center;
    text-transform: lowercase;
    transition: .3s ease; 
}

.ls_block.bag b {
    font-family: Spectral;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    text-align: left;
    width: 100%;
    justify-content: flex-start;
    background: transparent;
}

.ls_block.coupon b {
background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
    padding: 5px 15px 6px;
    font-family: Spectral;
    width: 100%;
    border-radius: 30px;
    font-weight: 600;
    font-size: 11px;
    line-height: 90%;
    text-align: center;
    text-transform: lowercase;
}

.menu span {
    transition: 0s ease; 
}

skills .menu1 span {
background: transparent
}

.guest_role a,
faces_block a,
roles_block a {
  transition: all 0.3s;
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #bbbaba !important;
  transform: translateZ(0);
}

/* .guest_role a:hover,
faces_block a:hover,
roles_block a:hover {
  transform: translateX(7px);
} */ 

.guest_role a i,
faces_block a i,
roles_block a i {
    font-weight: 700;
    font-style: normal;
    color: rgb(var(--canvas-quarternary));
    font-size: 12px;
    letter-spacing: 0;
    transition: all 0.3s;
}

.guest_role a i:after,
faces_block a i:after,
roles_block a i:after {
  content: "///";
  margin: 0 5px;
}

.guest_role a:hover i,
faces_block a:hover i {
  color: var(--color-accent2);
}

faces_block:before,
roles_block b,
.guest_role:before,
.ls_block:before,
shop_block b {
  position: absolute;
  top: -10px;
    box-shadow: 0px 0px 13.7px 0px rgb(var(--accent));
    background: rgb(var(--accent));
}

.ls_block:before {
font-family: Spectral;
    top: 8px !important;
    left: 21px;
    box-shadow: none;
    background: transparent;
    font-weight: 500;
    font-style: Italic;
    font-size: 20px;
    line-height: 120%;
}

.ls_block:not(.coupon):not(.achieve):not(.plash)::before {
left: 50%;
transform: translateX(-50%);
text-align: center;
}

/*-------------------------------------------------------------------------------------- faces */
faces,
skills,
tinfo {
  background: url(https://forumstatic.ru/files/001c/69/9f/50001.webp);
  height: 550px;
}

faces_title,
skills_title,
tinfo_title {
  right: 0;
}

skills_title {
    font-family: Spectral;
    font-weight: 500;
    font-style: Italic;
    font-size: 20px;
    line-height: 120%;
    color: white;
    top: 20px;
    left: 464px;
    right: auto;
}

faces_text,
skills_text {
  top: 25px;
}

faces_block b + a,
faces_block a + b {
  margin-top: 20px;
}

faces_block.male:before {
  content: "мужские";
}

faces_block.female:before {
  content: "женские";
}

faces_block b {
  font: 500 40px var(--font-fav);
  color: var(--color-accent4);
  text-transform: uppercase;
}

/*-------------------------------------------------------------------------------------- roles */

roles {
    background: url(https://forumstatic.ru/files/001c/a5/fe/98247.png) no-repeat top, #151515;
    height: auto;
    width: 920px;
}

roles_text {
    right: 72px;
    top: 50px;
    width: 830px;
    text-align: center;
    color: white;
}

roles_title {
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    color: white;
    font-family: Spectral;
    font-weight: 500;
    font-style: Italic;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
}

roles_block a i {
  color: var(--color-accent4);
}
roles_block a:hover i {
  color: #ffb362;
}

roles_block span {
  height: 148px;
}

/*-------------------------------------------------------------------------------------- skills */

skills {
    padding-top: 185px;
    background-image: url(https://forumstatic.ru/files/001c/a5/fe/24951.png);
    width: 1000px;
    height: 733px;
    border-radius: 10px;
    box-sizing: border-box;
}

skills_text {
    height: 100px;
    font-family: Pragmatica;
    font-weight: 400;
    font-size: 10px;
    line-height: 137%;
    color: white;
    left: 572px;
    top: 67px;
    width: 380px;
}

skills_block, tinfo_block {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap:6px;
  height: 435px;
  padding-right: 10px;
  overflow: auto;
}

skills_block b, tinfo_block b {
    color: white;
    display: block;
    letter-spacing: 0;
    font-family: Spectral;
    font-weight: 500;
    font-style: Italic;
    font-size: 20px;
    line-height: 120%;
}

skills_block a,
tinfo_block a,
.daily_block b {
  font-size: 8px;
}

skills_block a {
    background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
    flex-shrink: 0;
    height: 20px;
    font-family: Spectral;
    font-weight: 600;
    padding: 5px 0;
    font-size: 12px;
    line-height: 90%;
    text-align: center;
    color: white;
    text-transform: lowercase;
}

tinfo_block span {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  grid-column-start: 1;
  grid-row: -1/1;
  align-items: flex-start;
  justify-content: flex-end;
}

skills_block span {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    grid-column-start: 1;
    grid-row: -1 / 1;
    flex-direction: column;
}


.menu1 {
    display: flex;
    justify-content: center;
    gap: 10px 6px;
    flex-wrap: wrap;
    background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
    align-items: center;
    width: fit-content;
    border-radius: 40px;
    margin: 3px auto;
}

.menu1 span {
  cursor: pointer;
}

.submenutext1 {
  display: none;
}

skills .menu1 span {
    width: 150px;
    font-family: Spectral;
    font-weight: 700;
    font-size: 9px;
    line-height: 100%;
    box-sizing: border-box;
    padding-top: 7px;
    text-align: center;
    text-transform: uppercase;
    height: 31px;
    border-radius: 50px;
}

skills_block p {
    background: rgba(18, 18, 18, 0.4);
    border: 1px solid rgba(253, 253, 253, 0.1);
    padding: 12px 20px 15px;
    border-radius: 10px;
}

skills_block p,
tinfo_block p {
  font-size: 10px !important;
  letter-spacing: 0.05em;
  line-height: 150% !important;
  color: rgba(255, 255, 255, 1);
  display: grid;
  grid-template-columns: 1fr 600px;
  grid-template-rows: repeat(2, auto);
  gap: 5px 20px;
  font-family: var(--font) !important;
}

skills_block span b {
  display: none;
}


/*-------------------------------------------------------------------------------------- guestbook */
guest {
    height: 401px;
    background: url(https://forumstatic.ru/files/001c/a5/fe/12243.png);
    padding-top: 110px;
}

guest_txt {
    position: absolute;
    top: 121px;
    left: 80px;
    height: 180px;
    color: rgba(255, 255, 255, 1);
    overflow: auto;
    line-height: 1.4;
    padding-right: 10px;
    font-weight: 300;
    width: 308px;
}

guest glinks {
    position: absolute;
    display: flex;
    gap: 8px;
    bottom: 40px;
    left: 205px;
}

guest glinks a {
    background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
    font-family: Spectral;
    font-weight: 400;
    font-size: 11px;
    line-height: 90%;
    text-transform: lowercase;
    color: white !important;
    padding: 3px 8px;
    border-radius: 50px;
    transition: .3s ease;
}

guest glinks a:hover {
    color: rgb(var(--accent)) !important;
}

guest_txt span {
    font-family: Spectral;
    font-weight: 500;
    font-style: Italic;
    font-size: 20px;
    line-height: 120%;
    display: block;
    width: 193px;
    margin-bottom: -18px;
}


guest_txt a {
  color: white!important;
  font-weight: 700;
  transition: .3s ease;
}

guest_txt a:hover {
  color: #cfa98d !important;
}

.guest_role {
    position: absolute;
    width: 320px;
}

guest_ams {
    position: absolute;
    top: 196px;
    left: 679px;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

guest_ams span {
  position: relative;
}

guest_ams b {
    position: absolute;
    top: calc(100% + 10px);
    background: rgb(var(--canvas-quarternary), .5);
    backdrop-filter: blur(6px);
    border-radius: 5px;
    padding: 10px;
    font-size: 9px;
    text-align: center;
    left: calc(50% - 58px);
    transition: all 0.3s;
    width: 100px;
    transform: translateY(-30px);
    opacity: 0;
    visibility: hidden;
    font-weight: 400;
    line-height: 15px;
}

guest_ams span:hover b {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.guest_role.one {
    top: 266px;
    left: 95px;
}

.guest_role.two {
top: 266px;
    right: 95px;
}

/* .guest_role.one:before {
  content: "придержанные роли";
}

.guest_role.two:before {
  content: "придержанные внешности";
} */ 

.guest_role span {
  height: 98px;
}

guest_ams a {
    background: rgb(var(--accent));
    text-transform: lowercase;
    height: 16px;
    padding: 2px 10px 3px;
    box-shadow: 0px 0px 13.7px 0px rgb(var(--accent));
    font-family: var(--font-cat-title);
    color: white !important;
    font-weight: 600;
    font-size: 10px;
    line-height: 90%;
    text-align: center;
    text-transform: lowercase;
}

guest_ams a:hover {
    background: rgb(var(--canvas-primary));
    color: black !important;
}

guest_txt p {
  padding: 0 !important;font-size: 10px !important;line-height: 20px !important; display: none;
}

guest_txt p:before {
  content: "\002022";
  margin: 0 10px;
}

.guest_role b + a,
.guest_role a + b {
  margin-top: 10px;
}

/*-------------------------------------------------------------------------------------- news */

news {
    background: url(https://forumstatic.ru/files/001c/a5/fe/22141.png) no-repeat top, #151515;
    width: 600px;
    margin: 0 auto !important;
    padding: 70px 50px 30px 50px;
    border-radius: 11px;
}

news_title {
    font-family: Spectral;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
    font-style: italic;
    text-transform: lowercase;
    margin-top: 55px !important;
    width: 592px;
    height: 34px;
    color: white;
}

.ntxt news_title {
  color: var(--color-accent4);
}

news_text {
  grid-column: -1/1;
  position: relative;
  height: fit-content;
  padding: 0;
  width: 100%;
}

news_text a {
  color: var(--color-accent4);
}

news .activists {
    width: 135px;
    height: 40px;
    position: absolute;
    display: flex;
    bottom: 67px;
    top: auto;
    gap: 5px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#pun-viewtopic news .activists.one {
    left: 50px;
}
#pun-viewtopic news .activists.three {
right: 50px;
left: auto;
}

#pun-viewtopic news .activists.one::before,
#pun-viewtopic news .activists.three::before {
content: '';
position: absolute;
top: -37px;
width:114px;
height:43px;
background-position: center;
left: 50%;
transform: translateX(-50%);
}

#pun-viewtopic news .activists.one::before {
background-image: url(https://forumstatic.ru/files/001c/a5/fe/45868.png)
}

#pun-viewtopic news .activists.three::before {
background-image: url(https://forumstatic.ru/files/001c/a5/fe/74589.png)
}

news_content {
    display: grid;
    grid-template-rows: auto 80px;
    grid-template-columns: 1fr 240px 1fr;
    gap: 40px 20px;
    width: 600px;
    background: rgba(47, 47, 47, 1);
    box-sizing: border-box;
    margin-top: 58px !important;
    border-radius: 10px;
    color: rgb(var(--canvas-quarternary));
    padding: 20px 20px 47px;
}

news_content .activists:before {
  position: absolute;
  bottom: 30px;
}

news_content .activists:before {
  position: absolute;
  bottom: 30px;
}

news_block img {
  display: none;
}

news_block {
  display: flex;
  align-items: center;
  grid-column-start: 2;
  flex-direction: column;
  justify-content: space-between;
}

news_block a {
    font-size: 10px;
    color: var(--color-light1) !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 14px;
    background: url(https://forumstatic.ru/files/001c/a5/fe/52318.png);
    border-radius: 10px;
    box-sizing: border-box;
    width: 327px;
    flex-shrink: 0;
    height: 97px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 47px 12px 8px 104px;
    text-align: center;
}

news_content .activists.three {
  grid-column-start: 3;
  grid-row-start: 2;
}

news_content .activists.one {
  grid-column-start: 1;
  grid-row-start: 2;
}
/*-------------------------------------------------------------------------------------- ls */
.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
  backdrop-filter: blur(15px);
}

.reveal-modal .close-reveal-modal {
  position: absolute;
  top: -7px;
  right: -7px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--pun);
  font-weight: 800;
  font-size: 26px;
}
#character {
    visibility: hidden;
    position: absolute;
    z-index: 101;
    height: 530px;
    width: 1000px;
    background: url(https://forumstatic.ru/files/001c/a5/fe/73458.png);
}

#character * {
box-sizing: border-box;
}



.menu {
  display: flex;
  justify-content: center;
  gap: 15px;
  height: 24px;
  position: absolute;
  bottom: -34px;
}
.menu span {
    cursor: pointer;
    width: 31px;
    height: 31px !important;
    border-radius: 30px;
    padding: 0;
}
.submenutext {
  display: none;
  height: inherit;
}

.modal_wrap {
    display: flex;
    margin: 10px 0px;
    gap: 20px;
    color: white;
    height: 360px;
    flex-direction: column;
}

div#submenu {
  height: inherit;
}

ls_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  line-height: 14px;
  padding: 0 30px;
  position: relative;
}

ls_left **::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}


ls_ava {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: -20px;
}

ls_ava::before {
content: '';
position: absolute;
inset: 0;
background: rgb(var(--accent), .5);
border-radius: 50%;
}

ls_ava span,
ls_ava img {
  width: 100%;
  height: 100%;
}

ls_ava span {
  background: var(--color-accent2);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-accent1);
}

ls_ava img {
    filter: grayscale(1) sepia(1) hue-rotate(338deg) saturate(2) brightness(0.6);
}

ls_name {
    width: 100%;
    font-family: Spectral;
    font-weight: 500;
    font-style: Italic;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
}

ls_info {
    display: flex;
    flex-direction: row;
    overflow: auto;
    padding-right: 5px;
    gap: 15px;
    width: 100%;
    justify-content: center;
}

ls_info p {
    margin: 0;
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 10px;
    background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
    padding: 2px 25px 3px;
    border-radius: 50px;
}

ls_info p:before {
  content: "";
  width: 12px;
  height: 12px;
  display: inline-block;
}

ls_info p:nth-child(1):before {
  background: url(https://forumstatic.ru/files/001c/69/9f/10757.svg);
}

ls_info p:nth-child(2):before {
  background: url(https://forumstatic.ru/files/001c/69/9f/29769.svg);
}

ls_info p:nth-child(3):before {
  background: url(https://forumstatic.ru/files/001c/69/9f/60870.svg);
}

.menu span:before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.menu span {
background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
position: relative;
}

.menu span::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
top: 7px;
left: 7px;
}

.lspers::before {
background-image: url(https://forumstatic.ru/files/001c/a5/fe/22488.png);
}

.lsbag::before {
background-image: url(https://forumstatic.ru/files/001c/a5/fe/65017.png);

}

.lspet::before {
background-image: url(https://forumstatic.ru/files/001c/a5/fe/35940.png);

}

.lsinv::before {
background-image: url(https://forumstatic.ru/files/001c/a5/fe/33790.png);

}

span.lsposts {
    width: 100%;
    height: 38px;
    background: rgba(170, 110, 83, 1);
    position: absolute;
    width: fit-content;
    padding: 0 8px;
    border-radius: 50px;
    box-shadow: 0px 0px 13.7px 0px rgba(143, 103, 68, 1);
    box-sizing: border-box;
    left: 526px;
}

span.lsposts:before {
    content: "\f5ad";
    margin-right: 5px;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 700;
    font-size: 15px;
}

#submenu > div > div,
ls_content1 {
    display: flex;
    gap: 40px 20px;
    height: 250px;
    width: 910px;
    margin: 46px auto 0 !important;
    flex-direction: row;
    justify-content: center;
}

ls_content1 *{
box-sizing:border-box;
}

ls_content1 > div {
width: 300px;
height: 252px;
background: rgba(18, 18, 18, 0.4);
border: 1px solid rgba(253, 253, 253, 0.1);
box-sizing: border-box;
}

.ls_block.coupon:before {
  content: "купоны";
}

.ls_block.plash:before {
  content: "плашки";
}

.ls_block.achieve:before {
  content: "достижения";
}

.ls_block {
  padding: 20px 10px 10px 10px;
}

.ls_block.artifact {
  padding: 20px;
}
.ls_block.pet {
  padding: 30px 40px 10px 40px;
}

.ls_block.bag {
  padding: 20px 30px;
}

.ls_block:before {
  width: 140px;
}

.ls_block.coupon {
  grid-area: coupon;
}

.ls_block.achieve {
  grid-area: achieve;
}


.ls_block.bag:before {
  content: "инвентарь";
}

.ls_block.artifact:before {
  content: "артефакты";
}

.ls_block.pet:before {
  content: "питомцы";
}


scroll {
    overflow: auto;
    display: flex;
    align-content: flex-start;
    margin-top: 22px !important;
    height: 86%;
    width: 100%;
    gap: 10px;
    justify-content: center;
}

.ls_block.coupon scroll,
.ls_block.achieve scroll {
  flex-wrap: wrap;
}

.ls_block.plash scroll {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.ls_block.coupon scroll,
.ls_block.bag scroll {
  gap: 10px;
  justify-content: flex-start;
}

.ls_block.achieve img {
    height: 34px;
    width: 34px;
    object-fit: contain;
    transition: all .2s;
}

.ls_block.achieve img:hover {
    transform: scale(1.4);
}

.ls_block.achieve scroll {
    gap: 20px 14px;
    padding-top: 7px;
}

.ls_block.pet scroll {
  white-space: nowrap;
  overflow-y: hidden;
  justify-content: flex-start;
  padding-bottom: 20px;
  gap: 50px;
  width: 640px;
}

.ls_block.artifact scroll {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 10px 1px 1px;
    overflow-x: hidden;
    gap: 30px;
    flex-wrap: wrap;
}

.ls_block.artifact scroll span,
.ls_block.pet scroll span {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  position: relative;
}

.ls_block.pet scroll span {
    border: 1px solid rgba(253, 253, 253, 0.1);
    border-radius: 10px;
    padding: 10px;
    width: 275px;
    height: 155px;
    margin-top: 20px;
}

.ls_block.pet scroll span img {
    width: 57px;
    height: 57px;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    left: 16px;
    top: -20px;
    filter: grayscale(1) sepia(1) hue-rotate(338deg) saturate(2.2);
}

.ls_block.artifact scroll span {
    align-items: flex-start;
    width: 48%;
    border: 1px solid rgba(253, 253, 253, 0.1);
    border-radius: 10px;
    padding: 10px;
}

.ls_block.artifact scroll span img,
.ls_block.pet scroll span img {
  width: 57px;
  height: 57px;
  object-fit: contain;
}

ls_text {
  white-space: break-spaces;
  overflow: auto;
  text-align: justify;
  padding-right: 5px;
  width: 100%;
  font-size: 10px;
  line-height: 15px;
  font-weight: 300;
}

.ls_block.pet b {
    width: 75%;
    margin-left: 57px;
    text-align: center;
    background: transparent;
    font-family: Spectral;
    font-weight: 500;
    font-style: Italic;
    font-size: 14px;
    line-height: 120%;
    text-transform: none;
}

.ls_block.artifact scroll span:last-child:after,
.ls_block.pet scroll span:last-child:after {
  display: none;
}

.ls_block.pet ls_text {
  width: 236px;
}

.ls_block.artifact b {
    margin: 0px 0 0 -12px;
    font-family: Spectral;
    font-weight: 500;
    font-style: Italic;
    font-size: 14px;
    line-height: 120%;
    background: transparent;

}

.artifact ls_text {
  padding: 0 10px 10px 10px;
    height: 117px;
}

.ls_block.bag scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
  padding: 1px 10px 1px 1px;
}

.ls_block.bag span {
    border: 1px solid rgba(253, 253, 253, 0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    border-radius: 10px;
}

.bag ls_text {
  height: 117px;
}

plash_content {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
    overflow: auto;
    height: 510px;margin-top: 20px;
}

plash_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

plash_block span {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

plash_block i {
    font-size: 9px;
    font-style: normal;
}

theme_text.plashki {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
    font-size: 9px;
    letter-spacing: 0;
    line-height: 15px;
}

theme_text.plashki b {
    font-size: 12px;
    color: var(--color-accent1);
}

shop {
    background: url(https://forumstatic.ru/files/001c/69/9f/19199.webp);
    height: 997px;
    padding: 70px 30px 30px 30px;
}

shop_title {
    gap: 2px;
    color: var(--color-light2);
}

shop_title b {
    color: var(--color-accent4);
    font-weight: 600;
}

shop_text {width: 100%;display: grid;grid-template-columns: 460px 1fr;gap: 80px;align-items: center;height: fit-content;position: relative;padding: 0;letter-spacing: 0.05em;}

shop_text p {
    font-size: 11px !important;line-height: 15px !important
}

shop_text p:before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-accent4);
    margin-right: 10px;
}

shop_content {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,300px);
    gap: 40px 25px;
}

shop_block {
    background: url(https://forumstatic.ru/files/001c/69/9f/55068.jpg);
    border-radius: 10px;
    border: 1px solid var(--color-accent1);
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;transition: all .3s
}

shop_block i {
    font-size: 8px;
    font-weight: 600;
    font-style: normal;
    text-transform: lowercase;
    color: var(--color-light2);
    letter-spacing: 0.05em;
}

shop_block p {
    color: #B6B6B6;
    line-height: 15px !important;
    font-size: 10px !important;
    overflow: auto;
    padding-right: 10px;
    margin: 26px -10px 10px 0 !important;
}

shop_block span {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: -8px;
    position: relative;
}

shop_block b {
    position: relative;
}

shop_block span s, shop_block span u {
    text-decoration: none;
    font-size: 8px;
    padding: 3px 7px;
    height: 16px;filter: none; opacity: 1;
}
shop_block span s {
    background: var(--color-accent4);
}


tinfo {
    padding-top: 70px;
}

tinfo_text {
    position: relative;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 20px;
    width: 100%;
    align-items: center;
}

tinfo_block {
    display: grid;
    grid-template-columns: 120px 1fr;
    overflow-x: hidden;
    margin-top: 20px;
    height: 215px;
}

tinfo_block span {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

tinfo_block p {
    display: block;
}

tinfo_block b {
    margin: 20px 0 7px 0;
}

tinfo_block b:first-of-type {
    margin-top: 0;
}

tinfo #submenu1 {
    margin-top: 20px;
}

infnm {
    border-radius: 11px;
    border: 1px solid;
    padding: 2px 2px 8px 2px;
    text-align: center;
}

infnm:before {
    display: flex;
    width: 100%;
    height: 17px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-light2);
    margin-bottom: 5px;
}

infnm.one:before {
    content: 'глава дома';
    background: var(--color-accent4);
}

infnm.one {
    border-color: var(--color-accent4);
}

infnm, infnm a {
    color: var(--color-light1) !important;
}

infnm a.x {
    color: var(--color-gray1) !important;
}

infnm.two {
    border-color: var(--color-accent1);
}

infnm.two:before {
    background: var(--color-accent1);
    content: 'члены дома';
}

infnm.three {
    border-color: var(--color-gray2);
}

infnm.three:before {
    content: 'изгнанные';
    background: var(--color-gray2);
}

theme_text.plashki span > .spoiler-box, theme_text.plashki span > .spoiler-box > div, theme_text.plashki span > blockquote {
    width: 329px;
}

/* ШАБЛОН ВНЕШКИ */ 

section.appear-block {
width: 1000px;
height: 696px;
border-radius: 10px;
background: url(https://forumstatic.ru/files/001c/a5/fe/13539.png) no-repeat top, rgba(21, 21, 21, 1);
display: flex; 
flex-direction: column;
align-items: center;
color: white;
}

section.appear-block * {
box-sizing: border-box;
scrollbar-gutter: stable;
}

section.appear-block > h5 {
font-family: Spectral;
font-weight: 500;
font-style: Italic;
font-size: 20px;
line-height: 120%;
text-align: center;
margin: 29px auto 6px;
}

section.appear-block > desc {
font-family: Pragmatica;
font-weight: 400;
font-size: 10px;
line-height: 137%;
text-align: center;
display: block;
margin-top: 19px;
}

section.appear-block div.app-wrapper {
    width: 896px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
section.appear-block div.app-wrapper h5 {
    width: 100%;
    flex-shrink: 0;
    padding: 5px 20px 5px;
    display: flex;
    justify-content: center;
    margin: 17px 0;
}

section.appear-block div.app-wrapper h5 span {
background: rgba(170, 110, 83, 1);
box-shadow: 0px 0px 13.7px 0px rgba(143, 103, 68, 1);
border-radius: 50px;
padding: 5px 20px 5px;
font-family: Spectral;
font-weight: 600;
font-size: 10px;
line-height: 90%;
text-align: center;
text-transform: lowercase;
width: fit-content;
}

section.appear-block div.app-wrapper > div {
border: 1px solid rgba(253, 253, 253, 0.1);
background: rgba(18, 18, 18, 0.9);
padding: 18px 12px 18px 20px;
width: 215px;
height: 221px;
border-radius: 10px;
position: relative;
}

section.appear-block div.app-wrapper > div > div {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-right: 4px;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

section.appear-block div.app-wrapper > div > div a {
    color: #bbbaba;
    text-align: left;
    font-weight: 400;
    width: 100%;
}

section.appear-block div.app-wrapper > div > div a:hover {
color: white;
}

section.appear-block div.app-wrapper > div > div a i {
font-weight: 800;
padding-right: 5px
}

section.appear-block div.app-wrapper > div::before {
content: attr(data-title);
width: 100%;
top: -25px;
left: 0px;
background: linear-gradient(180deg, #C0AF9B 0%, #7D7061 100%);
font-family: Lordish;
font-weight: 400;
font-size: 36px;
line-height: 120%;
text-align: center;
position: absolute;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ШАБЛОН БАНК */ 

section.bank-items {
width: 1000px;
height: 644px;
position: relative;
background-image: url(https://forumstatic.ru/files/001c/a5/fe/79443.jpg);
border-radius: 10px;
}

section.bank-items * {
box-sizing: border-box;
scrollbar-gutter: stable;
}

.bank-tabs {
    position: absolute;
    left: 500px;
    top: 40px;
}

.bank-tabs input[type="radio"] {
    display: none;
}

.bank-tabs .bank-content {
    display: none;
    padding: 0px 0px 5px 0px;
    margin-top: 36px;
    width: 430px;
    height: 497px;
}

#bank-tab-1:checked ~ .bank-content-1,
#bank-tab-2:checked ~ .bank-content-2,
#bank-tab-3:checked ~ .bank-content-3 {
    display: block;
    animation: fadeEffect 0.5s; 
}

.bank-nav {
    display: flex;
    gap: 5px;
    position: absolute;
    top: -13px;
    width: 100%;
    justify-content: center;
}

.bank-nav label {
    cursor: pointer;
    padding: 12px 20px 12px;
    border-bottom: none;
    height: 31px;
    font-family: Spectral;
    font-weight: 700;
    font-size: 9px;
    line-height: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    border-radius: 50px;
    user-select: none;
    background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
}

.bank-nav label:hover {
    background: rgba(170, 110, 83, 1);
   box-shadow: 0px 0px 13.7px 0px rgba(143, 103, 68, 1);
}

#bank-tab-1:checked ~ .bank-nav label[for="bank-tab-1"],
#bank-tab-2:checked ~ .bank-nav label[for="bank-tab-2"],
#bank-tab-3:checked ~ .bank-nav label[for="bank-tab-3"] {
    background: rgba(170, 110, 83, 1);
   box-shadow: 0px 0px 13.7px 0px rgba(143, 103, 68, 1);
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

section.bank-items desc {
width: 198px;
font-family: Spectral;
font-weight: 500;
font-style: Italic;
font-size: 15px;
line-height: 110%;
color: white;
display: block;
position: absolute;
top: 207px;
left: 51px;
text-align: left;
}

section.bank-items ul {
width: 407px;
top: 474px;
left: 51px;
position: absolute;
font-size: 10px;
color: white;
}

section.bank-items ul li {
background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
border-radius: 30px;
padding: 2px 10px 3px;
margin-top: 10px;
font-family: Spectral;
font-weight: 600;
font-size: 10px;
line-height: 90%;
text-transform: lowercase;
}

section.bank-items ul li a {
color: white!important;
font-weight: 800;
}

.bank-content > div {
display: flex;
flex-direction: column;
gap: 10px;
overflow: auto;
height: 100%;
padding-right: 5px;
}

.bank-content > div > div {
border: 1px solid rgba(253, 253, 253, 0.1);
padding: 13px 23px;
border-radius: 10px;
color: white;
white-space: pre-line;
font-size: 11px;
background: rgba(18, 18, 18, 0.2);
}

.bank-content > div > div h5 {
font-family: Spectral;
font-weight: 500;
font-style: Italic;
font-size: 14px;
line-height: 120%;
}

.bank-content > div > div span {
background: rgba(47, 47, 47, 1);
display: block;
padding: 2px 6px;
width: fit-content;
border-radius: 50px;
font-family: Spectral;
font-weight: 500;
font-style: Italic;
font-size: 11px;
line-height: 90%;
text-align: center;
text-transform: lowercase;
}

.bank-content div.item {
padding-left: 100px;
position: relative;
background: rgba(18, 18, 18, 0.4);
}

.bank-content div.item span {
    position: absolute;
    left: 15px;
    top: 15px;
    background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
    padding: 4px 10px;
}

/* ШАБЛОН ДОМА */ 

section.great-houses {
width: 1000px;
height: 733px;
background-image: url(https://forumstatic.ru/files/001c/a5/fe/32069.jpg);
border-radius: 10px;
color: white;
padding-top: 1px;
display: flex;
flex-direction: column;
align-items: center;
}

section.great-houses * {
scrollbar-gutter: stable;
}

section.great-houses > h5 {
font-family: Spectral;
font-weight: 500;
font-style: Italic;
font-size: 20px;
line-height: 120%;
text-align: center;
width: 100%;
margin-top: 39px;
}

section.great-houses > desc {
display: block;
width: 867px;
font-size: 10px;
text-align: center;
}

.vtab-content {
    display: none;
    padding: 20px;
    width: 883px;
    height: 415px;
    opacity: 1;
    position: absolute;
    top: 255px;
    /* left: 50%; */
    transform: translateX(-50%);
    background: rgba(18, 18, 18, 0.4);
    border-radius: 10px;
}

.vtab-content.active {
  display: block;
}

.vtab-buttons {
    width: 850px;
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    height: 75px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 162px;
}

.vtab-btn {
  background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
  padding: 5px 10px;
  height: 31px;
  border-radius: 50px;
  margin-right: 5px;
  cursor: pointer;
  border: none;
  color: white;
font-family: Spectral;
font-weight: 700;
font-style: Bold;
font-size: 9px;
line-height: 100%;
text-align: center;
text-transform: uppercase;

}

.vtab-btn.active {
background:rgba(170, 110, 83, 1);
box-shadow: 0px 0px 13.7px 0px rgba(143, 103, 68, 1);
}

section.great-houses house {
    height: 120px;
    display: flex;
    flex-direction: column;
    padding-left: 184px;
    position: relative;
    width: 699px;
    gap: 10px;
}

section.great-houses house img {
position: absolute;
left: 0px;
top: 0px;
width: 133px;
height: 133px;
object-fit: contain;
}

section.great-houses house h5 {
font-family: Spectral;
font-weight: 500;
font-style: Italic;
font-size: 20px;
line-height: 120%;
}

section.great-houses house cl {
background: rgba(170, 110, 83, 1);
box-shadow: 0px 0px 13.7px 0px rgba(143, 103, 68, 1);
display: block;
padding: 3px 10px;
width: fit-content;
border-radius: 50px;
font-family: Spectral;
font-weight: 400;
font-size: 10px;
line-height: 90%;
text-transform: lowercase;
}
section.great-houses .vtab-content house cl a {
color: white!important;
font-weight: 600;
}

section.great-houses house desc {
    height: 63px;
    font-size: 10px;
    display: block;
    line-height: 140%;
    overflow: auto;
    padding-right: 8px;
}

.vtab-content > desc {
    white-space: pre-line;
    font-size: 10px;
    margin-top: 28px;
    display: block;
    width: 883px;
    height: 115px;
    overflow: auto;
    position: absolute;
    left: 20px;
}

.vtab-content desc span {
font-family: Spectral;
font-weight: 500;
font-style: Italic;
font-size: 14px;
line-height: 120%;
}

.vtab-content > div {
    display: flex;
    justify-content: center;
    position: absolute;
    gap: 10px;
    bottom: 20px;
}
.vtab-content > div members {
width: 415px;
height: 99px;
display: block;
border: 1px solid rgba(253, 253, 253, 0.1);
border-radius: 10px;
padding: 10px;
}
.vtab-content > div members h5 {
font-family: Spectral;
font-weight: 500;
font-style: Italic;
font-size: 14px;
line-height: 120%;
}

.vtab-content > div members div {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding-right: 10px;
    overflow: auto;
    height: 70px;
    margin: 8px 0;
    align-items: flex-start;
}

.vtab-content > div members div a {
background: linear-gradient(90deg, #151515 0%, #2F2F2F 100%);
padding: 1px 10px 3px;
border-radius: 50px;
color: white!important;
font-size: 10px;
}


/*-------------------------------------------------------------------------------------- theme */

theme {
    border: 1px solid #171717b0;
    display: block;
    border-radius: 0 0 5px 5px;
    background-image: url(https://forumstatic.ru/files/001c/69/9f/92387.jpg);
    background-color: rgb(var(--canvas-secondary));
    background-repeat: no-repeat;
    background-position: top left;
    padding: 34px 30px 30px 30px;
}

theme_title {
    background: url(https://forumstatic.ru/files/001c/69/9f/40088.svg);
    width: calc(100% + 60px);
    height: 24px;
    padding: 7px 180px 0;
    box-sizing: border-box;
    display: block;
    margin: 0 -30px !important;
    box-shadow: 0 9px 0 inset rgb(23 23 23);
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    color: #BF803D;
    font-size: 8px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.hideprofile theme_title {
  padding: 0 30%;
}

theme_text {
  position: relative;
  height: auto;
  display: block;
  color: var(--color-gray2);
  width: 100%;
  margin-top: 25px !important;
  letter-spacing: 0.05em;
  font-size: 11px;
}

theme.two {
  background-image: url(https://forumstatic.ru/files/001c/69/9f/52062.jpg);
}

theme.two theme_title {
  color: #5575B5;
}