* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
/* this encompasses the space around the content on both sides, in desktop mode. if there were no color for the container or wrapper, it would be in the background of the webpage */
 body {
     background-color: #F1FAF1;
     font-size:1rem;
}
/* ============================================*/
/* This section contains the main framework of the page, from header, menu, box for content and footer */
/* ============================================*/
/* Container is a flex box that arranges the content top to bottom in a column, and hold all the content except the blank sides visible on a wide screen Contains wrapper, main and footer */
 .container {
     display: flex;
     flex-direction: column;
     max-width: 1100px;
     margin: 0 auto;
     background-color: #fffef8;
     background-image: url('../images/svg-background-green-really-tiny.png');
     background-repeat: repeat;
    /* fallback height */
     min-height: 100vh;
    /* new small viewport height for modern browsers min-height:100svh;
    */
     font-family:"Aller", sans-serif;
}
/* area for main content between header and footer main is a flex child of container */
 .main {
     width:100%;
     border-left: 3px solid #ECF2EE;
     border-right: 3px solid #ECF2EE;
}
/* footer is a flex child of container */
/* The wrapper is a grid box that contains all the elements in the header;
 image, title, menubar */
 .wrapper {
     display: grid;
     grid-template-columns: 1fr ;
     gap: 0;
    /* grid-auto-rows: minmax(50px, auto);
     */
     grid-auto-rows: max-content;
    /*adjusts each row for content height */
}
/* the logoandtitle contain the round logo and the logo title as a child box, in desktop/tablet mode, beside each other */
 .logoandtitle {
     grid-column: 1/2;
     grid-row: 1/2;
     display: flex;
     align-items: center;
     background-color: #225F32;
     padding: 20px 20px 10px 20px;
}
/* div that contains image */
 .logo-image {
     width: 200px;
}
/* image inside div */
 .logo {
     width: 100%;
}
/* Title text */
 .logo-title {
     margin-right: 40px;
     font-size: 2.3rem;
     color: #C5A332;
     line-height: 1.3;
     font-family: "Merienda", sans-serif;
      font-weight: bold;
     text-shadow: -2px 0px 0px white;
     margin-left: 10px;
}
/* flex box containing the title text words, arranged in a column */
 .logo-name {
     display: flex;
     flex-direction: column;
     gap: 0.6rem;
}
/* flex box containing the phone and naturotherapy name, displays at right side of logo and title */
 .phone-top-box {
     grid-column: 2/3;
     grid-row: 1/2;
     display: flex;
     flex-wrap:wrap;
     gap:40px;
     justify-content: end;
     align-content: start;
     padding:20px;
     background-color: #225F32;
     color: beige;
     font-weight: 600;
     text-align: right;
}
/* grid box containing top menu */
 .menu {
     grid-column: 1/3;
     grid-row: 2/3;
     background: rgba(241, 224, 119, 0.2);
     border-bottom: 3px solid #EBDCA7;
     padding: 10px;
}
 a.menulink {
     color: #806705;
     font-size: 1.2rem;
     font-family: serif;
     font-weight: bold;
     text-decoration: none;
}
/* flex box formatting the top menu */
 .menu-items {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
     font-family: serif;
     font-weight: bold;
     max-width: 100%;
     gap:10px;
}
/* Footer */
 .footer {
     padding: 10px;
    /* background-color: #5D8D6A;
     */
    /* background-color: #51895E;
     */
     color:#185726;
     font-style:italic;
     font-weight:600;
     width: 100%;
     height: 60px;
     margin-top: auto;
     text-align: center;
    /* background-color: #497355;
     */
     border-top: 10px solid rgba(81, 137, 94, 0.7);
     background-image:none;
     background-color: #F1FAF1;
}
 .bold {
     font-weight:bold;
}
 .contain-link {
    /* prevent long emails from forcing width off page
    These are technically the same, but use both */
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
}
/* ============================================*/
/* Media Queries up to 900px */
/* ============================================*/
 @media(max-width:900px) {
     .container {
         max-width: 900px;
    }
     .phone-top-box {
         gap:10px;
    }
}
/* ============================================*/
/* Media Queries up to 700px */
/* ============================================*/
 @media(max-width:700px) {
    /* parent flex box for holding content, contains child wrapper, main and footer */
     .container {
         max-width: 700px;
    }
    /* flex child of container, first grid, encompasses header content*/
     .wrapper {
         display: grid;
         grid-template-columns: 1fr;
        /* grid-auto-rows: minmax(100px, auto);
         */
         grid-auto-rows: max-content;
         align-content: center;
         justify-content: center;
         max-width: 100%;
    }
    /* main flex child of container, holds all the different website content */
     .main {
         margin:0 auto;
    }
    /* flex box aligning the title under the logo image on cell phones */
     .logoandtitle {
         grid-column: 1/2;
         grid-row: 1/2;
         flex-direction: column;
         padding: 0 
    }
    /* div that contains image */
     .logo-image {
         width: 240px;
         margin-top: 30px;
    }
    /* Title text */
     .logo-title {
         text-align: center;
         margin-bottom: 20px;
    }
    /* grid box for bar under logo and above menu, with phone # */
     .phone-top-box {
         grid-column: 1/2;
         grid-row: 2/3;
         justify-content: space-around;
         flex-direction:row;
        /* justify-content: space-around;
         */
         background-color: #C8B654;
         padding: 6px;
         color: #ffffff;
         font-size: 1.2rem;
         height: auto;
         justify-content: center;
         gap:20px;
    }
    /* menu now sits directly below phone-top-box bar */
     .menu {
         grid-column: 1/2;
         grid-row: 3/4;
    }
}
/* ============================================*/
/* Media Queries up to 500px */
/* ============================================*/
 @media(max-width:500px) {
     .menu-items {
         gap:2px;
    }
     .home::after {
         content: " / ";
    }
     .services::after{
         content: " / ";
    }
     .faq::after {
         content: " / ";
    }
     .about::after {
         content: " / ";
    }
}