#navigationblock
{
    padding-top: 10px;
    text-align: center;
    font-size: 32px;
    font-family: monospace;
    color: #eee;
    background: linear-gradient(0deg, rgb(37 37 37) 0%, rgb(255 255 255 / 15%) 100%);
    @media (max-width:920px) {padding-left: 12%;}
    @media (max-width:870px) {padding-left: 18%;}
}

.lichapterblock
{
    box-shadow: 0px 1px 0px #0000005c, 0px 2px 0px #ffffff17, -8px -10px 6px #00000014 inset;
    color: #7a9ff8;
}

.spanitemheadercenter
{
    line-height: 30px;
    /*height: 60px;*/
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    font-variant: all-petite-caps;
}

.ulchapterdisplay{
    line-height: 20px;
    margin: 0;
    max-height: 1110px;
    transform: rotateX(0deg) translate(2px, 0px);
    transform-origin: top;
    display: block;
    transition: all 200ms ease-in-out;
    overflow: hidden;
    border-radius: 0 0 0 10px;
    width: 100%;
}

.chapter {
    position: relative; /* Обеспечивает корректное отображение перемещаемого элемента */
}

.ulchapterdisplay li:hover{
    background: linear-gradient(90deg, #a7aad414, transparent);
    cursor: pointer;
    text-decoration: underline 1px;
}

.ulchaptercurrent{
    background: linear-gradient(90deg, #6269d554, #ffffff00);
    /*background: linear-gradient(90deg, #b3b39f, transparent);/*
}

.ulchapterdisplay li:active, .ulchapterdisplay li:focus{
    background: linear-gradient(90deg, #6269d554, transparent);
    /*background: linear-gradient(90deg, #b3b39f, transparent);*/
    
}


.ulchapterdisplay li::selection {
  background-color: #4d4d4d;
}

.ulchapterhide{
    line-height: 30px;
    margin: 0;
    max-height: 0px;
    transform: rotateX(90deg);
    transform-origin: top;
    display: block;
    transition: all 200ms ease-in-out;
}

.ulitemheadercenter
{
    line-height: 20px;
    height: 40px;
    display: inline-flex;
    align-items: center;
}

.liitemheadercenter
{
    box-shadow: 0px 1px 0px #0000005c, 0px 2px 0px #ffffff17, -8px 0px 10px #00000026 inset;
    max-height: 60px;
    display: block;
    cursor: pointer;
    padding: 5px;
    font-size: 1.1em;
    padding-left: 15px;
}

.liitemheadercenter:hover{
    box-shadow: rgb(0 0 0 / 36%) 0px 1px 0px, rgb(0 0 0 / 9%) 0px -2px 0px, rgb(204 204 204 / 15%) 8px 0px 10px inset;
}

.singlescaleableimage, .singlescaleablevideo{
    width: 25vw;
    background-size: cover;
    aspect-ratio: 1.76;
    float: right;
    border: 5px solid #333;
    margin: 20px;
    box-shadow: 8px 8px 8px #00000080;
    filter: grayscale(25%);
    opacity: 0.8;
    text-align: center;
    @media (max-width: 1420px) {width: 100%;}
    @media (max-width: 1420px) {margin: 0 auto;}
    @media (max-width: 1420px) {max-width: 90%;}
    @media (max-width: 1420px) {margin-bottom: 20px;}
    @media (max-width: 1420px) {min-height: 100px;}
    background-repeat: no-repeat;
    
}
.singlescaleableimage{
margin: 0.5vw; /*for proper scaling*/
box-shadow: 8px 8px 8px #00000080, -1px -1px 4px #5e5e5e, -4px -4px 1px #3e3e3e, 3px -4px 1px #363636;
border-radius:5px;
}

.singlescaleableimage:hover{
    filter: grayscale(0%);
    opacity: 1.0;
    cursor: pointer;
}
.singlescaleablevideo:hover
{
    filter: grayscale(0%);
    opacity: 1.0;
    cursor: pointer;
}


.borderimage{
    border: 24px solid transparent;
    /* border-bottom-width: 24px; */
    padding: 0px;
    border-image: url(images/border_sv2.png) 36 round;
    /*border-image-repeat: stretch;*/
    /*optional*/
    /*border-image-outset: 27px 0px 27px 0px;*/
    /*margin-bottom: 30px;*/
    
    box-shadow: none;
    border: 31px solid transparent;
    /* border-bottom-width: 24px; */
    padding: 0px;
    border-image: url(images/border_sv3.png) 36 round;
    border-image-repeat: stretch;
    /* border-image-outset: 27px 0px 27px 0px;*/
}

#nav_header
{
    /*text-align: justify;*/
    position: sticky;
    top: 0px;
    line-height: 30px;
    display: block;
    background-color: #434343;
    z-index: 11111111;
    box-shadow: 0px 10px 12px #434343;
}

#nav_header:after{
content: "";
  display: inline-block;
  width: 100%;
}

.nav_article_item{
    font-variant-caps: petite-caps;
    padding-left: 10px;
    color: #7a9ff8;
}

.editcontentbox{
    display: flex;
    float: right;
}

.editcontentbutton{
    width: 40px;
    height: 40px;
    background: #8f7474;
    cursor:pointer;
}

.addcontentbox{
    text-align: center;
    background: #668558;
    display: block;
    margin: 0 auto;
    font-size: 40px;
    font-variant: all-petite-caps;
    cursor: pointer;
}

.smthtentbutton{
    width: 40px;
    height: 40px;
    background: #3f7b6e;
    cursor:pointer;
}

.editForm{
    /*background: #353535;*/
    /* padding: 30px; */
    /* border: 40px solid #333; */
    /* box-shadow: 3px 3px 10px #000; */
    box-shadow: 0px 0px 20px #87e1ff;
    font-family: monospace;
}

.editForm:before{

}



.swagville_book{
    float: left;max-width: 30vw;object-fit: cover; position: relative;z-index: 111;
    transition: all 333ms ease;
    filter: drop-shadow(2px 2px 6px #0f0f00);
}

.swagville_book:hover{
    transform: matrix3d(1, 0, 0.2, 0.0002, -0.01, 0.995, 0.1, -0.0001, 0, 0, 1, 0, 0, -1, 0, 1);
    /*transform: matrix3d(1, 0, 0.2, 0.0001, -0.01, 0.9975, 0.1, -0.00005, 0, 0, 1, 0, 0, -1, 0, 1);*/
    cursor:pointer;
}

.description_substrate{
    width: 1270px;
    height: 490px;
    background-color: #8279627d;
    /*background: linear-gradient(133deg, rgb(227 217 166) 0%, rgb(185 117 28) 100%);*/
    /*background: linear-gradient(133deg, rgb(227 217 166 / 70%) 0%, rgb(185 117 28) 100%), url(https://swagville.site/images/dodgeball_book.png);*/
    background: linear-gradient(133deg, rgb(227 217 166 / 70%) 0%, rgb(185 117 28) 100%);
    background-size: 150% 400%;
    background-position: 0% 10%;
    background-position-x: -250px;
    
    border-radius: 10% 0 0 10%;
    position: absolute;
    top: 35px;
    right: 0px;
    max-width: 100vw;
    box-shadow: 4px 4px 1px #d9bf4c inset, 0px -4px 1px #d9bf4c inset, 5px 5px 3px #000000 inset, 0px -5px 3px #000000 inset;
    opacity: 0.25;
    @media (min-width:2400px) {display: none;}
    @media (max-width:1880px) {width: 860px;}
    @media (max-width:1840px) {width: 830px;}
    @media (max-width:1880px) {height: 520px;}
    @media (max-width:1800px) {display: none;}
}

.description_substrate_text span{
    display: inline;
    color: #ddd2a5;
    background-color: #66614d;
    border-radius: 10px;
    padding-left: 10px;
    margin-left: -10px;
    padding-right: 10px;
    margin-right: 10px;
    
    @media (max-width:1800px) {color: #bab6a9;}
    @media (max-width:1800px) {background-color: #514d48;}
    
}

.description_substrate_text span:hover{
    background-color: #8a846c;
    color: #fce898;
    cursor:pointer;
}

.imageDescFlex{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    margin: 0.8vw; /*for proper scaling*/
    flex-direction: column;
    float: right;
    text-align: center;
    @media (max-width: 1420px) {margin: 0;}
}

.subitemflextworows{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;
    @media (max-width: 1420px) {flex-direction: column;}
    @media (max-width: 1420px) {margin-top: 100px;}
}

.subitemflextworowsreverse{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;
    @media (max-width: 1420px) {flex-direction: column;}
    @media (max-width: 1420px) {margin-top: 100px;}
}

.nouppergap{
    margin-top: 0px;
    padding-top: 0px;
    @media (max-width: 1420px) {margin-top: 10px !important;}
}

.underbordershadow{
    box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 27%), 0px 3px 0px 0px rgba(140, 140, 140, 0.27);
}

.boxshadowleft
{
    background: linear-gradient(90deg, rgb(0 0 0 / 50%) 0%, rgb(255 255 255 / 5%) 100%);
}

.boxshadowright
{
    background: linear-gradient(270deg, rgb(0 0 0 / 50%) 0%, rgb(255 255 255 / 5%) 100%);
}

.boxroundedtop
{
    border-radius: 20px 20px 0 0;
}

.boxroundedbottom
{
    border-radius: 0 0 20px 20px;
}


.contentlanguageswitcher{
    position: fixed;
    bottom: 30px;
    text-align: center;
    z-index: 11;
    background-color: #191919;
    /* display: inline; */
    width: auto;
    font-size: 2em;
    width: 1227px;
    display: flex;
    margin-left: -30px;
    align-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    display:none;
}

.previewlanguagewrap{
    overflow: inherit;
    position: absolute;
    height: 100px;
    right: 50px;
}

.gradient-article-image{
    width: 1220px;
    height: 31vw;
    max-height: 1000px;
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    mix-blend-mode: screen;
    margin-left: -20px;
    margin-top: -20px;
    margin-left: -15px;
    z-index: 0;
    filter: saturate(0.25) brightness(2) contrast(1.5) blur(3px);
    opacity: 0.25;
    box-shadow: 0px 0px 31px #000 inset;
    pointer-events: none;
}

.imagearrow{
    position: absolute;
    left: -20%;
    top: 34%;
    font-size: 6em;
}

.commandtext{
    display: inline;
    color: #fff;
    font-weight: bold;
    font-variant: all-petite-caps;
    font-size: 1.5em;
    line-height: 1em;
    text-decoration: underline;
}

.steambutton::selection{
  color: red;
  background-color: #416514;
}

.subitemgold{
    text-align: left;
    margin-top: 30px;
    display: block;
    font-size: 20px;
    color: #fff;
    /* background-color: #ffffff29; */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.32) 0%,rgba(63, 67, 75, 0.48) 100%);
    padding: 5px;
    padding-left: 10px;
    border-radius: 5px;
    box-shadow: #222225a3 220px -4px 78px inset, #222225aa 0px 4px 58px inset, rgba(0, 0, 0, 0.25) 4px 4px 8px, rgba(0, 0, 0, 0.25) -1px -1px 0px;
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.51);
    
    color: #ffd400;
    background: #ffb300;
}

