/*
     *  Page Header
     *  
    */
        body>header,
        .XXXpage-header
        {
            xxxborder:2px solid green;
        }

        

    /*
     *  Page Header
     *  
    */

        body>header section,
        .XXXpage-header section 
        {

        }


    /*
     *
     *  Layout Div
     *  
    */
        body>header section>div
        {
            position: relative;
            min-height: 600px;
            height: 105vh;        

            xborder: 4px solid orange;
            background-color: pink;
            background-color: #ee5050;
            background-color: var(--colour-tw-gray-050);
            background-color: var(--colour-tw-neutral-100, red);


            background: linear-gradient(180deg, var(--colour-tw-neutral-300, red) 0%, var(--colour-tw-neutral-200, red) 75%, var(--colour-tw-neutral-050, red) 100%);

        }


    /*
     *
     *  Content Divs
     *  
    */
        body>header section>div div,
        .XXXpage-header section>div div
        {
            xborder: 4px dashed green;

            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100%; 
            position: absolute;
            z-index: auto;
            top: 0px;
            left: 0px;
            width:100%;
        }



    h1,
    body>header section h1
    {
        color: var(--var-font-color-h1, red);
    }


    h1:focus,
    body>header section h1:focus
    {
        box-shadow: 0 0 5px 5px hotpink;
        outline-color: hotpink;
        padding:5px;
        color: black;        
    }



    /*
     *
     *  Professional photo
     *  
    */    
        body>header section img
        {
            xborder: 1px solid purple;
            padding-bottom:70px;        /* this should be made dynamic at some stage - but meh */
            min-height: 400px;
            width: var(--var-img-header-width, 350px)        
        }