.fabric {
    display:inline-block;
    width:39px;
    height:39px;
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFD983" d="M32 0H10C7.791 0 6 1.791 6 4v24H4c-2.209 0-4 1.791-4 4s1.791 4 4 4h24c2.209 0 4-1.791 4-4V8c2.209 0 4-1.791 4-4s-1.791-4-4-4z"/><path fill="#E39F3D" d="M8 10h24V8H10L8 7z"/><path fill="#FFE8B6" d="M10 0C7.791 0 6 1.791 6 4v24.555C5.41 28.211 4.732 28 4 28c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4V7.445C8.59 7.789 9.268 8 10 8c2.209 0 4-1.791 4-4s-1.791-4-4-4z"/><path fill="#C1694F" d="M12 4c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2M6 32c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2m24-17c0 .552-.447 1-1 1H11c-.552 0-1-.448-1-1s.448-1 1-1h18c.553 0 1 .448 1 1m0 4c0 .553-.447 1-1 1H11c-.552 0-1-.447-1-1s.448-1 1-1h18c.553 0 1 .447 1 1m0 4c0 .553-.447 1-1 1H11c-.552 0-1-.447-1-1s.448-1 1-1h18c.553 0 1 .447 1 1m0 4c0 .553-.447 1-1 1H11c-.552 0-1-.447-1-1 0-.553.448-1 1-1h18c.553 0 1 .447 1 1"/></svg>') no-repeat center / contain;
}

#serverMap {
    margin-left:65px;
    width:calc(100% - 65px);
    height:100vh;
}

#mainHeader {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    overflow:hidden;
    width:64px;
    background:url('../img/menu.png') no-repeat left top / 312px auto;
    transition:all 0.3s ease;
    z-index:10;
    display:flex;
    flex-direction:column;
    text-align:left;
}

#mainHeader:before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: rgba(20,20,20,0.75);
    z-index:-2;
}

#mainHeader:after {
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:64px;
    bottom:0;
    background: rgba(20,20,20,0.75);
    z-index:-1;    
}

#mainHeader.active, #mainHeader:hover {
    width:275px;
}

#mainLogo {
    width:275px;
    height:76px;
    background:url('../img/mainlogo.svg') no-repeat left center / contain rgba(20,20,20,.75);
    border-bottom:2px solid #fff;
    margin-bottom:20px;
}

#mainHeader .top {
    flex-grow:1;
}

#mainHeader nav a {
    display:flex;
    margin:0 8px 20px 8px;
    padding:0;
    align-items:center;
    border-radius:20px;
    transition:all .3s ease;
    height:49px;
    font-size:21px;
    background:linear-gradient(90deg,rgba(20,20,20,0) 0, rgba(20,20,20,0) 56px, rgba(20,20,20,.75) 56px,rgba(255,145,221,.5));
}

#mainHeader nav a .text {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-grow:1;
    height:49px;
    border-radius:0 20px 20px 0;
    /*text-indent: -9999px;*/
    transition: all .3s ease;
    overflow:hidden;
    color:rgba(255,255,255,0.35);
}

#mainHeader:hover nav a .text, #mainHeader.active nav a .text {
    text-indent:0;
}

#mainHeader nav a .img {
    flex-shrink:0;
    display:block;
    width:39px;
    height:39px;
    margin-right:11px;
    margin-left:6px;
    background:no-repeat left center / 39px ;
    content:'';
}

#mainHeader nav a.active{
    background:/*linear-gradient(90deg,rgba(101,71,202,.6),rgba(255,145,221,.6)),*/linear-gradient(90deg,rgba(101,71,202,.75),rgba(255,145,221,.5)),
    linear-gradient(90deg,rgba(20,20,20,0) 0, rgba(20,20,20,0) 56px, rgba(20,20,20,.75) 56px,rgba(255,145,221,.5));
}

