@media (min-width: 1367px) and (max-width: 1440px) {
    .hello .container {
        width: 60%;
    }
    .hello h1 {
        font-size: 74px;
    }
    .hello p {
        font-size: 24px;
        line-height: 32px;
    }
    .button {
        width: 320px;
        height: 320px;
    }
    .hello .button p {
        font-family: "Soyuz Grotesk";
        font-size: 40px;
        margin-top: 45%;
    }
    .hello .choose {
        margin: 28px;
    }
    .hello .hands {
        display: flex;
    }
    @keyframes hand-move-1 {
        0% {
            transform: scale(1, -1) rotate(-45deg) translate(0px, 800px);
        }
        100% {
            transform: scale(1, -1) rotate(-45deg) translate(0px, 400px);
        }
    }
    @keyframes hand-move-2 {
        0% {
            transform: rotate(45deg) translate(0px, 800px);
        }
        100% {
            transform: rotate(45deg) translate(0px, 400px);
        }
    }
    .main_game .top_line {
        height: 56px;
        border-color: white;
        padding: 0px 32px 0px 32px;
    }
    .main_game .bottom_line {
        height: 56px;
        border-color: white;
        padding: 0px 32px 0px 32px;
    }
    .main_game .content {
        font-size: 40px;
        padding-top: 10px;
    }
    .main_game .wrapper {
        width: 100vw;
        height: calc(100vh - 112px);
    }

    .main_game #bird {
        width: 120px;
        height: 120px;
        left: 160px;
    }

    .main_game .pole {
        height: 240px;
        width: 200px;
        font-size: 32px;
    }
    .main_game .pole2 {
        height: 280px;
        width: 200px;
        right: -100vw;
        font-size: 32px;
    }
    .level_end .result {
        font-size: 74px;
        margin: 32px;
        width: 45%;
    }
    .level_end .text {
        font-size: 32px;
        margin: 36px;
    }

    .level_end .text p {
        margin-bottom: 32px;
    }

    .level_end .hands {
        margin-left: -20%;
        margin-top: 5%;
        transform: scale(0.9, 0.9);
    }
    .level_end .button p {
        font-family: "Soyuz Grotesk";
        font-size: 40px;
        margin-top: 37%;
    }
    #lvl_2 img:nth-child(1) {
        height: 240%;
        margin-top: -52%;
        margin-left: 14%;
    }
    #lvl_2 img:nth-child(2) {
        height: 240%;
        margin-top: -52%;
        margin-left: -24%;
    }
    #lvl_3 {
        padding-top: 200px;
    }
    #lvl_3 .pair {
        margin-left: auto;
        margin-right: auto;
        width: 520px;
        height: 520px;
    }
    #lvl_3 p {
        width: 48px;
        font-size: 71px;
        margin-bottom: 16px;
        text-align: center;
    }
    #lvl_4 #lvl4-h {
        height: 40vw;
        width: 90vw;
        top: 25%;
        left: -50%;
    }
    #lvl_4 #circle {
        min-width: 1600px;
        height: 1600px;
        background-color: var(--red);
        top: -40%;
        left: -50%;
    }
    #lvl_5 .objects {
        max-width: 1400px;
        width: 1200px;
    }
    #lvl_5 .objects img {
        height: 80%;
    }
    #lvl_6 .eye:nth-child(7n) {
        transform: rotate(30deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 1) {
        transform: rotate(45deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 2) {
        transform: rotate(60deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 3) {
        transform: rotate(90deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 4) {
        transform: rotate(135deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 5) {
        transform: rotate(150deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 6) {
        transform: rotate(180deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye {
        margin-left: -40px;
    }

    .finish p {
        font-size: 72px;
        padding: 32px;
        margin: 0;
    }
    .finish p:nth-child(1) {
        margin-bottom: 120px;
    }
    .finish .button p {
        font-family: "Soyuz Grotesk";
        font-size: 40px;
        margin-top: 28%;
    }
    /*------------------------------------info---------------------------------*/
    #info #what {
        height: 56px;
        padding: 0px 32px 0px 32px;
        font-size: 40px;
    }
    #info #what p {
        padding-top: 4px;
    }
    #info #text {
        top: 1000px;
        width: 60%;
        padding: 16px 32px 32px 32px;
    }
    #info #text h2 {
        font-size: 74px;
        margin-bottom: 32px;
    }
    #info #text p {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 32px;
    }
    #info #text img {
        position: absolute;
        right: 32px;
        top: 32px;
        transform: scale(0.9, 0.9);
    }
}

