html {
    box-sizing:border-box;
}

body {
    background: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
    font-family: 'MedievalSharp' ;
    margin: 0;
   /* border: 2px solid blue;*/
}
#hero {
    display:inline-block;
    /*border: 2px solid yellow;*/
    
    width: 100%;
}
#hero img {
    height: 90vh; 
    padding-right: 30px;
    
}
.heroImg:hover {
    filter: brightness(0) invert(1);
}
#hero > div {
   /* border: 2px solid purple;*/
    text-align: right;
    padding: 20px;
    
}
.navbar {
    position: fixed;
    top: 0;
    width: 60vw;
    height: 70vh;
    padding:  30px;
}
.navbar h1 {
    font-weight:lighter;
    font-size: 100px;
}
.navbar h1:hover {
    color: white;
}
ul {
    list-style: none;

}
a {
    text-decoration: none;
    color:black;
    font-weight:400;
    font-size: 20px;
}
.navbar ul {
   /* border: 2px solid yellow;*/
    font-weight:600;
    font-size: 30px;
    padding: 10px;
}
.navbar li {
    padding: 30px;
}

a:hover {
    color:rgb(255, 255, 255);
    /*text-shadow: 2px 2px 5px orangered;*/
}

.recipeContainer {
    display:inline-block;
    /*border: 2px solid white;*/
    padding: 30px;
    
}
 figure {
    /*border: 1px solid green;*/
    text-align: center;
    width: 57%;
    margin-left: 450px;
    margin-top: -630px;
    
}
.recipe-h1 {
    /*border: 2px solid blue;*/
    width: 100%;
    
}
.recipe-h1 > h1 {
    display: inline-block;
    /*border: 2px solid red;*/
    width: 350px;
    height: 550px;
    color: white;
    font-size: 120px;
    margin-top: 0px;
    margin-left: 100px;
}
.whyThisRecipe {
background:url(img/whiteodin.webp);
/*filter: brightness(0) invert(1);*/
background-position: center;
background-size: contain;
background-attachment: fixed;
font-weight: bold;
font-size: 20px;
text-shadow: 0 0 5px rgb(255, 255, 255);

}
.ingredients {
    /*border: 1px solid white;*/
    padding-left: 100px;
    padding-right: 120px;
    font-size: 20px;
    margin-top: 40px;
}
.ingList > li {
    border: 1px solid white;
    padding: 8px 8px 8px 30px;
}
fieldset {
    border: 1px solid white;
}
.steps {
  /*  border: 1px solid green;*/
    padding-left: 100px;
    padding-right: 120px;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 20px;
    margin-top: 40px;
}


.steps-div {
    color: white;
    /*border: 5px solid yellow;*/
    margin-top: 0px;
    
}
.stepsM {
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),url(img/meatloaf2.webp) center / cover no-repeat;
}
.stepsC {
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),url(img/herb-roasted-chicken.webp) center / cover no-repeat;
}
.stepsH {
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url(img/greekhoney22.webp) center / cover no-repeat;
}