body {
     font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
   overflow: auto;
    margin: 0px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 100px;
    grid-template-areas:
      "top top"
      "main main";
      
    height: 100%;
 background-color:	#eef0ee;
  grid-gap:3rem;
}
.top{
  grid-area:top;
  }
#topL{
  float:right;
}

.g:hover{ 
}


.main{
 
grid-area:main;
margin-top:-7rem;
  
}
.main span{
   
  border-radius:15px;
  height:25rem;
  width:20rem;
  padding:1rem;
 display:inline;
  padding-top:7rem;
  padding-bottom:7rem; 
  padding-left:5rem;
  padding-right:5rem; 
}

.a{
background-color:#8FE875;
  margin-left:15vw;
  width:19rem;
  float:left;
  height:15rem;
  padding:.5rem;
  border-radius:15px;
}
.b{
 margin-right:15vw;
  background-color:#8FE875;
  width:19rem;
  float:right;
  height:15rem;
  padding:.5rem;
  border-radius:15px;
}
.bottom{
  margin-top:15rem;
}
.c{

margin-left:3rem;
background-color:#8FE875;
  margin-left:15vw;
  width:19rem;
  float:left;
  height:15rem;
  padding:.5rem;
  border-radius:15px;  
}
.d{
  margin-left:3rem;
  margin-right:15vw;
  background-color:#8FE875;
  width:19rem;
  float:right;
  height:15rem;
  padding:.5rem;
  border-radius:15px;
}
.img{
  height:6rem;
  width:10rem;
  background-color:#eef0ee;
}
.fa-star{
  color: #134611;
}
.name{
float:right;
 font-size:.8rem;
 margin-right:4rem;
}
.prep{
  margin-top:1rem;
}
.heart{
  padding: 7px;
  margin-top:2rem;
  margin-left:16.5rem;
  color: white;
}
.heart:hover{
  color:red;
}
/* modal */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 30px; 
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; 
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding:20px;
  border: 1px solid #888;
  width: 80%;
  height:90%;
  overflow-y: scroll;
}
.modal-content2 {
  background-color: #fefefe;
  margin: auto;
  padding:20px;
  border: 1px solid #888;
  width: 80%;
  height:50%;
  
}
#modalSub{
  border:2px solid black;
  width:5rem;
  text-align:center;
  margin:auto;
  margin-top:2rem;
  cursor:pointer;
  transition: background-color 1s;
  transition: color 1s;
}
#modalSub:hover{
  background-color:black;
  color:white;
}