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

body {
    background-color: #67DDCB;
   color: #0D3F36;   
   font-family: "Quicksand", sans-serif;
}
   
   h1,h2, p {
       padding: 1em;
   }
/*Links*/
a {
      color: #0D3F36;
}

a:hover{
    background color: #0D3F36;
    Color: #ffffff;
    text-decoration: underline;
}

img {
    border: .5em ridge  #383838;
}

.gridHeader {
    display: grid;
    grid-template-columns: 1fr 7fr 4fr;
    /* make the grid-template-columns fr's add up to 12 */
  
    align-items: left;
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
}

/*IMAGE*/
img.gridLogo {
    width: 90%;
    justify-self: center;
}


.interiorGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: end;
}

.interiorGrid a {
    font-size: 1.25em;
    padding: 1em .5em .5em .5em;
    width: 100%;
    color: #FFFFFF;
    align-self: center;
}

.interiorGrid a:hover {
    color: #67DDCB;
}
/*CONTAINER*/
.container {
  display: flex;
  

  align-items: ;
  

  justify-content: center;
  flex-wrap: wrap;
}
    /*BOXES*/
.box {
  
  flex-basis: 25%;
  

  margin: .5em;
  border: 1px solid black;
  border-radius: 10px;
  padding: 1em;
}


.box img {
  max-width: 30%;
  display: block;
  margin: auto;
}



main {
       padding:2em; 

}