/* the box model stuff is probably wise to add each area like header and footer is a grid? Also if we end en

*, *:before, *:after {
  box-sizing: border-box;
}

*/


html {
    background-color: #EBDF41;
    font-size: 1.5rem; /*24px/16px rems are generally preferred for font size look on MDN https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users*/
    height:100%;
    box-sizing: border-box;  

}
  


* {
    box-sizing: inherit;
}



.businessname {
    text-align: center;
    color:red;
}

.cards {
margin: 0;
            padding: 0;
            list-style: none;
            background-color: orange;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;

}


.card1 {
grid-column: 2 / 4;
            grid-row: 2;
}



.main-nav {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav a {
    padding: .5em 1em;
    display: block;
}



.sec-nav {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sec-nav a {
    padding: .5em 1em;
    display: block;
}





.push {
    margin-left: auto;
}
    




  body {
font: normal 100% Cambria, Georgia, serif;
font-size: 1em;
height:100%;
padding: 0;
margin: 5px;

  }



 .page {
    display:grid;
    min-height: 100%;
 } 

.container {
    margin: 0 -15px;
    padding: 0;
    list-style: none;
    display: flex;
}

.container li {
    background-color: #e5dbff;
    border: 1px solid #d0bfff;
    margin: 10px 10px 10px 10px;
    padding: 5px;
    border-radius: 10px;
}

img {
    max-width: 100%;
}


/* Not bad attempt so far */
@media screen and (min-width: 48em) {

.checkoutbutton {
   max-width: 50%;
}

}