/*
 COLORS

 rgb(143,129,83)
 rgb(176,226,215)
 rgb(220,203,149)
 rgb(164,98,169)
 rgb(140,90,143)

*/


html, body {
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  background-color: rgb(220,203,149);
}

h1 {
  text-align: center;
}

.search {
  background-color: rgb(143,129,83);
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  padding: 50px;
  margin: 20px;
  width: 80%;
  box-shadow: 10px 10px 5px #888888;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search label {
  font-size: 1.5em;
  margin: 0 20px;
}

.search input {
  border: 5px solid white;
      -webkit-box-shadow:
        inset 0 0 8px  rgba(0,0,0,0.1),
              0 0 16px rgba(0,0,0,0.1);
      -moz-box-shadow:
        inset 0 0 8px  rgba(0,0,0,0.1),
              0 0 16px rgba(0,0,0,0.1);
      box-shadow:
        inset 0 0 8px  rgba(0,0,0,0.1),
              0 0 16px rgba(0,0,0,0.1);
      padding: 15px;
      background: rgba(255,255,255,0.5);
      margin: 0 0 10px 0;
}

input[type="text"] {
    width: 200px;
    font-size: 1.5em;
    font-weight: bolder;
}

.button {
  margin: 0 20px;
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 13.5px 27px;
   -webkit-border-radius: 23px;
   -moz-border-radius: 23px;
   border-radius: 23px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

.search-results {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 20px;
}

.recipe {
  background-color: rgb(176,226,215);
  border-radius: 10px;
  flex-basis: 30%;
  border-style: solid;
  border-width: 2px;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  box-shadow: 10px 10px 5px #888888;
}

.recipe-title {
  flex-basis: 100%;
  margin: 5px;
}

.recipe-ingredients {
  flex-basis: 100%;
  margin: 0 5px;
  font-size: 0.5em;
}

.recipe-image {
  /*flex-basis: 100%;*/
  /*flex: display;*/
  /*justify-content: center;*/
  margin: 10px;
}