@media (min-width: 1023px) and (max-width: 1366px) {
    .hello .putin_vor {
        top: 30%;
        padding: 32px;
        width: 60%;
        height: auto;
        font-size: 32px;
        z-index: 12;
        border: 4px solid white;
    }
    .hello .container {
        width: 70%;
    }
    .hello h1 {
        font-size: 68px;
        margin: 28px;
    }
    .hello p {
        font-size: 22px;
        line-height: 28px;
        margin: 28px;
    }
    .hello .choose {
        margin: 28px;
    }
    .button {
        width: 320px;
        height: 320px;
    }
    .hello .button p {
        font-family: "Soyuz Grotesk";
        font-size: 40px;
        margin-top: 45%;
    }
    .hello .hands {
        display: flex;
    }
    @keyframes hand-move-1 {
        0% {
            transform: scale(1, -1) rotate(-45deg) translate(0px, 800px);
        }
        100% {
            transform: scale(1, -1) rotate(-45deg) translate(0px, 400px);
        }
    }
    @keyframes hand-move-2 {
        0% {
            transform: rotate(45deg) translate(0px, 800px);
        }
        100% {
            transform: rotate(45deg) translate(0px, 400px);
        }
    }
    .main_game .top_line {
        height: 56px;
        border-color: white;
        padding: 0px 28px 0px 28px;
    }
    .main_game .bottom_line {
        height: 56px;
        border-color: white;
        padding: 0px 28px 0px 28px;
    }
    .main_game .content {
        font-size: 40px;
        padding-top: 10px;
    }
    .main_game .wrapper {
        width: 100vw;
        height: calc(100vh - 112px);
    }

    .main_game #bird {
        width: 120px;
        height: 120px;
        left: 166px;
    }

    .main_game .pole {
        height: 200px;
        width: 200px;
        font-size: 32px;
    }
    .main_game .pole2 {
        height: 220px;
        width: 200px;
        right: -100vw;
        font-size: 32px;
    }
    .level_end .result {
        font-size: 68px;
        margin: 28px;
        width: 45%;
    }
    .level_end .text {
        font-size: 32px;
        margin: 28px;
    }

    .level_end .text p {
        margin-bottom: 28px;
    }

    .level_end .hands {
        margin-left: -20%;
        margin-top: 0%;
        transform: scale(0.8, 0.8);
    }
    .level_end .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 37%;
    }

    #lvl_2 img:nth-child(1) {
        height: 240%;
        margin-top: -52%;
        margin-left: 20%;
    }
    #lvl_2 img:nth-child(2) {
        height: 240%;
        margin-top: -52%;
        margin-left: -24%;
    }
    #lvl_3 {
        padding-top: 120px;
    }
    #lvl_3 .pair {
        margin-left: auto;
        margin-right: auto;
        width: 400px;
        height: 400px;
    }
    #lvl_3 p {
        width: 48px;
        font-size: 72px;
        margin-bottom: 16px;
        text-align: center;
    }
    #lvl_4 #lvl4-h {
        height: 35vw;
        width: 80vw;
        top: 20%;
        left: -50%;
    }
    #lvl_4 #circle {
        min-width: 1600px;
        height: 1600px;
        background-color: var(--red);
        top: -40%;
        left: -50%;
    }
    #lvl_5 .objects {
        max-width: 1300px;
        width: 1200px;
    }
    #lvl_5 .objects img {
        height: 70%;
    }
    #lvl_6 .eye:nth-child(7n) {
        transform: rotate(30deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 1) {
        transform: rotate(45deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 2) {
        transform: rotate(60deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 3) {
        transform: rotate(90deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 4) {
        transform: rotate(135deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 5) {
        transform: rotate(150deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye:nth-child(7n + 6) {
        transform: rotate(180deg) scale(0.9, 0.9);
    }
    #lvl_6 .eye {
        margin-left: -40px;
    }
    .finish p {
        font-size: 64px;
        padding: 28px;
        margin: 0;
    }
    .finish p:nth-child(1) {
        margin-bottom: 80px;
    }
    .finish .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 28%;
    }
    .finish .hands {
        transform: scale(0.75, 0.75);
        top: -140%;
        left: 60%;
    }
    /*------------------------------------info---------------------------------*/
    #info #what {
        height: 56px;
        padding: 0px 28px 0px 28px;
        font-size: 32px;
    }
    #info #what p {
        padding-top: 8px;
    }
    #info #text {
        top: 1000px;
        width: 60%;
        padding: 16px 28px 28px 28px;
    }
    #info #text h2 {
        font-size: 72px;
        margin-bottom: 24px;
    }
    #info #text p {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 24px;
    }
    #info #text img {
        position: absolute;
        right: 28px;
        top: 28px;
        transform: scale(0.9, 0.9);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hello .container {
        width: 70%;
    }
    .hello h1 {
        font-size: 64px;
        margin: 28px;
    }
    .hello p {
        font-size: 22px;
        line-height: 32px;
        margin: 28px;
    }
    .hello .choose {
        margin: 28px;
    }
    .button {
        width: 280px;
        height: 280px;
    }
    .hello .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 45%;
    }
    .hello .hands {
        display: flex;
    }
    @keyframes hand-move-1 {
        0% {
            transform: scale(1, -1) rotate(-45deg) translate(0px, 800px);
        }
        100% {
            transform: scale(1, -1) rotate(-45deg) translate(0px, 300px);
        }
    }
    @keyframes hand-move-2 {
        0% {
            transform: rotate(45deg) translate(0px, 800px);
        }
        100% {
            transform: rotate(45deg) translate(0px, 300px);
        }
    }
    .main_game .top_line {
        height: 56px;
        border-color: white;
        padding: 0px 28px 0px 28px;
    }
    .main_game .bottom_line {
        height: 56px;
        border-color: white;
        padding: 0px 28px 0px 28px;
    }
    .main_game .content {
        font-size: 32px;
        padding-top: 10px;
    }
    .main_game .wrapper {
        width: 100vw;
        height: calc(100vh - 112px);
    }

    .main_game #bird {
        width: 100px;
        height: 100px;
        left: 124px;
    }

    .main_game .pole {
        height: 200px;
        width: 160px;
        font-size: 32px;
    }
    .main_game .pole2 {
        height: 240px;
        width: 160px;
        right: -100vw;
        font-size: 32px;
    }
    .main_game .back {
        transform: scale(0.8, 0.8);
    }
    .level_end .result {
        font-size: 64px;
        margin: 28px;
        width: 45%;
    }
    .level_end .text {
        font-size: 28px;
        margin: 28px;
    }

    .level_end .text p {
        margin-bottom: 28px;
    }

    .level_end .hands {
        margin-left: -40%;
        margin-top: 0%;
        transform: scale(0.7, 0.7);
    }
    .level_end .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 37%;
    }
    #lvl_2 img:nth-child(1) {
        height: 200%;
        margin-top: -48%;
        margin-left: 14%;
    }
    #lvl_2 img:nth-child(2) {
        height: 200%;
        margin-top: -48%;
        margin-left: -24%;
    }
    #lvl_3 {
        padding-top: 120px;
    }
    #lvl_3 .pair {
        margin-left: auto;
        margin-right: auto;
        width: 400px;
        height: 400px;
    }
    #lvl_3 p {
        width: 48px;
        font-size: 56px;
        margin-bottom: 16px;
        text-align: center;
    }
    #lvl_4 #lvl4-h {
        height: 40vw;
        width: 90vw;
        top: 30%;
        left: -50%;
    }
    #lvl_4 #circle {
        min-width: 1600px;
        height: 1600px;
        background-color: var(--red);
        top: -40%;
        left: -50%;
    }
    #lvl_5 .objects {
        max-width: 1000px;
        width: 900px;
    }
    #lvl_5 .objects img {
        height: 60%;
    }
    #lvl_6 .eye:nth-child(7n) {
        transform: rotate(30deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 1) {
        transform: rotate(45deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 2) {
        transform: rotate(60deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 3) {
        transform: rotate(90deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 4) {
        transform: rotate(135deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 5) {
        transform: rotate(150deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 6) {
        transform: rotate(180deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye {
        margin-left: -40px;
    }
    .finish p {
        font-size: 56px;
        padding: 28px;
        margin: 0;
    }
    .finish p:nth-child(1) {
        margin-bottom: 28px;
    }
    .finish .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 28%;
    }
    .finish .hands {
        transform: scale(0.75, 0.75);
        top: -140%;
        left: 60%;
    }
    /*------------------------------------info---------------------------------*/
    #info #what {
        height: 56px;
        padding: 0px 28px 0px 28px;
        font-size: 32px;
    }
    #info #what p {
        padding-top: 8px;
    }
    #info #text {
        top: 1000px;
        width: 60%;
        padding: 16px 28px 28px 28px;
    }
    #info #text h2 {
        font-size: 64px;
        margin-bottom: 28px;
    }
    #info #text p {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 28px;
    }
    #info #text img {
        position: absolute;
        right: 28px;
        top: 28px;
        transform: scale(0.75, 0.75);
    }
}
/*------------------------------------------------------------------------------------------768---------------------------------------------------------------------------------*/
@media (min-width: 429px) and (max-width: 768px) {
    .resourse_end,
    .putin_vor {
        top: 40%;
        padding: 32px;
        width: 60%;
        height: auto;
        font-size: 32px;
        z-index: 12;
        border: 4px solid white;
    }
    /*------------------------------------hello---------------------------------*/
    .hello {
        flex-direction: column;
    }
    .hello .container {
        width: 100vw;
        height: auto;
        flex-direction: column;
        border-bottom: 4px solid white;
    }
    .hello h1 {
        font-size: 7vw;
        margin: 24px;
    }
    .hello p {
        font-size: 20px;
        line-height: 22px;
        margin: 24px;
    }
    .hello .settings {
        display: flex;
        justify-content: space-around;
    }
    .hello .settings .hline-1 {
        width: 4px;
        height: auto;
    }
    .hello .choose {
        margin: 24px 24px 24px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #choose_2 {
        margin-right: 24px;
    }
    #char {
        width: 76px;
        height: 76px;
    }
    #prev-btn-1,
    #next-btn-1,
    #prev-btn-2,
    #next-btn-2 {
        width: 16px;
        height: 40px;
    }
    .hello .choose .c-1 h1 {
        margin-top: 0px;
    }
    .hello .choose:nth-child(1) p {
        margin-bottom: 20px;
    }
    .hello .hands {
        display: flex;
        transform: scale(0.75, 0.75);
        margin-top: -320px;
    }
    .button {
        width: 280px;
        height: 280px;
    }
    .hello .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 45%;
    }

    /*------------------------------------main game---------------------------------*/
    .main_game {
        position: absolute;
        overflow: hidden;
        width: 100vw;
    }
    .main_game .top_line {
        height: 56px;
        border-color: white;
        padding: 0px 24px 0px 24px;
    }
    .main_game .bottom_line {
        height: 56px;
        border-color: white;
        padding: 0px 24px 0px 24px;
    }
    .main_game .content {
        font-size: 32px;
        padding-top: 10px;
    }
    .main_game .wrapper {
        width: 100vw;
        height: calc(100vh - 112px);
    }

    .main_game #bird {
        width: 120px;
        height: 120px;
        left: 108px;
    }

    .main_game .pole {
        height: 240px;
        width: 20%;
        font-size: 32px;
    }
    .main_game .pole2 {
        height: 280px;
        width: 20%;
        right: -100vw;
        font-size: 32px;
    }
    .main_game .back {
        transform: scale(0.8, 0.8);
    }

    /*------------------------------------level end---------------------------------*/
    .level_end .content {
        height: auto;
        flex-direction: column;
    }

    .level_end .result {
        font-size: 7vw;
        margin: 24px;
    }

    .level_end .vline-2 {
        width: 100%;
        height: 4px;
        background-color: white;
        z-index: 3;
    }
    .level_end .text {
        font-size: 26px;
        margin: 24px;
        width: 90%;
    }

    .level_end .text p {
        margin-bottom: 24px;
    }

    .level_end .hands {
        margin-left: -85%;
        margin-top: 5%;
    }
    .level_end .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 37%;
    }

    /*------------------------------------lvl 2---------------------------------*/
    #lvl_2 img:nth-child(1) {
        transform: rotate(-45deg) scale(1, -1);
        height: 1200px;
        position: relative;
        margin-top: -10%;
    }
    #lvl_2 img:nth-child(2) {
        transform: rotate(45deg) scale(-1, -1);
        height: 1200px;
        position: relative;
        margin-top: -10%;
        margin-left: -40%;
    }

    /*------------------------------------lvl 3---------------------------------*/
    #lvl_3 {
        padding-top: 100px;
    }
    #lvl_3 p {
        width: 48px;
        font-size: 56px;
        margin-bottom: 16px;
        text-align: center;
    }
    /*------------------------------------lvl 4---------------------------------*/
    #lvl_4 #lvl4-h {
        height: 40vw;
        width: 90vw;
        top: 30%;
        left: -50%;
    }
    #lvl_4 #circle {
        min-width: 1600px;
        height: 1600px;
        background-color: var(--red);
        top: -40%;
        left: -50%;
    }
    /*------------------------------------lvl 5---------------------------------*/
    #lvl_5 .objects {
        max-width: 800px;
        justify-content: center;
        height: 600px;
    }
    #lvl_5 .objects img {
        transform: scale(0.6, 0.6);
    }

    #lvl_5 .objects img:nth-child(1) {
        margin-left: -7%;
    }

    #lvl_5 .objects img:nth-child(3) {
        margin-top: -20%;
    }

    /*------------------------------------lvl 6---------------------------------*/
    #lvl_6 .eye:nth-child(7n) {
        transform: rotate(30deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 1) {
        transform: rotate(45deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 2) {
        transform: rotate(60deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 3) {
        transform: rotate(90deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 4) {
        transform: rotate(135deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 5) {
        transform: rotate(150deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye:nth-child(7n + 6) {
        transform: rotate(180deg) scale(0.75, 0.75);
    }
    #lvl_6 .eye {
        margin-left: -100px;
    }
    /*------------------------------------finish---------------------------------*/
    .finish .container {
        width: 100%;
        height: auto;
    }
    .finish p {
        font-size: 56px;
        padding: 24px;
        margin: 0;
    }
    .finish p:nth-child(1) {
        margin-bottom: 24px;
    }
    .finish .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 28%;
    }
    .finish .hands {
        transform: scale(0.75, 0.75);
        top: -50%;
        left: -10%;
    }

    /*------------------------------------info---------------------------------*/
    #info #what {
        height: 56px;
        padding: 0px 24px 0px 24px;
        font-size: 32px;
    }
    #info #what p {
        padding-top: 8px;
    }
    #info #text {
        top: 1000px;
        width: 80%;
        padding: 16px 24px 24px 24px;
    }
    #info #text h2 {
        font-size: 56px;
        margin-bottom: 24px;
    }
    #info #text p {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 24px;
    }
    #info #text img {
        position: absolute;
        right: 24px;
        top: 24px;
        transform: scale(0.75, 0.75);
    }
}

