.page-colour {
    background-color: hsl(30, 54%, 90%);
    width: 100%;
    min-height: 250vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
}
@font-face {
    font-family: 'YoungSerif';
    src: url('C:/Users/RYKO MADAGASCA/Desktop/JOHN 2024/learning john/recipe-page-main/recipe-page-main/assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
}

body {
    font-family: 'YoungSerif', sans-serif;
}


.box {
    width: 550px;
    height: 1250px;
    background-color: hsl(0, 0%, 100%);
    margin-top: 20%;
    display: flex;
    justify-content: center;
    text-align: left;
    border-radius: 2% 2% 2% 2%;
    position: sticky;

    
    
}
.omelette{
    width:500px;
    height: 180px;
    margin-top: 5%;
    border-radius: 2%;
}
.heading{

    bottom: 76%;
    margin-left: -20%;
    font-size: 35px;
    position: absolute;
    

}
.first-p{
    position: absolute;
    bottom: 74%;
    font-size: 12.5px;
    

    

}



    
    


.instructions{
    bottom: 29%;
    font-size: 12.6px;
    position: absolute;
    margin-left: -3%;
    

}

.heading2{

    margin-left: 6%;
    bottom:90%;
    color:  hsl(14, 45%, 36%);
    font-size:23px ;
}
.time{
    background-color: hsl(330, 100%, 98%);
    width: 90%;
    margin-left: -0%;
    border-radius: 2%;
    height: 130px;
    align-content: center;
    position:absolute;
    bottom: 63%;
    margin-top: 5%;
  
    
}
.prep{
    margin-left: 5%;
    font-size: 14px;
    margin-top: 3%;
    color:  hsl(332, 51%, 32%);


}
.time-list{
    margin-left: 2%;
    font-size: 14px;



}
.ingredients-list{
    margin-left: -12%;
    font-size: 14px;
    margin-top: 3%;



}
.ingre{
    margin-left: 6%;
    position: absolute;
    bottom: 49%;


}
.h3{
    margin-left: -7%;
    color:  hsl(14, 45%, 36%);
}
.nutrition-table{
    position: absolute;
    bottom: 1%;
    margin-left: -90%;
    
    

}
.heading4{
    position: absolute;
    margin-left: -90%;
    bottom: 21%;
    font-size: 23px;
    color:  hsl(14, 45%, 36%);
}

.nutrition-p{
    position: absolute;
    width: 92%;
    margin-left: -90.6%;
    bottom: 18%;
    font-size: 13px;
}

