:root {
    --col-gap: 30px;
    --row-gap: 30px;

    --font-main: "AGFriquer", sans-serif;

--color-bg: #080d13;

--color-text-primary: #bfb7c5;
    
}

@font-face {font-family: 'AGFriquer'; font-style: normal; font-weight: 400; src: url("../fonts/AGFriquer.otf") format('opentype'); font-display: swap;}

body {opacity: 1; transition: opacity 0.2s ease-in-out;}
body {font-family: var(--font-main); font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--color-text-primary); background-color: var(--color-bg);}
body.locked {overflow: hidden; position: relative;}

:where(a) {color: inherit; transition: color 0.1s ease-in-out; text-decoration: none;}
:where(a:link) {color: inherit;}
:where(a:visited) {color: inherit;}
:where(a:hover) {color: inherit;}

body {overflow-x: hidden;}

.page-wrapper {min-height: 100vh; background-image: url(../img/head_bg.jpg); background-position: center top; background-repeat: no-repeat; overflow: hidden;}

header {background: url("../img/nav-bg.png") repeat-x left top / auto; height: 72px; display: flex; align-items: center;}

.top-menu {--row-gap: 30px; --col-gap: 70px;}
.top-menu__item {position: relative; padding-left: 80px;}
.top-menu__item:before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); filter: brightness(.6); transition: filter 0.1s ease-in-out;}
.top-menu__item:hover::before {filter: brightness(1); background-position: center; background-repeat: no-repeat; background-size: contain;}
.top-menu__item--main::before {width: 68px; height: 59px; background-image: url("../img/icon-menu-main-hover.png");}
.top-menu__item--connection::before {width: 49px; height: 49px; background-image: url("../img/icon-menu-connection-hover.png");}
.top-menu__item--server::before {width: 49px; height: 49px; background-image: url("../img/icon-menu-server-hover.png");}
.top-menu__item--forum::before {width: 51px; height: 54px; background-image: url("../img/icon-menu-forum-hover.png");}
.top-menu__item--cabinet::before {width: 49px; height: 49px; background-image: url("../img/icon-menu-cabinet-hover.png");}
.top-menu__item--registration::before {width: 50px; height: 55px; background-image: url("../img/icon-menu-registration-hover.png");}

