*{
    margin: 0;
    padding: 0;
}

aside{
    margin: 1em;
    height: max-content;
}

body {
  max-width: 70em;
  margin: 5% auto;
  font-family: Arial, Helvetica, sans-serif;
}

h1, header h2, header a, header a:visited{
    color: rgb(4, 75, 4);
}

header .phone, header address{
    float: right;
    color: rgb(4, 75, 4);
    font-size: 22pt;
    text-align: right;
    margin-top: 0;
}

header h1{
    font-size: xxx-large 
}

header h2{
    text-indent: 1em;
    padding: .2em;
}

header h2 span{
    display: inline-block;
    text-indent: -5em;
    font-size: larger;
}

header{ 
    padding: 2em;
}

header img{
    border-radius: 3em;
    max-height: 4em;
}

header p{
    font-size: 22pt;
}
#header-outer {
    border-bottom: thick solid rgb(4, 75, 4);
}

nav a{
    display: block;
    padding: .6em;
    font-weight: bold;
    text-decoration: none;
    color: rgb(4, 75, 4);
    border-bottom: solid 3px rgb(255, 255, 255);
    border-right: solid 3px rgb(255, 255, 255);
    text-transform: capitalize;
    background-color: white;
}
nav a:hover{
    border-bottom: solid 3px rgb(4, 75, 4);
    border-right: solid 3px rgb(4, 75, 4);

}

#index nav a:nth-child(1){
    background-color: rgb(4, 75, 4);
    color: whitesmoke;
}
#product nav a:nth-child(2){
    background-color: rgb(4, 75, 4);
    color: whitesmoke;
}

img{
    max-width: 100%;
}

.boxContentTwo figure{
    width: 50%;
    padding-top: 2em;
}

.boxContentThree figure{
    max-width: 25%;
    float: left;
}

p{
    margin: 1em auto;
}


table{
    margin: auto;
    max-width: 500px;
    margin-bottom: 2em;
    border: medium solid rgb(4, 75, 4);
    padding: 1em;
    border-collapse: collapse;
    clear: both;
}

caption{
    font-size: large;
    font-weight: bold;
    border: medium solid rgb(4, 75, 4);
    border-bottom: none;
    background-color: lightcyan;
    text-align: left;
    padding: .4em;
}
td, th{
    padding: .4em;
    border: thin dotted rgb(4, 75, 4);  
}

tr:nth-child(even){
    background-color: aliceblue;
}

tfoot tr:first-child{
    text-align: left;
}

ul, ol{
    margin-left: 2em;
}

.outerBox{
    border: medium solid rgb(4, 75, 4); 
    padding: .1em;
}

.innerBox{
    border: thin solid rgb(4, 75, 4); 
    padding: .7em;
}

p.innerBox{
    margin: 0;
}

.boxContentThree .outerBox{
    margin-top: 4em;
}

strong{
    font-variant: small-caps;
}

.left{
    clear: both;
    float: left;
}

.right{
    float: right;
    margin-left: 2em;
}

article{
    padding-top: 1em;
}

@media screen and (max-width: 1400px) {
    article{
        grid-template-areas: 
            "boxLogo"
            "boxContentOne"  
            "boxPhotoOne"
            "boxContentThree"
            "boxContentTwo"
            "boxPhotoTwo";
            width: 100%;
    }
    h2 span{
        font-size: medium;
    }
}

@media screen and (max-width: 600px) {
    header h2 span{
        width: 23%;
    }
    
    header h2{
        text-indent: 0;
    }
}

@media print  {
    body{
        transform: scale(0.6);
    }
    
    h2 span{
        font-size: medium;
    }
    footer{
        display:none;
    }
}