/* Прописываю для 1920 x 1080 */
#greetings{
    display:flex;
    overflow-y: clip;
    width:100%;
    margin-inline:auto;
    margin-bottom:0;
    position: relative;
    height:850px;

    h1{margin:0;}
}

#greetings .blurry{
    backdrop-filter:blur(15px);
}


#greetings .image-holder{
    position: absolute;
    right: -140px;
    width: 747px;
    height: 872px;
}

#greetings .image-holder>img{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}


.smooth-container{
    z-index: 10;
    margin-top: 70px;
    position: relative;
    height: fit-content;
}

.smooth-container .smooth-border{
    --delta-length:0;

    --border-width:2px;
    --curve-radius-num:40;
    --curve-radius: calc(var(--curve-radius-num) * 1px);
    --inner-curve-radius:20px;
    --neck-width:170;

    --top-left-arm-width: 100;
    --top-left-arm-margin: -50;
    --bottom-left-arm-width: 100;
    --bottom-left-arm-margin: -50;

    --top-right-arm-width: 400;
    --top-right-arm-margin: 0;
    --bottom-right-arm-width: 750;
    --bottom-right-arm-margin: 0;

    --upper-part-height: 240px;
    --lower-part-height: 370px;


    >div{
        position:relative;
        display:flex;
        height:100px;
        width:fit-content;

        /*backdrop-filter: blur(15px);
        background: rgba(0, 0, 0, 0.6);
        z-index: 3;*/

        >.blurry{border-radius: var(--curve-radius);}
    }

    .upper-part{
        height:var(--upper-part-height);
    }

    .lower-part{
        height: var(--lower-part-height);
    }


    .left-arm{
        border:solid var(--border-width) gray;
        border-right:0;
        border-radius: var(--curve-radius) 0 0 var(--curve-radius);
    }
    .right-arm{
        border:solid var(--border-width) gray;
        border-left:0;
        border-radius: 0 var(--curve-radius) var(--curve-radius) 0;
        width:200px;
    }
    .upper-part>.left-arm{
        width: calc(var(--top-left-arm-width) * 1px);
        margin-left: calc(var(--top-left-arm-margin) * 1px);
    }
    .lower-part>.left-arm{
        width: calc(var(--bottom-left-arm-width) * 1px);
        margin-left: calc(var(--bottom-left-arm-margin) * 1px);
    }
    .upper-part>.right-arm{
        width: calc(var(--top-right-arm-width) * 1px);
        margin-right: calc(var(--top-right-arm-margin) * 1px);
    }
    .lower-part>.right-arm{
        width: calc(var(--bottom-right-arm-width) * 1px);
        margin-right: calc(var(--bottom-right-arm-margin) * 1px);
    }

    .chest-cavity{
        width:calc(var(--neck-width) * 1px);
    }
    .upper-part>.chest-cavity{
        border-top:solid var(--border-width) gray;
    }
    .lower-part>.chest-cavity{
        border-bottom:solid var(--border-width) gray;
    }


    .scapula{
        width:var(--inner-curve-radius);
        position:relative;
    }
    .upper-part>.scapula{
        border-top:solid var(--border-width) gray;
    }
    .lower-part>.scapula{
        border-bottom:solid var(--border-width) gray;
    }

    .cowl-muscle{
        width: calc(var(--inner-curve-radius) + var(--border-width) * 2);
        height: calc(var(--inner-curve-radius) + var(--border-width) * 2);
        position: absolute;
        overflow: hidden;
    }
    .cowl-muscle:before{
        content: "";
        width: calc(var(--inner-curve-radius) * 4);
        height: calc(var(--inner-curve-radius) * 4);
        border: solid var(--border-width) gray;
        border-radius: calc(var(--inner-curve-radius) + var(--border-width) * 2);
        position: absolute;
    }
    .left-arm+.scapula>.cowl-muscle{
        /*right: calc((var(--border-width) + var(--inner-curve-radius)) * -1);*/
    }
    .left-arm+.scapula>.cowl-muscle:before{
        right:0;
    }
    .chest-cavity+.scapula>.cowl-muscle{
        /*right: calc((var(--border-width) + var(--inner-curve-radius)) * -1);*/
    }
    .chest-cavity+.scapula>.cowl-muscle:before{
        left:0;
    }
    .upper-part>.scapula>.cowl-muscle{
        bottom: calc((var(--border-width) + var(--inner-curve-radius))* -1);
    }
    .upper-part>.scapula>.cowl-muscle:before{
        top:0;
    }
    .lower-part>.scapula>.cowl-muscle{
        top: calc((var(--border-width) + var(--inner-curve-radius))* -1 - 0.5px);
    }
    .lower-part>.scapula>.cowl-muscle:before{
        bottom: 0;
    }



    .neck{
        width: calc(var(--neck-width) * 1px);
        height: calc(var(--inner-curve-radius) * 2);
        margin-left:calc((var(--top-left-arm-margin) + var(--top-left-arm-width)) * 1px);
    }
}


