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

        /*=========== Mobile styles and bigger =======*/

        body {
            background-color: #EEE;
            color: #345;
            font-family: verdana;
        }

        .container {
            margin: 4px 8px;
        }

        .header-primary {
            background-color: rgb(241, 229, 205);
            color: rgb(220,220,220);
            min-height: 80px;
            text-align: center;
        }

        .header-primary > h1 {
            color: rgb(32, 78, 52);
            padding: 20px;
        }
        
        .header-primary > h1 > img {
            width: 55px;
        }
        /* .container > header {
            text-align: center;
        } */

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

        .nav-primary {
            background-color: rgb(32, 78, 52);
            min-height: 70px;
            flex-grow: 1;
            flex-basis: 260px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
            gap: 10px;
            padding: 10px 0px;
        }

        .nav-primary a {
            padding: 8px 12px;
            background-color: rgb(241, 229, 205);
            color: #234;
            text-decoration: none;
            width: 150px;
            text-align: center;
            margin: auto;
        }

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

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

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

        article > header {
            background-color: rgb(20,200,20);
            min-height: 60px;
            margin: 8px;
        }

        header + figure.hero {
            background-color: rgb(200,200,20);
            min-height: 200px;
            margin: 8px;
            background-image: url(../hobby/images/ochoco-divide.jpg);
            background-size: cover;
            background-position: center;
            /* aspect-ratio: 1.2/1; */
        }

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

        article footer {
            background-color: rgb(100,100,100);
            color: #EEE;
            min-height: 60px;
        }

        /*======== landscape tablet and bigger =======*/

        @media screen and (min-width: 1020px) {
         
        
        .nav-primary {
            flex-grow: 0;
        }

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

        article {
            flex-basis: 400px;
        }

        article > header {
            margin: 0px;
            
        }

        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: darkred;
            font-size: 3em;
            padding-right: 2px;            
        }

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


        } /* end of wide screen styles */