/* page home */


.block-home-banner {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100vh - 6.3158rem);
    background-image: url('https://cristalix.gg/content/bg/citycat.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.home-banner {
    display: block;
    width: var(--block);
    margin: auto;
}

.home-banner h1 {
    width: 43rem;
    margin-bottom: 1.578rem;
}

.home-banner text {
    margin-bottom: 2.105rem;
    display: block;
}

.btn-group {
    display: flex;
    gap: 0.842rem;
}

.home-info {
    width: var(--block);
    height: auto;
    margin: auto;
    display: flex;
    border-top: solid 1px var(--light-gray);
}

.block-widgets {
    width: 63%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-right: 3.1579rem;
    box-sizing: border-box;
}

.block-widgets .h3 {
    display: flex;
    align-items: center;
    height: 3.684rem;
    width: 100%;
}

.widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 1.578rem;
    padding-top: 0.6316rem;
    width: 100%;
}

.mini-widget {
    transition: 0.2s cubic-bezier(0.36, 1.19, 0.54, 0.73);
    width: calc(50% - 0.7895rem);
    height: auto;
    display: flex;
    gap: 1.5789rem;
    align-items: center;
    box-sizing: border-box;
    padding: 0.9474rem;
    border-radius: 0.578rem;
    justify-content: space-between;
}

.mini-widget-half {
    width: max-content !important;
}

.box-widget {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.mini-widget .btn-link {
    fill: var(--white);
    transition: 0.13s cubic-bezier(0.32, 2.04, 0.73, 0.69);
    transform: rotate(0deg) translate(0rem, 0rem);
    min-width: 0.842rem;
    min-height: 0.842rem;
}

.mini-widget:hover .btn-link {
    transition: 0.13s cubic-bezier(0.32, 2.04, 0.73, 0.69);
    transform: rotate(45deg) translate(-0.1053rem, 0.1579rem);
}

.mini-widget-max {
    width: 100%;
}

.black-widget {
    background-color: #000;
}

.black-widget:hover {
    background-color: #000;
}

.black-widget:active {
    background-color: #000;
}

.tg-widget {
    background-color: #007CBD;
}

.tg-widget:hover {
    background-color: #00537e;
}

.tg-widget:active {
    background-color: #00324c;
}

.vk-widget {
    background-color: #0b5aba;
}

.vk-widget:hover {
    background-color: #083873;
}

.vk-widget:active {
    background-color: #082d5a;
}

.discord-widget {
    background-color: #5865F2;
}

.discord-widget:hover {
    background-color: #2f3581;
}

.discord-widget:active {
    background-color: #212553;
}

.youtube-widget {
    background-color: #940101;
}

.youtube-widget:hover {
    background-color: #530707;
}

.youtube-widget:active {
    background-color: #390404;
}

.c-widget {
    background-color: #2A66BD;
}

.c-widget:hover {
    background-color: #275495;
}

.c-widget:active {
    background-color: #153562;
}

.mini-widget .soc-icon {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 1.7895rem;
}

.mini-widget text {
    width: 100%;
    color: #ffffff;
}

/* list servers */
.block-servers-list {
    width: 37%;
}

.header-server-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3.684rem;
}

.server-list {
    display: flex;
    width: 100%;
    height: auto;
    margin-top: 0.6316rem;
    gap: 1.052rem;
    flex-direction: column;
    overflow: hidden;
}

.btn-server-list {
    width: 100%;
    height: auto;
    display: flex;
    cursor: pointer;
    flex-direction: column;
}

.server-list-dropdown {
    display: flex;
    width: 100%;
    min-height: 0rem;
    max-height: 1000rem;
    flex-direction: column;
    gap: 1.052rem;
    border-bottom: solid 1px var(--light-gray);

    margin-top: 0rem;
    padding-bottom: 0rem;

}

.btn-server-dropdown {
    width: 100%;
    height: auto;
    display: flex;
    cursor: pointer;
    flex-direction: column;
}

.btn-server-dropdown .box-btn-server-list {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: auto 1.8fr 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 1.052rem;
    cursor: pointer;
    margin: 0.2105rem 0rem;
}

.btn-server-dropdown .server-list-dropdown {
    transition: 0.3s cubic-bezier(0.36, 1.03, 0.63, 1.03);
    overflow: hidden;
    max-height: 0rem;
    padding: 0px;
    opacity: 0;
    transform: rotateX(114deg) translate(0rem, -30rem);
    margin-top: 0rem;
    padding-bottom: 0rem;

    will-change: transform, opacity;
}

