@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@media (max-width: 1250px) {
    * {
        padding: 0;
        margin: 0;
        font-family: Montserrat, sans-serif;
        box-sizing: border-box;
        user-select: none;
        transition: all .10s;
        image-rendering: high-quality;
        color-rendering: optimizeQuality;
        shape-rendering: geometricPrecision;
        text-rendering: geometricPrecision;
    }

    a {
        text-decoration: none;
    }

    *:hover {
        transition: .2s;
    }

    *:active {
        transition: .1s;
    }

    :root {
        --accentcolor: #F85BBE;
    }

    head, script {
        display: none;
    }

    body, html {
        width: 100vw;
        height: max-content;
        display: block;
    }

    body {
        overflow-x: hidden;
    }

    header {
        display: none;
    }

    main {
        width: 100vw;
        height: max-content;
        display: flex;
        flex-direction: column;
    }

    #block-1 {
        width: 100vw;
        height: 640px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .block-1_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: max-content;
        height: max-content;
    }

    .txt-1-main {
        width: max-content;
        height: max-content;
        color: #FFF;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: 47px;
        font-weight: 400;
        user-select: none;
        display: flex;
        flex-direction: row;
        transition: .2s;
        align-items: center;
    }

    .txt-1-main-outline {
        display: flex;
        width: max-content;
        font-weight: 400;
        font-size: 47px;
        flex-direction: row;
        gap: 10px;
        left: 15px;
        position: relative;
    }

    .txt-1-main-outline span {
        font-family: "Open Sans", sans-serif;
        color: rgba(255, 255, 255, 0);
    }

    .txt-2-main {
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: calc(4vw + 2px);
        font-style: normal;
        user-select: none;
        font-weight: 500;
        line-height: normal;
    }

    #button-main {
        margin-top: 32px;
        width: 264px;
        height: 56px;
        display: inline-flex;
        padding: 16px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background: #FFF;
        color: #333;
        border: none;
        outline: none;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        cursor: pointer;
        transition: .2s;
        user-select: none;
    }

    #button-main:hover {
        background: var(--accentcolor, #F85BBE);
        color: #FFFFFF;
    }

    #button-main:active {
        background: #FFF;
        color: #333;
    }

    #block-2 {
        width: 100vw;
        height: 150px;
        overflow: hidden;
    }

    .block-2_container-main {
        width: 100vw;
        height: 171px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .block-2_container-2 {
        width: 100vw;
    }

    #block-3 {
        width: 100vw;
        height: 1348px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .block-3_container-main-1 {
        margin: 120px auto;
        width: fit-content;
        height: 500px;
    }

    #main-arrow {
        display: none;
    }

    .txt-3-main {
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: calc(14px + 1vw);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .txt-3-main-bold {
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: calc(14px + 1vw);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .block-2_container-main p {
        font-size: calc(14px + 1vw) !important;
    }

    .block-3_container-2 img {
        width: 90px;
        height: 90px;
    }

    .br-desktop {
        display: none;
    }

    .block-3_container-2-1 {
        display: flex;
        flex-direction: row;
    }

    .block-3_container-2-2 {
        display: flex;
        flex-direction: row;
    }

    .block-3_container-2 {
        gap: 24px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        margin-left: -20px;
    }

    #main-block-3-mainimg {
        margin-left: 80px;
        margin-top: -50px;
        z-index: 1;
        width: 318px;
    }

    .block-3_container-main-2 {
        display: flex;
        flex-direction: column;
    }

    .block-3-box-1 {
        display: inline-flex;
        padding: 12px 16px;
        margin-left: 36px;
        height: max-content;
        justify-content: center;
        align-items: center;
        width: max-content;
        gap: 10px;
        border-radius: 8px;
        background: rgba(123, 123, 123, 0.50);
        backdrop-filter: blur(6.699999809265137px);
        color: #FFF;
        text-align: center;
        font-family: Montserrat, sans-serif;
        font-size: 14px;
        font-style: normal;
        z-index: 0;
        font-weight: 400;
        line-height: normal;
    }

    .block-3-box-1 p {
        font-size: calc(1vw + 10px) !important;
    }

    .block-3-box-1 span {
        font-size: calc(1vw + 10px) !important;
    }

    .block-3-box-2 p {
        font-size: calc(1vw + 10px) !important;
    }

    .block-3-box-2 span {
        font-size: calc(1vw + 10px) !important;
    }

    .block-3-box-2 {
        margin-top: -100px;
        margin-left: 56px;
        display: inline-flex;
        padding: 12px 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        z-index: 2;
        border-radius: 40px;
        background: #F85BBE;
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        width: max-content;
        height: max-content;
    }

    #main-block-3-arrow-1 {
        position: absolute;
        width: 40px;
        margin-top: 80px;
        left: 147px;
        transform: rotate(15grad);
    }

    @media (max-width: 375px) {
        #main-block-3-mainimg {
            width: 218px;
        }

        .txt-1-main {
            font-size: 47px !important;
        }

        .txt-1-main-outline {
            font-size: 47px !important;
        }

        #main-block-3-arrow-2 {
            position: absolute;
            margin-top: 230px !important;
            left: 75px !important;
            width: 30px !important;
            transform: rotate(250grad) scaleX(-1);
        }

        #main-block-3-arrow-1 {
            position: absolute;
            width: 30px !important;
            margin-top: 80px !important;
            left: 147px !important;
            transform: rotate(15grad);
        }

        .block-3-box-1 {
            margin-bottom: 20px;
        }

        #block-3 {
            width: 100vw;
            height: 1200px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .block-4_container-main-1 {
            position: relative;
            left: -100px;
        }
    }

    #main-block-3-arrow-2 {
        position: absolute;
        margin-top: 350px;
        left: 75px;
        width: 40px;
        transform: rotate(250grad) scaleX(-1);
    }

    #block-4 {
        display: flex;
        flex-direction: column-reverse;
        width: 100vw;
        height: 1044px;
        background: #FFF2FB;
    }

    .block-4_container-main-2 {
        margin-left: 36px;
    }

    .block-4_container-main-2 p {
        font-size: 1em !important;
    }

    .block-4_container-main-2 div img {
        width: 78px !important;
        height: 43px !important;
    }

    .block-4_container-main-2 div {
        margin-top: 26px;
        display: flex;
        flex-direction: row;
    }


    #main-block-4-mainimg {
        width: 300px;
        left: 130px;
        margin-bottom: -5px;
        position: relative;
        z-index: 1;
    }

    .block-4-box-1 {
        display: inline-flex;
        padding: 12px 16px;
        align-items: center;
        gap: 10px;
        margin-top: 36px;
        left: 94px;
        margin-bottom: -50px;
        position: relative;
        border-radius: 8px;
        background: rgba(42, 42, 42, 0.55);
        backdrop-filter: blur(6.699999809265137px);
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        width: 220px;
        height: max-content;
    }

    .block-4-box-1 p {
        font-size: 1em !important;
    }

    .block-4-box-2 {
        margin-top: 530px;
        width: 279px;
        position: absolute;
        height: max-content;
        left: 100px;
        display: inline-flex;
        padding: 12px 28px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 40px;
        background: #F85BBE;
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        z-index: 4 !important;
    }

    .block-4-box-2 p {
        font-size: calc(1em - 2px) !important;
        z-index: 4 !important;
    }

    #block-5 {
        width: 100vw;
        height: 517px;
        background: #2A2A2A;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }

    .block-5_container-main-2 {
        width: 100vw;
        height: max-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        align-items: center;
        align-content: center;
        margin-top: 10px;
        gap: 20px;
    }

    .block-5_container-main-1 {
        display: flex;
        text-align: center;
        flex-direction: column
    }

    .block-5_container-main-1 p {
        font-size: calc(1em + 6px) !important;
    }

    .block-5_container-main-1 .txt-3-main {
        text-align: center;
        font-size: 1em !important;
    }

    #block-6 {
        width: 100vw;
        height: 910px;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        background-image: none !important;
        /*background-repeat: no-repeat;*/
        /*background-position: center;*/
        background-color: #FFF2FB;
        /*background-size: cover;*/
        margin-bottom: 50px;
    }

    .block-6_container-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 35px;

    }

    .block-6_container-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 35px;

    }

    .block-6_container-main-2 {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .block-6_container-main .txt-3-main {
        margin-top: 0 !important;
        margin-bottom: 32px !important;
    }

    .txt-6-main-bold {
        color: var(--main, #2A2A2A);
        font-family: Montserrat, sans-serif;
        font-size: 18px;
        font-style: normal;
        margin-bottom: 12px;
        font-weight: 500;
        line-height: normal;
    }

    .txt-6-main {
        color: var(--main, #2A2A2A);
        text-align: center;
        font-family: Montserrat, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        max-width: 287px;
    }

    #block-7 {
        width: 100vw;
        display: flex;
        background: none;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;
    }

    .block-7_container-main .txt-6-main-bold {
        margin-top: -20px;
        width: 100vw !important;
        height: 30px !important;
        margin-left: 45px;
        text-align: center !important;
    }


    .name-description {
        display: none;
    }

    .object-artist {
        width: 220px;
        height: 512px;
        flex-wrap: wrap;
        margin-top: -2px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }

    .block-7_container-art-1, .block-7_container-art-2, .block-7_container-art-3 {
        width: 440px;
        margin-top: -3px !important;
        height: max-content;
        flex-wrap: wrap !important;
        display: flex;
        flex-direction: row;
    }

    .name-artist {
        max-width: 161px;
        color: #FFF;
        text-align: center;
        font-family: Montserrat, sans-serif;
        font-size: 1em;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: 454px;
    }


    footer {
        position: relative;
        width: 100vw;
        height: 568px;
        background: #FFF2FB;
    }

    #main-logo-footer {
        width: 212px;
        height: 80px;
        flex-shrink: 0;
    }

    .footer-main_container-main {
        width: 100vw;
        height: 568px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        align-content: center;
        justify-items: center;
    }

    .footer-main_container-1 {
        position: relative;
        display: flex;
        flex-direction: column;
        height: max-content;
        gap: 12px;
        width: 50vw;
        margin-bottom: 36px;
    }

    .txt-footer {
        color: #333;
        font-family: Montserrat, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .txt-footer-bold {
        color: #333;
        font-family: Montserrat, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .footer-main_container-2 {
        position: relative;
        display: flex;
        flex-direction: column;
        height: max-content;
        width: 50vw;
        gap: 12px;
    }

    .footer-main_container-2-1 {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    #nav-footer-vk, #nav-footer-instagram {
        cursor: pointer;
        width: fit-content;
        height: fit-content;
    }

    #nav-footer-vk:active {
        svg path {
            fill: #2A2A2A;
            transition: .1s;
        }
    }

    #nav-footer-instagram:active {
        svg g path {
            fill: #2A2A2A;
            transition: .1s;
        }
    }

    #button-main-footer {
        width: 211px;
        margin-top: 36px;
        height: 56px;
        display: inline-flex;
        padding: 16px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background: var(--accentcolor, #F85BBE);
        color: #FFFFFF;
        border: none;
        outline: none;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        cursor: pointer;
        transition: .2s;
        user-select: none;
    }

    #button-main-footer:hover {
        background: #333;
        color: #FFFFFF;
    }

    .footer-main_container-2-1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #button-main-footer:active {
        background: var(--accentcolor, #F85BBE);
        color: #FFFFFF;
    }

    canvas {
        display: none;
    }

    #icon-message {
        position: fixed;
        width: 30px;
        left: 70%;
        z-index: 999;
        top: 550px;
    }

    #icon-message:active {
        svg path {
            fill: var(--accentcolor, #F85BBE);
            stroke: var(--accentcolor, #F85BBE);
            transition: .500ms;
        }

        svg g circle {
            fill: #fff;
        }
    }

    #popup-container {
        display: none;
        position: fixed;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.40);
        backdrop-filter: blur(2px);
    }

    #popup-chat {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 9999;
        position: fixed;
        width: 288px;
        height: 176px;
        top: 400px;
        gap: 20px;
        flex-shrink: 0;
        border-radius: 8px;
        background: #FFF;
    }

    #popup-button {
        display: inline-flex;
        padding: 16px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background: var(--main, #2A2A2A);
        border: none;
        color: #FFFFFF;
        font-family: Montserrat, sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        cursor: pointer;
        line-height: normal;
    }

    #popup-button:hover {
        background: #333;;
        color: #fff;
    }

    #popup-button:active {
        background: #fff;
        color: #333;
    }

    @media (max-width: 375px) {
        .block-4_container-main-2 p {
            font-size: 14px !important;
        }
    }
    #mobile-burger {
        display: block;
        position: absolute;
        width: max-content;
        height: max-content;
        z-index: 100;
        top: 22px;
        margin-right: 36px;
        right: 0;
    }

    #mobile-logo {
        display: block;
        position: absolute;
        z-index: 100;
        top: 25px;
        left: 36px;
    }

    #mobile-menu {
        position: fixed;
        display: none;
        width: 210px;
        z-index: 1000;
        height: 640px;
        right: 0;
        background: #2A2A2A;
    }

    #mobile-menu-1 div {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    #mobile-menu-1 {
        position: relative;
        left: 27px;
        top: 50px;
        display: flex;
        flex-direction: column;
        width: max-content;
        height: max-content;
        gap: 24px;
    }

    #mobile-menu-1 nav {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #mobile-menu-1 nav p {
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    #mobile-menu-2 {
        left: 27px;
        top: 267px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
        width: max-content;
        height: max-content;
    }

    #mobile-menu-2 h1 {
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 4px;
    }

    #mobile-menu-2 p {
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    #close-mobile {
        left: 170px;
        position: absolute;
        width: 24px;
        height: 24px;
        top: 16px;
    }

    #popup-chat-pc {
        display: none;
    }

    #button-main-container {
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.40);
        backdrop-filter: blur(2px);
        z-index: 99999;
    }

    #button-main-click {
        gap: 32px;
        z-index: 999999;
        position: absolute;
        display: flex;
        width: 100vw;
        height: 200px;
        border-radius: 8px;
        background: #FFF;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #button-main-click p {
        width: max-content;
        color: #2A2A2A;
        text-align: center;
        font-family: Montserrat, sans-serif;
        font-size: 5vw;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    #button-main-click button {
        display: inline-flex;
        padding: 16px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background: var(--accentcolor, #F85BBE);
        border: none;
        color: #FFF;
        font-family: Montserrat, sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    #button-main-click button:hover {
        border-radius: 8px;
        background: #333;
        color: white;
    }

    #button-main-click button:active {
        border-radius: 8px;
        background: var(--accentcolor, #F85BBE);
        border: none;
        color: #FFF;
    }

    .main-logo_container {
        display: none;
    }

    #mobileelogo {
        margin-bottom: 18px;
        width: 172px;
        margin-left: 14px;
    }

    @media (min-width: 380px) {
        #main-block-4-mainimg {
            left: 90px;
        }

        .block-4-box-1 {
            left: 70px;
        }

        .block-4_container-main-2 p {
            max-width: 280px;
            font-size: 14px !important;
        }
    }
    @media (min-width: 520px) {
        .block-3_container-main-1 p, .block-3_container-main-1 span {
            font-size: 18px;
        }

        #main-block-3-arrow-1 {
            left: 300px
        }

        .block-3-box-1 {
            margin-left: 20px;
        }

        #main-block-3-arrow-2 {
            position: absolute;
            margin-top: 350px;
            left: 255px;
        }

        .block-3-box-2 {
            margin-top: -100px;
            margin-left: 0;
        }

        .block-4_container-main-2 {
            margin-left: 256px;
        }

        .block-4_container-main-2 p {
            font-size: 18px !important;
            max-width: 400px !important;
        }

        .block-4-box-1 {
            top: -560px;
            left: 250px;
        }

        .block-4-box-2 {
            margin-top: 500px;
            left: 250px;
        }
        .block-7_container-art-1, .block-7_container-art-2, .block-7_container-art-3 {
            width: 800px;
            margin-top: -3px !important;
            height: max-content;
            flex-wrap: wrap !important;
            display: flex;
            flex-direction: row;
        }
        .object-artist {
            width: 266px;
            height: 512px;
            flex-wrap: wrap;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            flex-direction: column;
        }
        #mobileelogo {
            margin-bottom: 18px;
            width: 172px;
            margin-left: 100px;
        }
        #button-main-footer {
            width: 211px;
            margin-top: 36px;
            height: 56px;
            display: inline-flex;
            padding: 16px 40px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 8px;
            background: var(--accentcolor, #F85BBE);
            color: #FFFFFF;
            border: none;
            outline: none;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            cursor: pointer;
            transition: .2s;
            user-select: none;
            margin-left: 100px;

        }
    }
}