.top-menu__item-text {font-size: 20px; text-transform: uppercase; white-space: nowrap; transition: text-shadow 0.1s ease-in-out, color 0.1s ease-in-out;}
.top-menu__item:hover .top-menu__item-text {color: #fff; text-shadow: 0 0 9px #456fad, 0 0 9px #456fad, 0 0 9px #456fad, 0 0 9px #456fad;}

.content {padding-bottom: 50px;}

.status-block {width: 410px; height: 310px; background: url("../img/status.png") no-repeat center / contain; margin-top: 600px; padding-top: 105px;
    display: flex; flex-direction: column; align-items: center; gap: 60px; flex: none;
}
.status__text {font-size: 40px; line-height: 40px; text-transform: uppercase; text-shadow: 0 0 3px #080d13, 0 0 3px #080d13, 0 0 3px #080d13, 0 0 3px #080d13, 0 0 3px #080d13;}
.status__text--count {font-size: 37px; color: #fff8c9; text-shadow: 0 0 15px #f53b74, 0 0 7px #f53b74, 0 0 7px #f53b74, 0 0 7px #f53b74;, 0 0 7px #f53b74;}

.hr-block {width: 876px; height: 126px; background: url("../img/hr.png") no-repeat center / contain;}

.main-block {margin-top: 130px; padding-right: 20px; --row-gap: 80px;}
.main-window {width: 729px; flex: none;}
.main-window__forum-headers {padding: 10px 0 0 32px;}

.forum-header-item {width: 697px; height: 76px; display: block; margin-bottom: 39px; padding: 20px 35px 15px 149px; position: relative;}
.forum-header-item:last-child {margin-bottom: 0;}
.forum-header-item > * {position: relative;}
.forum-header-item:before {content: ''; position: absolute; left: 0; top: -22px; width: 697px; height: 116px;
    background: url("../img/forum-header-bg.png") no-repeat center / contain; pointer-events: none; transition: background-position 1.1s ease;}
.forum-header-item:hover::before {top: -22px; width: 713px; height: 120px; background-image: url("../img/forum-header-bg-hover.png")}
.forum-header-item__title {font-size: 24px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.forum-header-item__date {font-size: 18px; color: #686b85; white-space: nowrap; text-align: right;}

.main-window__communities {width: 729px; height: 434px; background: url("../img/communities-frame.png") no-repeat center top / contain; padding: 56px 35px 41px;  position: relative;}
.main-window__communities > * {position: relative;}
.main-window__communities:before {content: ''; position: absolute; left: 21px; top: 21px; width: 687px; height: 393px; background: #0f1218; z-index: -1; pointer-events: none;}

.communities__text {font-size: 20px; text-transform: uppercase; text-align: center; max-width: 470px; margin: 0 auto;}
.communities__hr {width: 259px; height: 24px; background: url("../img/communities-hr.png") no-repeat center / contain; margin: 20px auto 3px;}

.social {--col-gap: 6px; margin-left: 20px;}
.social-item {width: 180px; height: 224px; background-size: auto; background-repeat: no-repeat; background-position: center calc(100% - 5px); flex: none;}
.social-vk          {background-image: url("../img/social_vk.png");}
.social-vk:hover    {background-image: url("../img/social_vk_hover.png");}
.social-tg          {background-image: url("../img/social_tg.png");}
.social-tg:hover    {background-image: url("../img/social_tg_hover.png");}
.social-forum       {background-image: url("../img/social_forum.png"); margin-left: 4px;}
.social-forum:hover {background-image: url("../img/social_forum_hover.png");}
.social-item:hover  {background-position-y: bottom;}

.footer {background: url("../img/footer_bg.jpg") center bottom no-repeat; font-size: 24px; height: 252px; padding-top: 74px; color: #46485a;}
.footer-menu__col {flex: 0 1 600px;}
.footer-menu {flex: 0 1 740px; display: grid; grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; justify-content: space-between; gap: 15px 70px;}
.footer-menu__item:hover {color: #5f6a81;}
.footer__item--bottom {margin-top: 10px;}

.flex                   {display: flex; gap: var(--row-gap) var(--col-gap);}
.flex-center	        {display: flex; align-items: center; justify-content: center; gap: var(--row-gap) var(--col-gap);}
.flex-between	        {display: flex; align-items: center; justify-content: space-between; gap: var(--row-gap) var(--col-gap);}
.flex-inline            {display: inline-flex;}
.justify-content-center {justify-content: center;}
.justify-content-between{justify-content: space-between;}
.justify-content-around	{justify-content: space-around;}
.justify-content-start  {justify-content: flex-start;}
.justify-content-end    {justify-content: flex-end;}
.align-items-center     {align-items: center;}
.align-items-baseline   {align-items: baseline;}
.align-items-start      {align-items: flex-start;}
.align-items-end        {align-items: flex-end;}
.align-items-stretch    {align-items: stretch;}
.align-content-center	{align-content: center;}
.align-content-baseline	{align-content: baseline;}
.align-content-start	{align-content: flex-start;}
.align-content-end		{align-content: flex-end;}
.align-content-stretch	{align-content: stretch;}
.flex-column			{flex-direction: column;}
.flex-wrap				{flex-wrap: wrap;}
.flex-grow			    {flex-grow: 1;}
.align-self-start	    {align-self: self-start;}
.align-self-center	    {align-self: center;}
.align-self-end		    {align-self: flex-end;}
.align-self-stretch	    {align-self: stretch;}
.flex-none              {flex: none;}

.grid                   {display: grid; gap: var(--row-gap) var(--col-gap);}
.grid-inline            {display: inline-grid; gap: var(--row-gap) var(--col-gap);}
.grid-col               {display: grid; gap: var(--row-gap) var(--col-gap); grid-template-columns: repeat(var(--cols, 1), minmax(0,1fr));}
.grid-row               {display: grid; gap: var(--row-gap) var(--col-gap); grid-template-rows: repeat(var(--cols, 1), minmax(0,1fr));}
.grid-flow-column       {display: grid; gap: var(--row-gap) var(--col-gap); grid-auto-flow: column;}
.grid-flow-row          {display: grid; gap: var(--row-gap) var(--col-gap); grid-auto-flow: row;}
.grid-flow-dense        {display: grid; gap: var(--row-gap) var(--col-gap); grid-auto-flow: dense;}
.grid-auto-columns      {display: grid; gap: var(--row-gap) var(--col-gap); grid-auto-columns: minmax(0,1fr);}
.grid-auto-rows         {display: grid; gap: var(--row-gap) var(--col-gap); grid-auto-rows: minmax(0,1fr);}
.grid-cols-2            {--cols: 2;}
.grid-cols-3            {--cols: 3;}
.grid-cols-4            {--cols: 4;}
.grid-cols-5            {--cols: 5;}
.grid-cols-6            {--cols: 6;}
.grid-rows-2            {--rows: 2;}
.grid-rows-3            {--rows: 3;}
.grid-row-span-2        {grid-row: span 2;}
.grid-row-span-3        {grid-row: span 3;}
.grid-col-span-2        {grid-column: span 2;}
.grid-col-span-3        {grid-column: span 3;}

.gap-10	{--row-gap: 10px; --col-gap: 10px;}
.gap-8	{--row-gap: 8px; --col-gap: 8px;}

.row-gap-10 {--row-gap: 10px;}

.col-gap-10	{--col-gap: 10px;}

.ml-a {margin-left: auto;}
.mr-a {margin-right: auto;}
.mx-a {margin-left: auto; margin-right: auto;}
.mt-a {margin-top: auto;}
.mb-a {margin-bottom: auto;}

.m-0 {margin: 0;}
.mt-0 {margin-top: 0;}
.mb-0 {margin-bottom: 0;}
.my-0 {margin-top: 0; margin-bottom: 0;}
.mt-30 {margin-top: 30px;}
.mb-30 {margin-bottom: 30px;}

.p-0 {padding: 0;}
.pt-0 {padding-top: 0;}
.pb-0 {padding-bottom: 0;}
.py-0 {padding-top: 0; padding-bottom: 0;}
.pt-30 {padding-top: 30px;}
.pb-30 {padding-bottom: 30px;}

.d-block {display: block !important;}

.full-width {width: 100%;}
.full-height {height: 100%;}
.max-width-500 {width: 100%; max-width: 500px;}

.fit > img,
.fit > picture > img {width: 100%; height: 100%; object-fit: cover; display: block;}
.fit-contain > img,
.fit-contain > picture > img {width: 100%; height: 100%; object-fit: contain;}
img.full-width {width: 100%; height: auto; display: block;}
img.responsive {max-width: 100%; height: auto; display: block;}

.relative {position: relative;}
.absolute-center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.overflow-hidden {overflow: hidden;}
.round {border-radius: 999999px;}
.round-hidden {border-radius: 999999px; overflow: hidden;}

h1, h2, h3, h4, h5, h6 {margin: 0; font-size: inherit; font-weight: inherit;}
.t-300 {font-weight: 300;}
.t-400, .regular {font-weight: 400;}
.t-500 {font-weight: 500;}
.t-600 {font-weight: 600;}
.t-700, .t-bold {font-weight: 700;}
.t-900 {font-weight: 900;}

.uppercase {text-transform: uppercase;}
.font-main {font-family: var(--font-main);}
.text-italic {font-style: italic;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.block-center {margin-left: auto; margin-right: auto;}
.underline {border-bottom: 1px solid inherit;}
.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.scroll, .hand {cursor: pointer;}

.reset-float {clear: both;}
.dn {display: none;}

.only-mob {display: none;}
@media (max-width: 767px){
    .only-pc {display: none;}
    .only-mob {display: block;}
}

.burger-btn {width: 35px; height: 35px; background: url(../img/burger.png) no-repeat center; background-size: contain;}
.burger-btn {display: none; cursor: pointer;}
.close-btn {display: none;}

@media (max-width: 767px){
    :root{--menu-width: 430px;}

    .top-menu {flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 24px; padding: 50px; width: var(--menu-width); min-height: 100vh; height: 100%;
        background: rgba(10 17 32 / 0.8); background: rgba(15 18 24 / 0.9); position: absolute; top: 0; right: calc(var(--menu-width) * -1); z-index: 999; transition: right ease .3s;}

    .mob-menu-backdrop {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; transition: background ease .3s; pointer-events: none;}
    .mob-menu-backdrop.active {z-index: 2999; background: rgba(0, 0, 0, 0.5); pointer-events: auto;}
    .mob-menu-backdrop.active .top-menu {right: 0; overflow: auto; box-shadow: -4px 4px 4px rgba(0, 0, 0, 0.24);}

    .burger-btn,
    .close-btn {display: block;}
}

.container, .container-fluid {width: 100%; max-width: 1527px; padding-left: 60px; padding-right: 60px; margin-left: auto; margin-right: auto;}

@media (min-width: 768px) {
    
}
@media (min-width: 1024px) {
    .page-wrapper {width: 1700px; transform-origin: top left; margin: 0 auto; transform: scale(calc(100vw / 1700px));}
    body {height: 100px;}
}
@media (min-width: 1100px) {
    .page-wrapper {width: 2100px; transform: scale(calc(100vw / 2100px));}
}
@media (min-width: 1500px) {
    .page-wrapper {width: 2560px; transform: scale(calc(100vw / 2560px));}
}
@media (min-width: 2560px) {
    .page-wrapper {width: 100%; transform: none;}
    .footer {background-size: cover;}
}
@media (max-width: 1100px){
    .page-wrapper {background-size: 150%;}

    .top-menu__item-text {font-size: 24px;}

    .main-block {margin-top: 100px; padding-right: 0;}

    .forum-header-item {padding: 18px 45px 10px 149px;}
    .forum-header-item__title {font-size: 26px;}
    .forum-header-item__date {font-size: 20px;}
    .main-window__communities {padding: 44px 50px 40px;}
    .communities__text {font-size: 24px; max-width: 560px;}
    .communities__hr {margin: 18px auto 0;}

    .footer {font-size: 26px;}
}

@media (max-width: 1023px){
    .page-wrapper {width: 1500px; transform-origin: top left; margin: 0 auto; transform: scale(calc(100vw / 1500px));}
    body {height: 100px;}

    .top-menu {--col-gap: 50px;}
    .top-menu__item {padding-left: 70px;}

    .main-block {flex-wrap: wrap; margin-top: 50px;}

    .main-window__forum-headers {padding: 0 0 0 15px;}

.footer {height: auto; padding: 30px 0;}
    .footer-wrapper {flex-direction: column; gap: 30px;}
    .footer-menu {order: -1;}
    .footer-menu__col {flex: auto;}
    .footer-menu__col:first-child {display: flex; gap: 30px; margin-top: 30px;}

    .footer {font-size: 28px;}
}

@media (max-width: 767px){

    .page-wrapper {width: 1100px; transform-origin: top left; margin: 0 auto; transform: scale(calc(100vw / 1100px)); overflow: hidden;}

header {background: none; align-items: flex-end;}
    .header-wrapper {justify-content: flex-end;}
    .burger-btn {width: 50px; height: 50px; position: relative; top: 20px;}

    .top-menu {row-gap: 70px;}
    .top-menu__item {padding-left: 85px;}
    .top-menu__item-text {font-size: 32px;}
    .top-menu__item::before {transform: scale(1.2) translateY(-40%);}

    .status-block {margin-top: 350px;}

    .main-block {margin-top: 40px;}

    .main-window__forum-headers {padding-left: 0;}
    .forum-header-item {padding: 14px 45px 10px 149px; margin-bottom: 60px; transform: scale(1.1);}
    .forum-header-item__title {font-size: 28px;}
    .forum-header-item__date {font-size: 24px;}

    .main-window__communities {height: 500px; background-size: 100% 100%;}
    .main-window__communities:before {height: 455px;}
    .communities__text {font-size: 31px; max-width: none;}

.footer {padding: 30px 0 50px; font-size: 29px;}
    .footer-menu__col:first-child {gap: 50px;}
    .footer-menu {grid-template-rows: repeat(5, 1fr); gap: 30px 70px;}
}

@media (max-width: 575px){
    .page-wrapper {width: 900px; transform-origin: top left; margin: 0 auto; transform: scale(calc(100vw / 900px));}
}