@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
header {
    display: flex;
    align-items: center;
    background: #fafeff;    
}
header h1 {
    font-family: 'Lilita One', cursive;
    font-size: 400%;
    color: #0d0d0d;
}
figure {
    position: right;
    border-right: solid #0d0d0d 2px;
    padding-right: 3%;
}
nav {
    background-color: #a9f1fc;
    border-top: #0d0d0d solid 2px;
    border-left: #0d0d0d solid 2px; 
    border-right: #0d0d0d solid 2px;
    position: relative;
    width: 100%;
    display: flex; /* Display the children of this element as flexible boxes*/
    align-items: center; /* Align child flexible boes in the vertical center */
}
nav p {
    text-align: center;
    flex-basis: 100px; 
    flex-grow: 1;
}
nav a {
    color: #0d0d0d;
    font-family: 'Lilita One', sans-serif;
    font-size: 150%;
}
nav a:hover {
    color: #666666;
}
body {
    background-color: #fafeff;
    margin-bottom: 5em; /* Larger margin to allow for the footer*/
}
p a {
    color: #0d0d0d;
}
p a:hover {
    color: #666666;    
}
footer {
    font-family: 'Lilita One', sans-serif;
    text-align: center;
    background-color: #a9f1fc; /* background or background-color both work*/
    position: fixed; /* fix to the viewport*/
    bottom: 0; /* start 0 pixels from the bottom of the viewport*/
    left: 0; /*start 0 pixels from the left of the viewport*/
    width: 100%; /* set the width to 100% of the viewport*/
    height: 5em; /* Set the footer elements height to 3 times larger than its current font size*/
    border-top: solid #0d0d0d 2px; /* Have to put the unit if not zero*/
}
footer a {
    color: #0d0d0d;
    text-decoration: none;
    font-family: 'Lilita One', sans-serif;
    font-size: 107%;
}
footer a:hover {
    color: #666666;    
}
strong {
    font-family: 'Work Sans', sans-serif;
    color: #0d0d0d;
    font-size: 125%;
    text-decoration: underline;
    line-height: 2em;
}
img {
    margin-left: 10px;
}
.placeholder {
    font-family: 'Work Sans', sans-serif;
}
/* Recipe and Cooking Tips Headings and Content */
.special {
    font-family: 'Lilita One', sans-serif;
    color: #0d0d0d;
    text-align: center;
    font-size: 150%;
    background-color: #a9f1fc;
    border-top: #a9f1fc solid 2px;
    border-bottom: #0d0d0d solid 2px;
    border-left: #0d0d0d solid 2px;
    border-right: #0d0d0d solid 2px;
    width: 100%;
}
.titles {
    text-align: center;    
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #a9f1fc;
    border: solid 2px #0d0d0d;
    display: flex;
}
.titles_p {
    font-family: 'Lilita One', sans-serif;
    color: #0d0d0d;
    font-size: 150%;
    flex-basis: 100px; 
    flex-grow: 1;
}
.catergories {    
    font-family: 'Lilita One', sans-serif;
    color: #0d0d0d;
    font-size: 150%;
    text-align: center; 
    margin: 5px;
    flex-basis: 100px; 
    flex-grow: 1;    
}
.pictures {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 0px;
    margin-right: 0px;
    background-color: #fafeff;
    display: flex;
}
.pictures_p {
    font-family: 'Work Sans', sans-serif;
    color: #0d0d0d;
    font-weight: bold;
    text-align: center;    
    flex-basis: 100px; 
    flex-grow: 1;    
}
.descriptions {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    display: flex;    
}
.descriptions_p {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.2em;
    color: #0d0d0d;
    flex-basis: 100px; 
    flex-grow: 1;
    margin: 10px;
}
.instructions {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    display: flex;    
}
.instructions_p {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.2em;
    color: #0d0d0d;
    white-space: pre-line;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;    
    text-align: left;    
    flex-basis: 100px; 
    flex-grow: 1;  
}  
}                            
/*Cooking Tips Content*/
.instructions {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;   

}
.instructions_p {
    font-family: 'Work Sans', sans-serif;
    color: #0d0d0d;
    white-space: pre-line;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;    
    text-align: left;    
    flex-basis: 100px; 
    flex-grow: 1; 
}