@media (min-width: 361px) and (max-width: 428px) {
    #help {
        width: 80%;
    }

    #help p {
        font-family: "Soyuz Grotesk";
        font-size: 24px;
        width: 90%;
        margin: 24px auto 24px auto;
    }
    .resourse_end,
    .putin_vor {
        top: 40%;
        padding: 24px;
        width: 80%;
        height: auto;
        font-size: 24px;
        z-index: 12;
        border: 4px solid white;
    }

    /*------------------------------------hello---------------------------------*/
    .hello {
        flex-direction: column;
    }
    .hello .container {
        width: 100vw;
        height: auto;
        flex-direction: column;
        border-bottom: 4px solid white;
    }
    .hello h1 {
        font-size: 56px;
        margin: 24px;
    }
    .hello p {
        font-size: 20px;
        line-height: 22px;
        margin: 24px;
    }
    .hello .settings .hline-1 {
        display: none;
    }
    .hello .choose {
        margin: 24px 24px 24px 24px;
    }
    .hello #choose_2 {
        display: none;
    }
    #char {
        width: 76px;
        height: 76px;
    }
    #prev-btn-1,
    #next-btn-1,
    #prev-btn-2,
    #next-btn-2 {
        width: 16px;
        height: 40px;
    }
    .hello .choose .c-1 {
        width: 100%;
    }
    .hello .choose .c-1 h1 {
        margin-top: 0px;
    }
    .hello .choose:nth-child(1) p {
        margin-bottom: 20px;
    }
    .hello .hands {
        display: flex;
        transform: scale(0.5, 0.5);
        margin-top: -450px;
    }
    .button {
        width: 240px;
        height: 240px;
    }
    .hello .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 45%;
    }
    #mob-next {
        display: block;
    }

    #mob-back img {
        width: 70%;
        margin: 32px 0 0 8px;
    }
    #mob-back:hover {
        transition: 1s;
        transform: scale(0.9, 0.9);
    }
    #game-btn {
        display: none;
    }
    /*------------------------------------main game---------------------------------*/
    .main_game {
        position: absolute;
        overflow: hidden;
        width: 100vw;
    }
    .main_game .top_line {
        height: 56px;
        border-color: white;
        padding: 0px 24px 0px 24px;
    }
    .main_game .top_line #anxious {
        opacity: 0;
    }
    .main_game .bottom_line {
        height: 56px;
        border-color: white;
        padding: 0px 24px 0px 24px;
    }
    .main_game .content {
        font-size: 32px;
        padding-top: 10px;
    }
    .main_game .wrapper {
        width: 100vw;
        height: calc(100vh - 112px);
    }

    .main_game #bird {
        width: 100px;
        height: 100px;
        top: 30%;
        left: 38px;
    }

    .main_game .pole {
        height: 240px;
        width: 160px;
        font-size: 32px;
        right: -160px;
    }
    .main_game .pole2 {
        height: 280px;
        width: 160px;
        right: calc(0-100vw-200px);
        font-size: 32px;
    }
    .main_game .back {
        transform: scale(0.8, 0.8);
    }

    /*------------------------------------level end---------------------------------*/
    .level_end .content {
        height: auto;
        flex-direction: column;
    }

    .level_end .result {
        font-size: 56px;
        margin: 24px;
    }

    .level_end .vline-2 {
        width: 100%;
        height: 4px;
        background-color: white;
        z-index: 3;
    }
    .level_end .text {
        font-size: 26px;
        margin: 24px;
        width: 90%;
    }

    .level_end .text p {
        margin-bottom: 24px;
    }

    .level_end .hands {
        transform: scale(0.5, 0.5);
        margin-left: -130%;
        margin-top: -10%;
    }
    @keyframes hands-1 {
        0% {
            transform: translateY(160px) rotate(45deg);
        }
        50% {
            transform: translateY(0px);
        }
        100% {
            transform: translateY(160px) rotate(45deg);
        }
    }
    @keyframes hands-2 {
        0% {
            transform: scale(-1, 1) translateY(0px);
        }
        50% {
            transform: scale(-1, 1) translateY(160px) rotate(45deg);
        }
        100% {
            transform: scale(-1, 1) translateY(0px);
        }
    }
    .level_end .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 37%;
    }

    /*------------------------------------lvl 2---------------------------------*/
    #lvl_2 img:nth-child(1) {
        transform: rotate(45deg) scale(-1, 1);
        height: 1200px;
        position: relative;
        margin-top: 80%;
        margin-left: -40%;
    }
    #lvl_2 img:nth-child(2) {
        transform: rotate(45deg) scale(-1, -1);
        height: 1200px;
        min-height: 700px;
        position: relative;
        margin-top: -120%;
        margin-left: -10%;
    }

    /*------------------------------------lvl 3---------------------------------*/
    #lvl_3 {
        padding-top: 240px;
    }
    #lvl_3 .pair {
        margin-left: auto;
        margin-right: auto;
        width: 400px;
        height: 400px;
    }
    #lvl_3 p {
        width: 48px;
        font-size: 56px;
        margin-bottom: 16px;
        text-align: center;
    }
    /*------------------------------------lvl 4---------------------------------*/
    #lvl_4 #lvl4-h {
        height: 40vw;
        width: 90vw;
        top: 40%;
        left: -50%;
    }
    #lvl_4 #circle {
        min-width: 1000px;
        height: 1000px;
        background-color: var(--red);
        top: 0%;
        left: -50%;
    }
    /*------------------------------------lvl 5---------------------------------*/
    #lvl_5 .objects {
        max-width: 400px;
        flex-direction: column;
        justify-content: center;
        height: 700px;
        top: 0%;
        flex-wrap: nowrap;
    }
    #lvl_5 .objects img {
        transform: scale(0.5, 0.5);
        margin-bottom: -60%;
    }
    /*------------------------------------lvl 6---------------------------------*/
    #lvl_6 .eye:nth-child(7n) {
        transform: rotate(30deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 1) {
        transform: rotate(45deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 2) {
        transform: rotate(60deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 3) {
        transform: rotate(90deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 4) {
        transform: rotate(135deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 5) {
        transform: rotate(150deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 6) {
        transform: rotate(180deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye {
        margin-left: -200px;
    }
    /*------------------------------------finish---------------------------------*/
    .finish .container {
        width: 100%;
        height: auto;
    }
    .finish p {
        font-size: 32px;
        padding: 24px;
        margin: 0;
    }
    .finish p:nth-child(1) {
        margin-bottom: 24px;
    }
    .finish .button p {
        font-family: "Soyuz Grotesk";
        font-size: 32px;
        margin-top: 28%;
    }
    .finish .hands {
        display: flex;
        transform: scale(0.5, 0.5);
        top: -40%;
        left: -10%;
    }

    /*------------------------------------info---------------------------------*/
    #info #what {
        height: 56px;
        width: 100vw;
        padding: 0px 24px 0px 24px;
        font-size: 28px;
    }
    #info #what p {
        padding-top: 8px;
    }
    #info #text {
        top: 1000px;
        width: 80%;
        padding: 16px 24px 24px 24px;
    }
    #info #text h2 {
        font-size: 40px;
        margin-bottom: 24px;
    }
    #info #text p {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 24px;
    }
    #info #text img {
        position: absolute;
        right: 24px;
        top: 24px;
        transform: scale(0.75, 0.75);
    }
}