#mainHeader nav a.active .text{
    background:none;
    background-image: linear-gradient(90deg, #78D8FA, #7DFA7C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

#mainHeader nav a.active .img {
    background:no-repeat 6px center / 39px;
    border-radius:20px;
    width:49px;
    height:49px;
    margin-left:0;
    filter:none;
}

#mainHeader nav a.active .img.index{
    background-image:url('../img/mainmenu/main.png');
}

#mainHeader nav a.active .img.map {
    background-image:url('../img/mainmenu/map.png');
}

#mainHeader nav a.active .img.towns {
    background-image:url('../img/mainmenu/towns.png');
}

#mainHeader nav a.active .img.help {
    background-image:url('../img/mainmenu/help.png');
}

#mainHeader nav a.active .img.news {
    background-image:url('../img/mainmenu/news.png');
}

#mainHeader nav a.active .img.rules {
    background-image:url('../img/mainmenu/rules.png');
}

#mainHeader nav a .img.index{
    background-image:url('../img/mainmenu/main-.png');
}

#mainHeader nav a .img.map {
    background-image:url('../img/mainmenu/map-.png');
}

#mainHeader nav a .img.towns {
    background-image:url('../img/mainmenu/towns-.png');
}

#mainHeader nav a .img.help {
    background-image:url('../img/mainmenu/help-.png');
}

#mainHeader nav a .img.news {
    background-image:url('../img/mainmenu/news-.png');
}

#mainHeader nav a .img.rules {
    background-image:url('../img/mainmenu/rules-.png');
}

#mainHeader .soclinks {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background:url('../img/mainmenu/soclinks.png') no-repeat 6px center / 39px,
        linear-gradient(90deg, transparent, transparent 56px, rgba(20,20,20,.75) 56px, rgba(255,145,221,.5));
        width:261px;
    height:49px;
    margin:0 8px 20px 8px;
    border-radius:0 20px 20px 0;
    padding-left:78px;
    gap:22px;
}

#mainHeader .soclinks a {
    display:block;
    width:39px;
    height:39px;
    background:no-repeat center / contain;
}

#mainHeader .soclinks .dis {
    background-image:url('../img/mainmenu/dis.png');
}

#mainHeader .soclinks .boosty {
    background-image:url('../img/mainmenu/boosty.png');
}

#mainHeader .soclinks .tg {
    background-image:url('../img/mainmenu/tg.png');
}

#main {
    display:grid;
    column-gap:61px;
    row-gap:61px;
    grid-template-areas:"info form" "news form";
    height:100vh;
    grid-template-rows: 344px auto;
    grid-template-columns: 1288px auto;
    padding-left:92px;
}

#main .about {
    grid-area: info;
    display:flex;
    padding-top:28px;
}

#main .about .left {
    flex-grow:1;
}

#main .about nav {
    flex-shrink:0;
    width:325px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:21px;
}

#main .about nav a {
    display:block;
    text-align:center;
    border-radius:0 20px 20px 0;
    background:linear-gradient(90deg, rgba(101,71,202,0.5), rgba(255,145,221,0.75));
    padding:11px;
    font-size:24px;
    color:rgba(255,255,255,0.5);
}

#main .about nav a span {
    display:block;
    background:none;
    background-image: linear-gradient(90deg, rgba(101,71,202,1), rgba(255,145,221,1) 60%, rgba(255,145,221,1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;    
}

#main .about .left {
    overflow:hidden;
    background: linear-gradient(270deg,rgba(255,145,221,0.75),rgba(101,72,202,0.75));
    border-radius:20px;
    padding-top:92px;
    padding-left:23px;
    padding-right:23px;
}

#main .about .left h1 {
    border:13px solid #1e1e1e;
    border-radius:25px;
    width:416px;
    height:81px;
    margin:-105px auto 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:url('../img/mainhead.png') no-repeat center / 100%;
    color:transparent;
}

#main .about .text {
    overflow:auto;
    height: 100%;
}

#main .news {
    grid-area: news;
}

#main #requestForm {
    grid-area: form;
}