*{
        margin: 0; padding: 0; border: 0;
        box-sizing: border-box;
    }

    /* ---------------mobile styles and bigger --------------------*/

    body{
        background-color: rgb(154, 134, 129);
        color: rgb(0, 0, 0);
        font-family: verdana;
    }

    .container{
        margin: 4px 8px;
    }

    .header-primary {
        background-color: rgb(255, 111, 0);
        color: rgb(22, 57, 59);
        min-height: 80px;
        text-align: center;
    }

    .page-body{
        display: flex;
        flex-flow: row wrap;
        
    }


    .nav-primary{
        background-color: rgb(114, 96, 65);
        min-height: 70px;
        flex-grow: 1;
        flex-basis: 250px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        gap: 10px;
        padding: 10px 8px;
    }

    .nav-primary a{
        padding: 8px 12px;
        background-color: rgb(232, 207, 198);
        color: #234;
        text-decoration: none;
    }

    .nav-primary .desktop{
        border: 2px solid #234;
        display: none;

    }

    .nav-primary .phone{
        border: 4px solid black;
        display: inline;
    }



    article {
        background-color: rgb(247, 223, 150);
        flex-grow: 1;
        flex-basis: auto;
    }

    article > header {
        margin: 0px;
    }

    header + figure.hero {
        background-color: bisque;
        aspect-ratio: 2/1;
        margin: 8px;
        background-image: url(/images/6HairLion.jpg);
        background-size: cover;
        background-position: center;

    }

    article p {
        font-size: 1.2em;
        line-height: 1.4;
        margin: .2em .8px 1em .8px;
    }

    article footer{
        background-color: gray;
        color: white;
        min-height: 6px;
    }

    header + figure.hero {
        margin: 16px;
        width: 260px; aspect-ratio: 1;
        float: left;

    }

    article > p:nth-of-type(1){
        margin-top: 16px;
    }

    article > p:nth-of-type(1)::first-letter{
        display: block;
        color: rgb(148, 72, 72);
        font-size: 3em;
        float: left;
        padding: 8px;

    }

    .nav-primary .desktop{
        display: inline;
    }

    /* ---------------landscape tablet and bigger--------------------*/
    @media screen and (min-width: 1020px){

        .header-primary{
            text-align: left;
        }

        .nav-primary{
            flex-grow: 0;
        }

        article{
            flex-basis: 400px;
        }

        article > header{
            margin: 0px;
        }
        

    }