.btn-server-dropdown .server-list-dropdown-active {
    transition: 0.1s cubic-bezier(0.04, 0.84, 0.44, 0.79);
    overflow: hidden;
    max-height: 1000rem;

    margin-top: 1.368rem;
    padding-bottom: 1.6842rem;

    opacity: 1;
    transform: rotateX(0deg);

    will-change: transform, opacity;
}



.btn-server-list .box-btn-server-list {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: auto 1.8fr 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 1.052rem;
    cursor: pointer;
    margin: 0.2105rem 0rem;
    color: var(--white);
}

.box-btn-server-list picture {
    display: flex;
    width: max-content;
    height: max-content;
}

.box-btn-server-list {}

.server-list .btn-server-list:hover {
    opacity: 0.7;
}

.btn-server-list:hover .btn-link {
    transform: rotate(45deg) translate(-0.1053rem, 0.1579rem);
}

.server-list .btn-server-list:active {
    opacity: 0.5;
}

.server-list .server-icon {
    aspect-ratio: 1 / 1;
    width: 2rem;
    height: 2rem;
    border-radius: 0.263rem;
    user-select: none;
}

.btn-server-list .mg-server-icon {
    background: var(--light-gray);
}

.server-list .server-icon>svg {
    width: 100%;
    height: 100%;
    border-radius: 0.263rem;
    user-select: none;
    fill: var(--white);
}

.server-list .server-name {
    user-select: none;
}

.server-list .server-online {
    user-select: none;
}

.server-list .server-group {
    width: auto;
    height: 2rem;
    display: flex;
    align-items: center;
}

.server-group .btn-link,
.btn-drop {
    transition: 0.13s cubic-bezier(0.32, 2.04, 0.73, 0.69);
    transform: rotate(0deg);
    width: 0.842rem;
    height: 0.842rem;
}

.server-group .btn-drop {
    transform: rotate(180deg);
}


.server-list .minigames-sv,
.server-list .minigames-sv:hover,
.server-list .minigames-sv:active {
    opacity: 1;
}

.btn-list-active .btn-drop {
    transition: 0.13s ease-in-out;
    transform: rotate(0deg);
}


.parsers-news {
    width: 100%;
    height: auto;
    margin-bottom: 1.052rem;
    margin-top: 1.5789rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 3.1579rem;
}

.parsers-news {}

.box-news {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 2.105rem;
}

.box-news img {
    aspect-ratio: 1920 / 800;
    width: 100%;
    height: auto;
    border-radius: 0.3684rem;
}

.box-news .h3 {
    padding: 1rem 0rem 0.842rem 0rem;
    display: block;
    height: auto;
    box-sizing: border-box;
}

.box-news text {
    transition: 0.2s ease-in-out;
    min-height: 0rem;
    max-height: 100rem;
    display: block;
    line-height: 180%;
    overflow: hidden;
}

.box-news:active text,
.box-news:focus-within text {
    display: block;
    min-height: 0rem;
    max-height: 100rem;
    line-height: 180%;
}

.box-news .link {
    padding: 0.842rem 0rem 0rem 0rem;
    display: block;
}

.box-news-image {
    width: 100%;
    aspect-ratio: 1920 / 800;
    display: flex;
    overflow: hidden;
}

.box-pixelbattle {
    margin-bottom: 1.5789rem;
    display: flex;
    position: relative;
    width: 100%;
    height: 18rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.578rem;
    background-image: url(https://storage.c7x.dev/pixelbattle/current.png);
    box-shadow: inset rgb(0 0 0 / 16%) 0 0 0 20rem;
    background-size: cover;
    box-sizing: border-box;
    border: solid 1px var(--light-gray);
    background-position: center center;
}

@media screen and (max-width: 9900px) {
    :root {
        --scale: 0.7vw;
    }
}

@media screen and (max-width: 2700px) {
    :root {
        --scale: 19px;
    }

    #skin_container {
        height: 90%;
    }

    .box-skin {
        top: 8rem;
        height: 42rem;
    }

    .fix-payment {
        top: 8rem;
    }
}

@media screen and (max-width: 1900px) {
    #skin_container {
        height: 100%;
    }

    .box-skin {
        top: calc(50vh - 17.5rem);
        height: 35rem;
    }
}