@media (min-width: 40px) and (max-width: 360px) {
    #help {
        width: 80%;
    }

    #help p {
        font-family: "Soyuz Grotesk";
        font-size: 24px;
        width: 90%;
        margin: 24px auto 24px auto;
    }
    .resourse_end,
    .putin_vor {
        top: 40%;
        padding: 20px;
        width: 80%;
        height: auto;
        font-size: 20px;
        z-index: 12;
        border: 4px solid white;
    }
    /*------------------------------------hello---------------------------------*/
    .hello {
        flex-direction: column;
    }
    .hello .container {
        width: 100vw;
        height: auto;
        flex-direction: column;
        border-bottom: 4px solid white;
    }
    .hello h1 {
        font-size: 48px;
        margin: 20px;
    }
    .hello p {
        font-size: 16px;
        line-height: 20px;
        margin: 20px;
    }
    .hello .settings .hline-1 {
        display: none;
    }
    .hello .choose {
        margin: 20px;
    }
    .hello #choose_2 {
        display: none;
    }
    #char {
        width: 52px;
        height: 52px;
    }
    #prev-btn-1,
    #next-btn-1,
    #prev-btn-2,
    #next-btn-2 {
        width: 16px;
        height: 40px;
    }
    .hello .choose .c-1 {
        width: 100%;
    }
    .hello .choose .c-1 h1 {
        margin-top: 0px;
    }
    .hello .choose:nth-child(1) p {
        margin-bottom: 4px;
    }
    .hello .hands {
        display: flex;
        transform: scale(0.5, 0.5);
        margin-top: -600px;
    }
    .button {
        width: 160px;
        height: 160px;
    }
    .hello .button p {
        font-family: "Soyuz Grotesk";
        font-size: 24px;
        margin-top: 40%;
    }
    #mob-next {
        display: block;
    }

    #mob-back img {
        width: 70%;
        margin: 32px 0 0 8px;
    }
    #mob-back:hover {
        transition: 1s;
        transform: scale(0.9, 0.9);
    }
    #game-btn {
        display: none;
    }
    /*------------------------------------main game---------------------------------*/
    .main_game {
        position: absolute;
        overflow: hidden;
        width: 100vw;
    }
    .main_game .top_line {
        height: 48px;
        border-color: white;
        padding: 0px 20px 0px 20px;
    }
    .main_game .top_line #anxious {
        opacity: 0;
    }
    .main_game .bottom_line {
        height: 48px;
        border-color: white;
        padding: 0px 20px 0px 20px;
    }
    .main_game .content {
        font-size: 24px;
        padding-top: 10px;
    }
    .main_game .wrapper {
        width: 100vw;
        height: calc(100vh - 112px);
    }

    .main_game #bird {
        width: 80px;
        height: 80px;
        top: 30%;
        left: 40px;
    }

    .main_game .pole {
        height: 160px;
        width: 120px;
        font-size: 24px;
        right: -160px;
    }
    .main_game .pole2 {
        height: 120px;
        width: 120px;
        right: -100vh;
        font-size: 24px;
    }
    .main_game .back {
        transform: scale(0.7, 0.7);
        margin-left: -40px;
    }

    /*------------------------------------level end---------------------------------*/
    .level_end .content {
        height: auto;
        flex-direction: column;
    }

    .level_end .result {
        font-size: 48px;
        margin: 20px;
    }

    .level_end .vline-2 {
        width: 100%;
        height: 4px;
        background-color: white;
        z-index: 3;
    }
    .level_end .text {
        font-size: 20px;
        margin: 22px;
        width: 90%;
    }

    .level_end .text p {
        margin-bottom: 20px;
    }

    .level_end .hands {
        transform: scale(0.3, 0.3);
        margin-left: -110%;
        margin-top: -30%;
    }
    @keyframes hands-1 {
        0% {
            transform: translateY(160px) rotate(45deg);
        }
        50% {
            transform: translateY(0px);
        }
        100% {
            transform: translateY(160px) rotate(45deg);
        }
    }
    @keyframes hands-2 {
        0% {
            transform: scale(-1, 1) translateY(0px);
        }
        50% {
            transform: scale(-1, 1) translateY(160px) rotate(45deg);
        }
        100% {
            transform: scale(-1, 1) translateY(0px);
        }
    }
    .level_end .button p {
        font-family: "Soyuz Grotesk";
        font-size: 24px;
        margin-top: 32%;
    }

    /*------------------------------------lvl 2---------------------------------*/
    #lvl_2 img:nth-child(1) {
        transform: rotate(45deg) scale(-1, 1);
        height: 800px;
        position: relative;
        margin-top: 80%;
        margin-left: -40%;
    }
    #lvl_2 img:nth-child(2) {
        transform: rotate(45deg) scale(-1, -1);
        height: 800px;
        min-height: 700px;
        position: relative;
        margin-top: -80%;
        margin-left: 10%;
    }

    /*------------------------------------lvl 3---------------------------------*/
    #lvl_3 {
        padding-top: 160px;
    }
    #lvl_3 .pair {
        margin-left: auto;
        margin-right: auto;
        width: 240px;
        height: 240px;
    }
    #lvl_3 p {
        width: 48px;
        font-size: 40px;
        margin-bottom: 16px;
        text-align: center;
    }
    /*------------------------------------lvl 4---------------------------------*/
    #lvl_4 #lvl4-h {
        height: 40vw;
        width: 90vw;
        top: 40%;
        left: -50%;
    }
    #lvl_4 #circle {
        min-width: 600px;
        height: 600px;
        background-color: var(--red);
        top: 0%;
        left: -50%;
    }
    /*------------------------------------lvl 5---------------------------------*/
    #lvl_5 .objects {
        max-width: 400px;
        flex-direction: column;
        justify-content: center;
        height: 700px;
        top: -12%;
        flex-wrap: nowrap;
        margin-left: -2%;
    }
    #lvl_5 .objects img {
        transform: scale(0.3, 0.3);
        margin-bottom: -60%;
    }
    #lvl_5 .objects img:nth-child(1) {
        margin-left: -7%;
        margin-top: -20%;
    }
    #lvl_5 .objects img:nth-child(2) {
        margin-top: -20%;
    }
    #lvl_5 .objects img:nth-child(3) {
        margin-top: -30%;
    }
    /*------------------------------------lvl 6---------------------------------*/
    #lvl_6 .eye:nth-child(7n) {
        transform: rotate(30deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 1) {
        transform: rotate(45deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 2) {
        transform: rotate(60deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 3) {
        transform: rotate(90deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 4) {
        transform: rotate(135deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 5) {
        transform: rotate(150deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye:nth-child(7n + 6) {
        transform: rotate(180deg) scale(0.5, 0.5);
    }
    #lvl_6 .eye {
        margin-left: -200px;
    }
    /*------------------------------------finish---------------------------------*/
    .finish .container {
        width: 100%;
        height: auto;
    }
    .finish p {
        font-size: 24px;
        padding: 20px;
        margin: 0;
    }
    .finish p:nth-child(1) {
        margin-bottom: 20px;
    }
    .finish .button p {
        font-family: "Soyuz Grotesk";
        font-size: 24px;
        margin-top: 28%;
    }
    .finish .hands {
        display: flex;
        transform: scale(0.5, 0.5);
        top: -80%;
        left: -40%;
    }

    /*------------------------------------info---------------------------------*/
    #info #what {
        height: 48px;
        width: 100vw;
        padding: 0px 20px 0px 20px;
        font-size: 20px;
    }
    #info #what p {
        padding-top: 12px;
    }
    #info #text {
        top: 1000px;
        width: 80%;
        padding: 16px 20px 20px 24px;
    }
    #info #text h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }
    #info #text p {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    #info #text img {
        position: absolute;
        right: 20px;
        top: 20px;
        transform: scale(0.5, 0.5);
    }
}