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

:root{
    --background-color-main: white;
    --background-color: #f8f9f9;
    --secondary-background-color: #e5e7e9 ;
    --hearder-bg-clr-: #f8b5d3;
    --accent-color: #d055e7 ;
    --text-color-main: #212121;
    --text-color-secondary: #7d7d7d;
    --text-color-third: #d7dbdd;

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;                           
    --text-stylish1: Leckerli One;
    --text-stylish2: Send Flowers;
}

main{
    display: flex;
    justify-content: center;
    width: 100dvw;
    min-width: 100vw;
    
    .body-container{
        width: 60%;
        height: 100vh;
        margin-left: 20%;
        margin-right: 20%;

        .section-1{
            position: relative;
            display: flex;
            align-items: center;
            margin-top: 0;
            width: 100%;
            height: 98%;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            box-shadow: 256px 0px 1px var(--hearder-bg-clr-),
                        -270px -0px 1px var(--hearder-bg-clr-);
            background: var(--hearder-bg-clr-);

            div{
                margin-left: -11%;
                .static-mobile{
                    display: none
                }
                .static{
                    font-family: var(--text-stylish1);
                    text-align: center;
                    font-size: 90px;
                    text-wrap: nowrap;
                    line-height: 1.1;
                }
                
                .animate{
                    position: relative;
                    width: 320px;
                    margin-left: 20%;
                    font-family: var(--text-stylish2);
                    font-weight: bold;
                    font-size: 70px;
                    font-style: italic;
                    text-wrap: nowrap;
                }
                .animate::before{
                    content: '';
                    position: absolute;
                    inset: 0;
                    background-color: var(--hearder-bg-clr-);
                    animation: typewriter 4s ease forwards;
                    animation-iteration-count: infinite;
                }
            }

            img{
                position: absolute;
                right: -17%;
                bottom: 0;
                width: 75%;
                height: 97%;
            }
        }
    }

    .back-to-top{
        position: fixed;
        display: none;
        bottom: 25%;
        right: 3%;
        width: 20px;
        padding: 5px 7px;
        border-radius:  500%;
        background: var(--accent-color);
        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15), 
                    -0px -.1px 3px rgba(0, 0, 0, 0.15); 
        z-index: 60;

        svg{
            fill: var(--background-color-main);
            transform: rotate(-90deg);
        }
    }
}

@keyframes typewriter{
    to{
        left: 100%;
    }
}

@media (max-width: 1280px){
    main{
        .body-container{
            .section-1{
                img{
                    right: -30%;
                    width: 75%;
                    height: 95%;
                }
            }
        }
    }
}
@media (max-width: 1160px){
    main{
        .body-container{
            .section-1{
                div{
                    .static{
                        font-size: 80px
                    }
                    .animate{
                        font-size: 60px
                    }
                }
                img{
                    width: 80%;
                }
            }
        }
    }
}
@media (max-width: 1000px){
    main{
        .body-container{
            .section-1{
                div{
                    .static{
                        transform: translate(-15%, -20%);
                        font-size: 70px
                    }
                    .animate{
                        transform: translate(-2%, -60%);
                        margin-left: 0;
                        font-size: 60px
                    }
                }
                img{
                    right: -40%;
                    height: 80%;
                    width: 90%;
                }
            }
        }
    }
}
@media (max-width: 750px){
    main{
        .body-container{
            .section-1{
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
                div{
                    .static{
                        font-size: 60px
                    }
                    .animate{
                        font-size: 50px
                    }
                }
                img{
                    right: -40%;
                    height: 70%;
                    width: 100%;
                }
            }
        }
    }
}
@media (max-width: 650px){
    main{
        .body-container{
            .section-1{
                div{
                    .static{
                        transform: translate(-15%, -30%);
                        font-size: 50px
                    }
                    .animate{
                        transform: translate(4%, -70%);
                        font-size: 40px
                    }
                }
                img{
                    right: -50%;
                    height: 70%;
                    width: 110%;
                }
            }
        }
    }
}
@media (max-width: 500px){
    main{
        .body-container{
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            .section-1{
                box-shadow: 0px 0px 0px var(--hearder-bg-clr-),
                            -0px -0px 0px var(--hearder-bg-clr-);
                div{
                    .static{
                        display: none
                    }
                    .static-mobile{
                        display: flex;
                        transform: translate(18%, -50%);
                        font-family: var(--text-stylish1);
                        font-size: 55px;
                        text-wrap: nowrap;
                        line-height: 1;
                    }
                    .animate{
                        transform: translate(15%, -190%);
                        font-size: 45px
                    }
                }
                img{
                    right: -2%;
                    height: 50%;
                    width: 80%;
                }
            }
        }
    }
}
@media (max-width: 365px){
    main{
        .body-container{
            .section-1{
                div{
                    .static-mobile{
                        transform: translate(18%, -40%);
                        font-family: var(--text-stylish1);
                        font-size: 50px;
                    }
                    .animate{
                        transform: translate(15%, -163%);
                        font-size: 40px
                    }
                }
            }
        }
    }
}