@media screen and (max-width: 1430px) {
    :root {
        --scale: 16px;
    }
}

@media screen and (max-width: 1370px) {
    :root {
        --scale: 14px;
    }
}

@media screen and (max-width: 1230px) {
    :root {
        --scale: 12px;
        --block: 92%;
    }
}

@media screen and (max-width: 1130px) {
    :root {
        --scale: 11px;
        --block: 92%;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --scale: 10px;
        --block: 94%;
    }

    .block-play-sub button,
    .block-play-sub .button {
        width: 100%;
    }

    .block-play-sub btn-group {
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 780px) {
    :root {
        --scale: 3.5vw;
        --block: 92%;
        --headpadding: 1rem;

        /* fonts */
        --text-lite: 0.632rem;
        /* 14px */
        --text: 0.9474rem;
        /* 18px */
        --h3: 1.0526rem;
        /* 22px */
        --h2: 1.3684rem;
        /* 32px */
        --h1: 2.6316rem;
        /* 60px */
    }

    .box-career {
        flex-direction: column;
    }

    .block-mobile-nav-active {
        visibility: visible;
        width: 100%;
        height: calc(100% - 5.105rem);
        opacity: 1;
        will-change: transform, opacity, visibility;
    }

    .box-servers {
        width: 100%;
    }

    header {
        display: none;
    }

    .block-widgets {
        width: 100%;
        order: 2;
        padding-right: 0rem;
        margin-top: 5rem;
    }

    .block-servers-list {
        width: 100%;
        order: 1;
    }

    .widgets {
        padding-top: 0.526rem;
    }

    .home-info {
        flex-wrap: wrap;
    }

    .home-banner {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            '.'
            '.'
            '.';
        height: 100%;
    }

    .home-banner .btn-group {
        margin-bottom: 1.578rem;
        flex-wrap: wrap;
    }

    .home-banner .btn-group>.button {
        width: 100%;
        height: max-content;
    }

    .home-banner h1 {
        font-size: 2.7rem;
        width: 100%;
        margin-top: var(--headpadding);
    }

    footer {
        margin-top: 8rem;
        gap: 2.105rem;
        flex-wrap: wrap;
        padding-bottom: 20rem;
    }

    .footer-corp {
        justify-content: none;
        height: auto;
        gap: 0.526rem;
    }

    .footer-politics {
        display: flex;
        gap: 1.368rem;
        flex-direction: column;
        margin-top: 1.578rem;
        font-size: 0.947rem;
    }

    .footer-politics .text {
        font-size: 0.947rem;
    }

    .footer-info text {
        font-size: 0.947rem;
    }

    .mobile-nav {
        display: flex;
    }

    footer .payment-processing {
        text-align: left;
        line-height: 160%;
    }

    .block-home-banner {
        background-image: url(https://storage.c7x.dev/one1side/website/bannerlauncher11m.jpg);
        background-image: url(https://storage.c7x.dev/one1side/website/bannerlauncher11m.webp);
        height: calc(100vh - 10rem);
    }

    .button,
    button {
        padding: 1rem 1.315rem 1rem 1.315rem;
        height: 3.4rem;
    }

    .box-slider {
        height: 3.4rem;
    }

    .servers-background {
        background-size: 128%;
    }

    .box-servers:hover .servers-background {
        background-size: 154%;
    }

    .block-servers {
        margin-bottom: 8rem;
    }

    .accordion,
    .accordion:hover,
    .accordion:active {
        padding: 1.578rem 0px;
    }

    .accordion .h3 {
        text-align: left;
        line-height: 160%;
    }

    .box-play {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        margin-top: 4rem;
    }

    .box-play img {
        width: 70%;
        height: auto;
        justify-self: center;
    }

    .box-play picture {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .box-play video {
        width: 100%;
        height: 16rem;
        display: flex;
        justify-content: center;
    }

    .play-ds {
        padding: 1.578rem 0;
    }

    .box-play .button {
        justify-self: center;
        width: 100%;
    }

    .box-downloader {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0px 0px;
        grid-template-areas:
            'launcher'
            'downloader';
    }

    .down-java {
        flex-direction: column;
        padding: 2.105rem 1.578rem;
    }

    .down-java .button {
        margin-top: 2.631rem;
        width: 100%;
    }

    .box-card-launcher {
        height: 21rem;
        margin-bottom: 2rem;
    }

    .box-card-downloader .button {
        width: 90%;
    }

    .mini-widget {
        padding: 1.1579rem;
        width: 100%;

    }

    .block-cookie {
        bottom: 12rem;
    }

    .cookie text {
        width: auto;
    }

    .cookie {
        padding: 1.0526rem;
        width: 92%;
        flex-direction: column;
    }

    .cookie button {
        width: 100%;
    }

    .block-cc {
        flex-direction: column;
        margin-bottom: 5rem;
    }

    .box-skin {
        top: 0;
        position: static;
        width: 100%;
        margin-bottom: 5rem;
        margin-top: var(--headpadding);
        height: auto;
    }

    .block-skin {
        order: 1;
        width: 100%;
    }

    .skin {
        height: 39rem;
        position: relative;
    }

    .skin-fix {
        display: block;
    }

    .box-balance .button {
        width: 100%;
    }

    .box-balance {
        gap: 1.578rem;
        flex-direction: column;
    }

    .box-balance-pref text {
        font-size: 0.79rem;
    }

    .sub-card,
    .sub-card-two {
        width: calc(50% - 0.79rem);
    }

    .box-balance-line {
        margin-top: 3.157rem;
    }

    .block-cabinet {
        width: 100%;
        padding-right: 0rem;
        order: 2;
    }

    .security-history .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .security-history button {
        width: 100%;
    }

    .security-history {
        display: flex;
        flex-direction: column;
        gap: 2.052rem;
    }

    .box-auth {
        border: solid 0px var(--light-gray);
    }

    .box-input input {
        padding: 1rem 1.315rem 1rem 1.315rem;
    }

    .balance {
        width: 100%;
        flex-direction: column;
    }

    .box-payment {
        width: 100%;
    }

    .block-donate {
        display: flex;
        flex-wrap: wrap;
        gap: 4.7368rem;
    }

    .select__toggle,
    .select__option {
        height: 3.4rem;
    }

    .select__dropdown {
        max-height: 21rem;
    }

    .box-donate-status {
        width: 100%;
        padding: 0;
    }

    .server-list .server-icon {
        width: 2.3rem;
        height: 2.3rem;
    }

    .server-list,
    .btn-server-dropdown .server-list-dropdown-active {
        gap: 1.6842rem;
    }

    .box-toggle {
        height: 3.4rem;
    }

    .button-icon img {
        width: 1.3684rem;
    }

    .skin-header {
        position: static;
        display: flex;
        height: auto;
        gap: 0.8421rem;
        right: unset;
        align-items: flex-end;
        user-select: none;
        justify-content: center;
        flex-direction: row;
        border: solid 1px var(--light-gray);
        border-radius: 0.4737rem;
        margin-top: 0.4211rem;
    }

    .skin-header svg {
        min-width: 1.7684rem;
    }

    .skin-header button {
        padding: 0rem 0rem;
    }

    .btn-skin button {
        width: 100%;
    }

    .status-info {
        width: 90%
    }

    .wiki-content {
        padding-right: 0rem;
    }

    .wiki-content>.si-banner img {
        margin: 0rem;
    }

    .box-wiki-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background: var(--graphite);
        overflow-y: scroll;
        width: 100%;
        box-sizing: border-box;
        padding: var(--headpadding);
        height: 100%;
        align-items: center;
        padding-bottom: 12rem;
        padding-top: 2rem;
        align-items: center;
    }

    .box-wiki-links-active {
        display: flex;

    }

    .links-group {
        width: var(--block);
    }

    .wiki-links-btn {
        display: flex;
        position: fixed;
    }

    .btn-nav:active {
        background: var(--light-gray);
        border-radius: 11px;
    }

    .sub-card-two-m {
        width: 100%;
    }

    .wiki-link,
    .wiki-link:visited {
        padding: 0.8421rem 0rem;
    }

}

.stop-scrolling {
    overflow-y: hidden;
    overflow-x: hidden;
}

@media screen and (max-width: 380px) {
    :root {
        --scale: 4vw;
        --block: 92%;
        --headpadding: 1rem;
    }

    .block-home-banner {
        height: max-content;
    }

    .btn-server-list .box-btn-server-list {
        grid-template-columns: auto 1.8fr 1.3fr auto;
    }