:root {
     --primary: lavender;
     --secondary: whitesmoke;
     --light-grey: lightslategrey;
     --pure-light: white;
     --button-font: 'Roboto', sans-serif;
     --button-hov-col: thistle;
     --border-radius: 7px;
}

*{
    font-family: Open Sans, sans-serif;
}
body {
    background-color: var(--secondary);
}

header {
    background-color: var(--primary);
    text-align: center;
}

th {
     font-weight:100;
     text-align:left;
}

p {
     font-weight: bold;
}

form {
     display: flex;
     justify-content: center;
     margin-top: 25px;
     align-items: center;
}

ul.conversion{
     list-style-type: none;
}

button{
     font-family: var(--button-font);
 }
 
 button:hover {
      background-color:var(--button-hov-col);
 }

#title, #userMealPlan {
    color:var(--light-grey);
    font-family: Caveat, sans-serif;
    font-size: 75px;
}

.recipeBtn, .startBtn, .addBtn {
    background-color: var(--light-grey);
    color: var(--pure-light);
    padding: 5px;
    border-radius: var(--border-radius);
    height: 39px;
    margin: 10px;
    font-family: var(--button-font);
}

#homebtn{
    margin-right: 30px;
}

#calendarbtn{
    margin-left: 30px;
}

#searchbtn, #homebtn, #calendarbtn{
    background-color: var(--light-grey);
    color: var(--pure-light);
    border-radius: var(--border-radius);
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 16px;
    font-family: var(--button-font);
}

#searchbtn:hover, #homebtn:hover, #calendarbtn:hover{
     background-color:var(--button-hov-col);
}

.buttonnutrition {
    background-color: var(--light-grey);
    color: var(--pure-light);
    border-radius: var(--border-radius);
    margin: 0 auto;
    display: block;
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 16px;
    font-family: var(--button-font);
}

#offCanvasTop1{
    height: 350px;
}

#analyzebtn{
     background-color: var(--light-grey);
     color: var(--pure-light);
     border-radius: var(--border-radius);
     padding: 10px;
     font-family: var(--button-font);
}
#analyzebtn:hover{
     background-color:var(--button-hov-col);
}


#searchinput{
     width: 300px;
     border-radius: var(--border-radius);
     padding: 10px;
}

#searchbtn{
    height: 39px;
}


.accordion-title{
    font-size: 20px;
    font-family: var(--button-font);
}

.callout{
    display: none;
    height: auto;
    width: 500px;
}

.callout img{
    height: auto;
    width: 200px;
}


#no-results{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    padding: 20px;
    font-family: Caveat, sans-serif;
    width: 25%;
    margin-left: 37%;
    border-radius: var(--border-radius);
}

.displayContainer{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 30%;
}

#searchinput{
     display: flex;
     justify-content: center;
     margin-top: 25px;
}

.card-section{
     padding: 5px 0;
}


.card-divider{
    background-color:var(--primary);
    font-size: 20px;
    font-weight: bold;
    color: var(--light-grey);
    text-align: center;
}

/* recipe.html */
#container {
    display: flex;
    width: fit-content;
}

#titledisplay, #timedisplay{
    text-align: center; 
    font-weight: bolder;

}

#imagedisplay{
     display: flex;
     align-items: center;
     justify-content: center;
     border:rgb(255, 217, 181) 5px solid;
     border-radius: var(--border-radius);
     margin: auto;
}

#recipeImg{
     border:rgb(255, 217, 181) 5px solid;
     border-radius: var(--border-radius);
}


#foringredients{
    margin-left: 30px;
    flex-wrap: wrap;
    width: 300px;
    margin-bottom: 20px;  
} 

#forinstructions{
    margin-left: 10%;
    flex-wrap: wrap;
    flex:1;
    margin-right: 30px;
    margin-bottom: 20px;
}
 
.card {
    border:var(--light-grey) solid 2px;
    border-radius: var(--border-radius);
    text-align: center;
    margin: 50px auto;
}

footer{
    background-color: var(--primary);
    height: 50px;
}

#recipedisplay {
 background-color: var(--secondary);
 width: 85%;
 margin: 0 auto;
}