body{background-color: rgb(255, 255, 255);}

.topbar{background-color: rgb(220, 220, 220);
padding-left: 15px;
padding-right:15px;
margin-top: -20px;
}
.bardiv{display:flex;
  align-items: center;
  justify-content: space-between;
margin:20px;
}
.head{font-size:50px;
font-family:calibri;
margin:0px;
color:cornflowerblue;
text-align: center;
font-weight:bolder;
text-shadow: 1.5px 1.5px black;}
.topbar ul{list-style: none;
padding: 0px;
}
.bardiv a{display: block;
text-decoration: none;
padding: 15px;
background-color: cornflowerblue;
border-radius: 10px;
color: blue;
font-family: Verdana;
margin-left: 5px;}
.bardiv a:hover{background-color: rgb(79, 134, 235);}
.bardiv li{float:left;}  




.searchbox{
width: 600px;
background-color: ffffff;
border-radius: 8px;
margin: 0px auto 0px;}

.row{display: flex;
align-items: center;
padding: 10px 20px;}

input{flex:1;
height: 50px;
background: whitesmoke;
border:0;
outline: 0;
font-size: 18px;
color: black;
padding-left:5px;}

.inputsearch{border-radius:14px;}

.main-photos{height: 200px;
width: 200px;}

/*the boxes*/
.features{display: flex;
    flex-wrap: nowrap;
      flex-direction: column;
    justify-content: space-evenly;
  align-items: center;
}
    
    /*each feature box content*/
    .features > div {
      max-height: 200px;
      height: 50%;
      width:1000px;
      padding:15px;
      border-style: solid;
      display: flex;
      flex-direction: row;
      align-items: center;
    border-radius: 25px;
  margin-bottom: 70px;}
    
    /*hover thing*/
    .features > div:hover {max-height:300px;
    width:1200px;}
    
    /*also feature content*/
    .features > div > h3 {font-size: 45px;
    text-align: center;
  padding-right: 25px;
padding-left: 20px;
font-family:Georgia;}
    .features > div > img {
    border-style: solid;
    border-radius: 10px;}
    .features > div > p {padding:7px 15px;
    font-size: 170%;}
.features > div > p > br{  display: block;
  margin-bottom: 2px;
  font-size:2px;
  line-height: 2px;}

  /*top text*/
.intro {
  text-align: center;
  font-family: verdana;
  text-decoration: underline;
margin-bottom: 50px;
}
    
/*each bg color*/
.features > .pancakebg {
  background-color: bisque;
}

.features > .wafflebg{background-color: beige;}

.features > .pbjbg{background-color:violet;}
.features > .caesarbg{background-color: chartreuse;}

.features > .spaghettibg{background-color:darkorange;}
.features > .grilledchickenbg{background-color: burlywood;}

.features > .breakfastbg {background-color: antiquewhite;}
.features > .lunchbg {background-color: deepskyblue;}
.features > .dinnerbg {background-color: darkmagenta;}

.recipe-boxes {display: flex;
align-items: center;
flex-direction: column;
justify-content: space-evenly;
flex-wrap: nowrap;}

.recipe-boxes > div {border-style: solid;
margin: 35px auto;
width:600px;
border-radius: 20px;
background-color: rgb(250, 250, 250);
padding: 20px;
}
.recipe-boxes > div > ul {font-size: 130%; 
  font-family: verdana;
}
.recipe-boxes > div > ol {font-size: 130%; 
font-family: verdana;
}
.recipe-boxes > div > h3 {font-size: 150%;
font-family: Tahoma;
text-align: center;}

.cite {margin-top: 100px;
text-align: center;}

.tittle{font-family: georgia;
text-align: center;
font-size: 250%;}
.photos{border-style: solid;
width: 350px;
height: 250px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-width: 10px;}

.q1{font: size 15px;
  font-family:calibri;
  margin:0px;
  color:cornflowerblue;
  text-align: center;
  font-weight:bolder;

  }
  .q1 > ul > li{list-style: none;
  margin: 15px;
  display: block;
padding: 10px;
background-color: cornflowerblue;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
width: 100px;
  }
  .q1 > ul > li > a{color: blue;
    font-family: Verdana;
    text-decoration: none;

  }

  .q1 > ul > li:hover {width: 120px;}

  a {text-decoration: none;
    color: blue;
}