*{
    margin:0;
    padding:0;
    font-family: 'Raleway', sans-serif;
}

#header{
    width: 100%;
    height: auto;
    background-color: rgb(115 64 96);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#logo,#search {
    margin:1rem;
    align-self: center;
    color: white;
}

#logo{
    flex:2;    
}

#logo a {
    color:white;
    text-decoration: none;
}

#searchField:focus{
    outline:2px solid rgb(203, 170, 191);
}

#container {
    text-align: center;
    padding:1rem;
}

#title {
    margin:1rem;
}

#title p {
    font-weight: bolder;
    font-size: 1.5rem;
    letter-spacing: .2rem;
    color: rgb(115 64 96);

}

#cards {
    display: flex;
    justify-content: space space-evenly;
    flex-wrap: wrap;
    margin:0.5rem;
}

.card{
    padding:1%;
    text-align: center;
    margin:1rem auto;
}

.card img, #mealImg img{
    width:15rem;
    height:15rem;
}

.card a {
    text-decoration: none;
    color: black;
}

.card a h2, #mealImg h1 {
    font-weight: bold;
}

#aMeal {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.mealBlock {
   border:2px solid rgb(115 64 96);
   border-radius: 5px;
   margin:0.5rem;
   padding:1rem;
   width: 30%;
   align-self: flex-start;
}

#mealImg {
    width: auto;
}

#recipe p{
    text-overflow: wrap;
}

#ingredients h3, #recipe h3, #mealImg h1{
   margin-bottom: 1rem;
}

#ingredients ul li{
    list-style-type: none;
    text-align: left;
    margin:.2rem;
}