body {
  background-image: url("../img/flat-lay-2583213_960_720.jpg");
  background-size: cover;
}
h1 {
  font-family: "Macondo", serif;
  font-weight: 50%;
  text-align: center;
  font-size: 35px;
  color: rgb(157, 93, 130);
  line-height: 1.5;
  border-radius: 50px;
  padding: 8px;
  background: white;
}
header {
  max-width: 600px;
  margin: 50px;
}
.container {
  max-width: 600px;
  display: block;
  margin: 30px auto;
  padding: 10px;
}
form {
  padding: 50px 10px;
  background: radial-gradient(
    circle at 5.3% 17.2%,
    rgb(255, 208, 253) 0%,
    rgb(255, 237, 216) 90%
  );
  border-radius: 10px;
  margin: 0 0 5px 0;
  display: flex;
  box-shadow: 4px 5px 30px rgb(220, 220, 220);
}
.examples-search {
  color: rgb(138, 84, 115);
  font-size: 11px;
  margin: -55px 0;
  padding: 10px;
}
footer {
  margin: 90px 30px;
  border-top: 1px solid rgb(220, 176, 201);
  text-align: center;
  color: rgb(48, 48, 48);
  font-size: 11px;
  padding: 15px;
  font-family: verdana;
}
a {
  color: rgb(157, 93, 130);
  text-decoration: none;
}
a:hover {
  color: rgb(184, 137, 165);
}
.textbox {
  font-size: 15px;
  padding: 15px;
  border-radius: 50px;
  border: none;
  width: 100%;
}
.submit {
  background: linear-gradient(to right, rgb(173, 83, 137), rgb(60, 16, 83));
  color: white;
  padding: 2px 6px;
  border-radius: 20px;
  border: none;
  margin: 0 0 0 5px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 2px 5px 15px rgb(169, 168, 168);
}
.submit:hover {
  background: rgb(138, 78, 113);
  color: white;
}
.recipe {
  background: radial-gradient(
    circle at 5.3% 17.2%,
    rgb(255, 208, 253) 0%,
    rgb(255, 237, 216) 90%
  );
  margin: 90px 20px 0 20px;
  font-family: verdana;
  font-size: 15px;
  line-height: 1.5;
  padding: 5%;
  border-radius: 5px;
  border-left: 4px solid #b8477c;
  box-shadow: 2px 2px 10px rgb(207, 207, 207);
}
.hidden {
  display: none;
}
.recipe strong {
  color: rgb(138, 78, 113);
}
.recipejs {
  font-size: 33px;
}
.blink {
  animation: blink-animation 1s steps(3, start) infinite;
  -webkit-animation: blink-animation 1s steps(3, start) infinite;
}
@keyframes blink-animation {
  60% {
    opacity: 0;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.user {
  font-size: 36px;
  font-family: "Macondo", serif;
}
.user-inter {
  font-family: sans-serif;
  font-family: 15px;
  color: rgb(98, 45, 76);
}