:root {
    --headerFontSize: clamp(18px, 15cqi, 98px);
    --borderRadius: 5rem;
    --paddingContent: 3rem 2rem;
    --contentWidth: clamp(280px, 90%, 1000px);

    --glasseffectStrenght: .5;
}

.page--header {
    container-type: inline-size;
    padding-block: 5rem;
    margin-inline: auto;
}

    @supports (padding-block: 5cqi) {
        .page--header {
            padding-block: 5cqi;
        }
    }

    .page--header > *{
        font-size: var(--headerFontSize, clamp(36px, 36cqi, 98px));
        text-align: center;
    }


.mediaContent--text--h3 {
    padding-block: 2rem;

}



/*------------------------------------------------------------------------*/
/*--------------------------  Hire Me Page  ------------------------------*/
/*------------------------------------------------------------------------*/
#mainHireMe{
    --bgSize: clamp(30px, 5%, 50px);
}

#mainHireMe__header h2:last-of-type{
    margin-top: 3rem;
    font-size: 2rem;
}

#mainHireMe #phone--Dkay{

    -moz-transform: scaleX(-1) rotate(-10deg);
    -o-transform: scaleX(-1) rotate(-10deg);
    -webkit-transform: scaleX(-1) rotate(-10deg);
    transform: scaleX(-1)rotate(-10deg);
    filter: FlipH;
    -ms-filter: "FlipH";

    

}


#mainHireMe #typewritter--AGluck{

    -moz-transform: scaleX(-1) rotate(8deg);
    -o-transform: scaleX(-1) rotate(8deg);
    -webkit-transform: scaleX(-1) rotate(8deg);
    transform: scaleX(-1)rotate(8deg);
    filter: FlipH;
    -ms-filter: "FlipH";

    

}


.hireMeSections{
    width: var(--contentWidth, 80%);

    padding: var(--paddingContent);
    margin-inline: auto;

    border-radius: var(--borderRadius);
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: hsl(var(--clr__brd--h) var(--clr__brd--l) var(--clr__brd--s));
}

#hireMe {
    padding-top: 100px;
    background-position: left 50%;
}

/*------------------------------------------------------------------------*/
/*--------------------------  Hire Me Form  ------------------------------*/
/*------------------------------------------------------------------------*/



.hireMe__form form{
    justify-content: space-evenly;

    padding: 2rem ;
    width: var(--contentWidth, 80%);
    margin-inline: auto;
    gap: 2rem;

    border-radius: var(--borderRadius, 5rem);
    border-top: 1px solid hsl(var(--clr-white));
    border-left: 1px solid hsl(var(--clr-white));
}

.hireMe__form form input[type="radio"]{ 
    display: none; }

     .hireMe__form form input[type="radio"]:checked+label{ 
        font-style: italic; 
        font-weight: bold;}

 .hireMe__form form > .flex {
    gap: 1rem;
}

    .contactMe__inputs--long {
        width: 90%;
    }

    .hireMe__form form fieldset {
        margin-inline: auto;
        width: 80%;
    }

    .hireMe__form form fieldset div {
        padding-inline: .5rem;

    }        
    .hireMe__form form textarea {
        padding: 1.5rem 2rem;
        width: 80%;
        height: auto;
    }

    .hireMe__form form button{
        align-self: center;
        margin-inline: auto;
        width: clamp(20%, 200px, 50%);

    }

        @media (width <= 400px) {
            .hireMe__form form textarea {
                width: 90%;
            }

            .hireMe__form form button{
                width: clamp(50%, 200px, 90%);
            }

            .hireMe__form form .h-captcha{
                width: clamp(50%, 200px, 90%);
            }
        }



    .hireMe__form form .h-captcha {
        align-self: center;
        margin-inline: auto;
        border-radius: 10px;
        
    }

        @media (width >= 300px) {
            .hireMe__form form .h-captcha{
                max-width: 200px;
                overflow: hidden;
                border-radius: 10px;
            }
        }




/*------------------------------------------------------------------------*/
/*--------------------------  Contact page  ------------------------------*/
/*------------------------------------------------------------------------*/
#mainContact   {
    --bgSize: clamp(30px, 5%, 50px);
}

#mainContact__content {
    background-color: transparent;
    
}

#mainContact .contact__card{
    align-items: center;
    justify-content: space-evenly;

    width: 291px;
    height: 388px;
    border-radius: 1rem;
    
} 

#mainContact .contact__card .bgImg{
    width: 100%;
    height: 100%;


    
    border-radius: inherit;
    overflow: hidden;

    z-index: 1;
 
}

.creditsCard__content{

    place-content: end center;
    width: 100%;
    height: 100%;

    margin-inline: auto;
    padding: 0;

    z-index: 10;
}
    #mainContact .contact__card .contact__card__content {
        
        width: 100%;
        height: 125px;

        padding-inline: .5rem;
        padding-block: .5rem;
        margin-inline: auto;

        border-radius: 1rem;
    }


    #mainContact .contact__card .contact__card__content .mediaContent--text--h3 {
        padding: 0;
    }

    /*"Here to help" card, no picuter*/
    #mainContact .contact__card:first-of-type .contact__card__content{
        width: 100%;
        margin: -75px 10px 10px 10px;
    } 
        /*Signiature - "Ditta"*/
        #mainContact .contact__card:first-of-type .contact__card__content span{
            display: block;
            font-size: larger;
            text-indent: 7rem;
        }

    /*buttons on the cards*/

    #mainContact .contact__card .contact__card__content .button {
        margin-inline: auto;
        font-size: 1rem;
        height: 44px;
    }
    /*google button only for Calendar*/
    #mainContact .contact__card .contact__card__content button {
        
        padding: 0;
        margin-top: -50px;        
    }

#mainContact .align--center--flex {
    filter:  contrast(120%) grayscale(100%); 
    border-radius: 1rem; 
    overflow: hidden;

}
    #mainContact #mainContact__content .flex .align--center--flex #typewritter--tradeMark {overflow: hidden;}


#mainHireMe .decor--bgContainer div{
   
    aspect-ratio: 3/4;
    border-radius: 1rem;
    overflow: hidden;
}



#mainContact__content>div{
    margin-bottom: clamp(30px, 10%, 100px);
}