.h1 {  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
.h3 {  font-family: Arial, Helvetica, sans-serif;

}
.p1 {
  font-family: Arial, Helvetica, sans-serif;
  margin: 35px;
  text-align: center;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
 display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
margin: 15px;
 line-height: 1.5;

}
.container {
  display: flex;
  justify-content: center;
    height: auto;
  
  
}
.header {
  display: grid;
  width: 630px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 10px;
}
/* Style the header */
.head {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:  rgb(139,0,0);
    color: white;
  height: 100px;
}

.cards {
  display: grid;
  width: 630px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
    margin-bottom: 5px;
}


/* Style the cards */

.card {
float:left;
font-family: "Bosca", "Bodini", "Bookman Old-Style", sans-serif;
font-size: .9em;
align-items: center;
text-align: center;
    background-color: #F5F5DC;
    color: black;
  height: 190px;
      outline: 1px solid;
    outline-color: black;
}

/* style the individual item display */

.itemcard {
text-align: left;
    margin: 20 20 20 20;
    background-color: white;
    color: black;
  height: auto;
      outline: 1px solid;
    outline-color: black;
    
}

.footer {
  display: grid;
  width: 630px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
    margin-bottom: 15px;
}
/* Style the item display */
.itempic {
 justify-content: center;
  align-items: center;
    background-color: #F5F5DC;
      outline: none;
        height: auto;
}


/* Style the footer */
.foot {
  display: flex;
  width: 610px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  background-color:  rgb(139,0,0);
  color: white;
  margin: 12px auto;
  line-height: 1.3;
}