.smooth-container .header-container{
    margin: 1rem 60px;
    width: min-content;
    top:0;
    position: absolute;

    h1{
        text-wrap: wrap;
        font-weight: lighter;
    }
}

.smooth-container .text-container{
    margin: 40px 60px;
    max-width: 100%;
    position: absolute;
    width: 895px;

    >.button{
        margin-top:2rem;
    }
}

#greetings .mobile-text-container{
    display:none;
}





@media only screen and (max-width: 1440px){
    .section{margin-inline:0!important;}
}

@media only screen and (max-width: 1280px){
    #greetings{height:727px;}
    #greetings h1{
        font-size:64px;
        line-height:64px;
    }
    .smooth-container{
        margin-top:60px;

        .smooth-border{
            --upper-part-height:180px;
            --top-right-arm-width: 250;
            --neck-width: 80;
            --lower-part-height:340px;
            --bottom-right-arm-width: 467;
        }

        .header-container{
            margin: 20px 44px 28px 16px;
        }

        .text-container{
            margin: 30px 16px;
            width: auto;

            >.button{
                padding:1.4rem 2.2rem;
                width:100%;
                margin-top:0;
            }
        }
    }
    #greetings .image-holder{
        position:relative;
        left: calc((100% - 1000px) / 2 - 130px);
        min-width: 623px;
        height: 727px;
    }
}


@media only screen and (max-width:1024px){
    #greetings{height:800px;}
    .smooth-container{
        margin-top:60px;
        margin-left: calc((100vw - 768px) / 2 - 30vw);

        .smooth-border{
            --upper-part-height:180px;
            --top-left-arm-width: 500;
            --top-right-arm-width: 130;
            --neck-width: 40;
            --lower-part-height:340px;
            --bottom-left-arm-width: 150;
            --bottom-left-arm-margin: calc(30px + var(--delta-length));
            --bottom-right-arm-width: var(--top-right-arm-width);
            --inner-curve-radius:12px;
        }

        .lower-part{margin-left:auto;}

        .header-container{right:0;}

        .text-container{
            display:none;
        }
    }


    #greetings .image-holder{
        position: relative;
        left: -140px;
        min-width: 438px;
        max-width:fit-content;
        height: 512px;
        z-index: 10;
    }

    #greetings .mobile-text-container{
        display:block;
        position: absolute;
        height: 290px;
        width: -webkit-fill-available;
        margin-inline: 16px;
        padding: 20px;
        bottom: 0;
        border: solid 2px gray;
        border-radius: 40px 40px 0 0;
        z-index: 11;
        background: black;

        >.button{
            padding:1.4rem 2.2rem;
            width:100%;
            margin-top:0;
        }
    }
}


@media only screen and (max-width:768px){
    .smooth-container{
        margin-left: 0;
        margin-top: 30px;

        .smooth-border{
            --top-left-arm-width: 120;
            --top-left-arm-margin: -40;
            --top-right-arm-width: 240;
            --neck-width: 40;
            --bottom-left-arm-width: 60;
            --bottom-left-arm-margin: 20;
            --bottom-right-arm-width: 280;
            --lower-part-height: 470px;
        }
    }

    .smooth-container .smooth-border .upper-part>.scapula>.cowl-muscle {
        bottom: calc((var(--border-width) + var(--inner-curve-radius))* -1 + -1px);
    }
    .smooth-container .smooth-border .lower-part>.scapula>.cowl-muscle{
        top: calc((var(--border-width) + var(--inner-curve-radius))* -1);
    }

    #greetings .image-holder{
        left: calc((100% - 768px) / 1.4 - 40px);
    }

    #greetings .mobile-text-container{
        height: 340px;
    }

    #greetings .blurry{backdrop-filter: blur(10px);}
}

@media only screen and (max-width: 560px){
    #greetings{height:980px;}

    .smooth-container .smooth-border{
        --bottom-left-arm-margin: 20;
        --bottom-right-arm-margin: 0;
    }

    #greetings .image-holder{
        position: absolute;
        left: 0;
        bottom:340px;
        margin-inline:auto;
    }

    #greetings .mobile-text-container{
        height: 340px;
        width: -webkit-fill-available;
        border:0;
        border-top: solid 2px gray;
        border-radius:0;
        margin:0;

        >.button{padding: 0.8rem 2.2rem}
    }
}

@media only screen and (max-width: 425px){
    #greetings{height:800px;}

    #greetings h1{
        font-size:48px;
        line-height:48px;
    }

    #greetings .image-holder{
        position: absolute;
        left: 0;
        bottom:340px;
        margin-inline:auto;
        max-height:352px;
        min-width:303px;
    }

    .smooth-container .smooth-border{
            --top-left-arm-width: 80;
            --top-right-arm-width: 190;
            --neck-width: 40;
            --bottom-left-arm-width: 40;
            --bottom-left-arm-margin: 0;
            --bottom-right-arm-width: 180;
            --bottom-right-arm-margin: 60;
            --lower-part-height: 470px;
            --upper-part-height: 140px;
    }

    .smooth-container .header-container{right:auto;}
}