.subitemcontentgold{
    background: #7d5d1647;
    color: #ffe2a1;
    padding: 10px;
    border-radius: 3px 3px 10px 10px;
}

.leftsideredbanner{
    background-color: #524444;
    padding: 10px;
    padding-left: 20px;
    border-radius: 15% 0 0 15%;
    display: flex;
    color: #ffdbdb;
    border: 2px dashed #fbd7d73b;
    border-right-style: hidden;
    box-shadow: -6px 6px 0px #524444, -6px -6px 0px #524444, 6px -6px 0px #524444, 6px 6px 0px #524444;
    translate: 14px 26px;
}

.rightsideredbannerabs{
    background-color: rgb(82 68 68);
    background: linear-gradient(160deg, #524444 0%, #625353 50%, #524444 100%);
    padding: 10px;
    padding-left: 20px;
    border-radius: 15% 0 0 15%;
    display: flex;
    color: #ffdbdb;
    border: 2px dashed #fbd7d73b;
    border-right-style: hidden;
    box-shadow: -6px 6px 0px #524444, -6px -6px 0px #524444, 6px -6px 0px #524444, 6px 6px 0px #524444;
    translate: 50px 0px;
    filter: hue-rotate(30deg);
    position: absolute;
    padding-right: 5%;
    font-family: tf2secondary;
    font-size: 1.15em;
    text-align: justify;
    @media (max-width:1420px) {
        text-align: left;
        flex-direction: column;
        padding-bottom: 20px;
        border-radius: 5% 0 0 5%;
    }
}

.absparentheight{
    /*height: calc(100vh - 15vw);*/
    height: calc(24rem - 15vw);
}

.rightsideredbannerlabel{
    width: 0px;
    height: auto;
    background: #3330;
    float: right;
    display: block;
    margin-right: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    max-width: 40vw;
    
    @media (max-width:1420px) {
        min-height: 100px;
        translate: -110px 50%;
        position: absolute;
        max-width: 100px;
    }
}

.booknavbg{
    width: 12px;
    height: 20%;
    height: calc(2vw - 0.5vh*5);
    height: 12px;
    background-repeat: no-repeat;
    display: inline-flex;
    position: absolute;
    bottom: 20px;
    background-image: url(https://swagville.site/images/dodgeball_book.png);
    background-size: 130%;
    filter: grayscale(1) blur(0.05px);
    opacity: 0.1;
    mix-blend-mode: lighten;
    transform: translate(20%, 80%) scale(22.5);
    /* transform: scaleY(1.5); */
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 0, 0, 0) 0%, rgb(0, 0, 0) 140%), url(https://swagville.site/images/dodgeball_book.png);
}

/*@media screen and (-webkit-min-device-pixel-ratio:0) {*/
@-moz-document url-prefix() {
.petite {
    font-size: .9em 
 }
}

.contentBoxContent conclusionWhite, .conclusionWhite {
    min-height: 12px;
    margin: 11px auto 9px auto;
    padding: 15px;
    font-size: 26px;
    text-align: left;
    line-height: 32px;
    /*border-radius: 50px 10px 10px 50px;*/
    border-radius: 160px 10px 10px 50px;
    box-shadow: #11111188 -2px -2px 8px inset, #11111188 2px 2px 8px inset, rgba(0, 0, 0, 0.25) 1px 1px 0px, rgba(0, 0, 0, 0.25) -1px -1px 0px;
    /*text-shadow: 1px 1px 2px rgb(255 255 255 / 30%);*/
    text-shadow: 1px 1px 2px rgb(255 242 229 / 50%), 1px 2px 2px rgb(0 0 0 / 35%);
    color: #333;
    font-family: "tf2secondary";
    background: rgb(124 124 124);
    
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    /*background: linear-gradient(90deg, rgb(102 102 102) 140px, rgb(124 124 124) 150px);*/
    background: linear-gradient(90deg, rgb(118 118 118) 145px, rgb(255 255 255 / 43%) 150px, rgb(124 124 124) 150px, rgb(131 131 131) 1500px);
}

.conclusionImage{
    width: 128px;
    height: 128px;
    /* background: #333; */
    display: block;
    min-width: 128px;
    background-image: url(images/robot_thumb_up.png);
    background-size: contain;
    filter: drop-shadow(2px 4px 3px #00000088);
    background-position: 5px 5px;
}

.conclusionContent a, .paperScroll a {
    text-shadow: none;
}

.conclusionContent{
    display: flex;
    max-width: 95%;
    padding-left: 20px;
    font-style: italic;
    font-variant: all-small-caps;
    font-size: 1.3em;
    text-align: justify;
    @media (max-width:1420px) {text-align: left;}
    font-family: monospace;
    /*
    text-decoration-line: underline;
    text-decoration-thickness: from-font;
    text-decoration-color: #646464;
    */
}

.play-button_subitem{
    color: #fff;
    position: absolute;
    top: 0%;
    z-index: 1111;
    font: 48px/1.5 sans-serif;
    color: white;
    text-shadow: 3px 3px 20px black;
    filter: drop-shadow(2px 4px 6px black);
    width: 100%;
    left: 0%;
    line-height: 0px;
    height: 100%;
    pointer-events: none;
}

.hintblock {
    display: inline-block;
    cursor: pointer;
    border-bottom: 1px dotted #ccc;
}

.hintcontent {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    /*white-space: nowrap;*/
    z-index: 1000;
    transform: translate(-50%, -100%);
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.25s linear, opacity 0.25s linear;
    transition-delay: 0.1s;
    /*pointer-events: none;*/ /* Чтобы блок не мешал событиям */
    pointer-events: auto; /* Позволяем взаимодействие с hintcontent */
    max-width: 300px;
    max-width: 25vw;
    min-width: 250px;
    /*white-space: normal;*/
}

.hintblock:hover .hintcontent {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s linear;
    /*pointer-events: auto;*/ /* Включаем события */
}

.serverthumbnailmini{
    width: 95%;
    display: block;
    /* height: 50px; */
    background-color: #111;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    /* border: 3px solid #888; */
    border: 3px solid #353a3a;
    background: rgba(198, 226, 255, 0.2);
    -webkit-box-shadow: #000000 2px 2px 2px inset, #000000 -2px -2px -2px;
    -moz-box-shadow: #000000 2px 2px 2px inset, #000000 -2px -2px -2px;
    box-shadow: #222225 -110px -4px 58px inset, #222225aa 0px 4px 58px inset, rgba(0, 0, 0, 0.25) 1px 1px 0px, rgba(0, 0, 0, 0.25) -1px -1px 0px;
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.51);
    margin: 0px auto 20px auto;
    padding: 0px 10px 0px 18px;
    max-width: 100%;
    /* position: relative; */
    /* bottom: 50px; */
    font-family: tf2build, impact;
    text-align: center;
    text-align: left;
    color: #E8E8E8;
    line-height: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    min-height: 25px;
    border-radius: 8px;
    padding-left: 10px;
    cursor: pointer;
}

#translatecontainer
{
    display: flex;
    float: right;
    right: 0% /*9% to initially show*/;
    top: 20px;
    position: fixed;
    z-index: 655;
    background-color: #0000003d;
    border-radius: 9px;
    padding: 2px 4px 2px 4px;
    border: 2px solid #333;
    transition: all 333ms cubic-bezier(0.31, 1.69, 0.9, 0.91);
}

.translateheader
{
    font-family: "tf2secondary";
    font-size: 20px;
    top: -16px;
    position: absolute;
    text-shadow: 1px 1px 2px #000, 1px 1px 2px #000, 0px 0px 4px #000;
}