*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

head, body{font-family: Arial, Helvetica, sans-serif;}

header{
    background-color: #f8f8f8;
    font-size: 40px;
    height: 100px;}
h1{
    font-size: 50px;
    text-align: left;
    color: rgb(255, 255, 255);
    margin-left: 10px;
    font-style: italic;
}
.introh2{
    color: rgb(0, 0, 0);
width: 80%;}



.header{position: relative;
    text-align: center;
    color: white
 }
.cooked{ object-fit: cover;
width: 100%; height: 100px;}



.navbar{
    display: flex;
}

.homerecipe{position: absolute;
    top: 20px;
    text-align: center;
padding-left: 50px; }

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #e1ac28;
    font-size: 20px;
    font-weight: bold;
   
  }
  .navlist {
    float: left;
  }
  
  .navbar .navlist a, .navbar .dropbtn {
    display: inline-block;
    color: rgb(255, 255, 255);
    text-decoration: none;
    padding: 10px 50px;
    text-align: center;
   }

   .navlist a:hover, .dropdown:hover .dropbtn {background-color: rgb(96, 59, 3);
    transition-duration: 0.4s
}

.navlist, .dropdown {
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffb700;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #ffb700;}
  
  .dropdown:hover .dropdown-content {
    display: block;}


.featured{
    display: flex;
    width: 40%;
    justify-content: center;
    align-items: center;
    border: 17px solid #ffb700;
    border-radius: 20px;
    border-width:  10px;;
    padding: 0px 20px;
    margin: 0;
    background-color: rgb(255, 255, 255);
}
.featured-banner{display: flex;
flex-direction: column;}

.featured-text{display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
padding-left: 20px;
width: 100;
font-size:40px;}

.quick-recipe-button{align-self: flex-start;}

.mango-featured{
    width: 200px;
    padding: 15px;
}

.mango-featured::after{content:"";
clear: both;display: table;}

.main-index{display: flex;
    flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 20px;}

.rhonda-featured{font-size: 36px;
margin-bottom: 15px;}

footer{
   position: sticky;
    width: 100%;
    left: 0px;
    bottom: 0%;
    padding: 10px ;
    color: white;
    background-color: #ffb700
    ;}

#rhondabarry{
    width: 700px;
    border-radius: 700px;
    padding: 100px;
}

.paragraph{
    display: flex;
    flex-direction: row;
    padding-top: 50px;
    font-size: 25px;
}

.equiph2, h2{padding: 20px;
margin-left: 10px;
font-size: 40px;}

.equipments {font-size: 30px;
padding-left: 15px;
list-style-type: none;}


.quick-nav{  
    background-color: rgb(224, 17, 17) ;
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    font-size: 18px;
    border: none; 
    font-weight: bold;
    border-radius: 10px; 
    cursor: pointer; 
    transition: 0.3s ease;
    margin: 1px 20px 10px 55px;
    text-decoration: none;

 }

 .quick-recipe{background-color: rgb(224, 17, 17);
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;

 }

.quick-nav:hover{ 
    background-color: rgb(80, 80, 80) ;
    transition-duration: 0.4s;
}

.note {padding-left: 20px;}

.ingredient-image{padding: 1;
    color: rgb(0, 0, 0);
    margin-left: 10px;
    text-decoration: none;}

.ingredient-image:hover{
    color: blue;
}

.ingredients{display: flex;}

.ingredient-notes{ 
    width: 470px;
    border: 17px solid #ffb700;
    padding: 0px 20px;
    margin: 0;
    position: absolute;
    top: 250px;
   right: 20px;
}

.ingredient-title{font-size: 20px ;
    font-weight: bold;
padding-bottom:5px;}

.quick-recipe{background-color: rgb(224, 17, 17) ;
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    font-size: 18px;
    border: none; 
    font-weight: bold;
    border-radius: 10px; 
    cursor: pointer; 
    transition: 0.3s ease;
    margin: 1px 20px 10px 55px;
    justify-content: center;
align-items: center;
text-align: center;
width: 100;
font-size:20px;
}

.recipe-h2{padding: 20px;
    margin-left: 10px;
    font-size: 40px;}


.method-list{
    padding-left: 30px;
}

.method-content{
    font-size: 20px
}

.border-outer{
    padding-right: 50px;
}

.product-images{
    border-radius: 10px;
    width: 250px;
    padding: 2px;
    border:1px solid #ddd ;
}

.product-images:hover{
    box-shadow: 0 0 2px 2px #3285c4;
}

.recipe-list{
    padding: 10px;
}

.printing{
    border: 12px solid #0091ff;
    background-color: #0091ff;
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    font-size: 18px;
    border: none; 
    font-weight: bold;
    border-radius: 10px; 
    cursor: pointer; 
    transition: 0.3s ease;
    margin: 1px 20px 10px 55px;
    text-decoration: none;
}

.print-page{padding: 20px;}

.additional-print{display: none;}

.method-list{list-style-type: none;}

.printing-button{padding-bottom: 40px;}

.printing:hover{background-color: grey;}

form{padding-left: 20px;
padding-right: 20px;}

.submit-recipe{
    font-size:  40px;
    padding: 20px;
    margin-left: 10px ;
}

.questions {padding-bottom: 10px;}

.submit{padding-bottom:   80px;}

.submit button{background-color: rgb(224, 17, 17) ;
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    font-size: 18px;
    border: none; 
    font-weight: bold;
    border-radius: 10px; 
    cursor: pointer; 
    transition: 0.3s ease;
    margin: 1px 20px 10px 55px;
}

.questioner {display: block;}

.submit button:hover{ 
    background-color: rgb(80, 80, 80) ;
    transition-duration: 0.4s;}

table{border:1px solid black;
    width: 70%;
}

thead{text-align: left;}

.qna-content{padding-left: 30px;padding: 10px;}

.qna-list{padding-left: 80px;
padding-top: 5px;
list-style-type: none;}

.qna-content{list-style-type: none;}

.qna-answer{padding:10px}

table {padding-bottom: 10px !important}

.qna-answered{padding-left: 60px;}



.quick-navi {
    padding-bottom: 30px;
    padding-top: 30px !important;};