@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
    scroll-behavior: smooth;
}


body {
    font-family: "Poppins";
    background-color: rgb(233, 201, 207);
}

main {
    background-color: #FFF;
    width: 50%;
    margin: 0 auto; 
    padding: 10px;
    margin-top: 25px;
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}


.recipe-photo {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.omelette-pic {
    width: 90%;
    border-radius: 6px;
}

.recipe {
    margin-left: 25px;
}
.simple {
    font-weight: 500;
    font-size: 15px;
}

.info {
    font-size: 12px;
    max-width: 90%
}

.preparation {
    background-color:  rgb(251, 228, 232);
    border: 2px ;
    border-radius: 6px;
    font-size: 12px;
    width: 95%;
    padding: 0px 0px 8px 0px;
}

.prep-time {
    color: rgb(70, 8, 70);
    font-weight: 600;
    margin-top: 15px;
    padding: 8px 0px 0px 10px;
    
}

.ingredients, .instruction , .nutrition{
    font-size: 15px;
    color: rgb(137, 34, 34);
    font-weight: 500;
}


.ing-section , .instruct-section , .nutrition-section {
    font-size: 12px;
}

ol {
    max-width: 85%;
    
}

.divide {
    border: 2px solid rgb(193, 190, 190);
}

.methods {
    padding-bottom: 15px;
}


.nutrition-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.nutrition-table tr {
    border-bottom: 1px solid #ccc; /* Adds horizontal lines */
    max-width: 80%;
}

.nutrition-table tr:last-child {
    border-bottom: none;
}


.nutrition-table td {
    padding: 10px;
}

.nutrition-table td strong {
    color: rgb(172, 50, 78); /* Adjust color for emphasis */
}

.attribution {
    font-size: 13px;
    margin:50px 0 0  430px;
}



/* MOBILE VIEW  */

@media (max-width: 768px) {

 body {
    max-width: 768px;
    background-color: #eae4e4;
    }
 main {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 0;
 }

 .omelette-pic {
    border-radius: 2px 2px 0px 0px;
    width: 100%;
 }

 .methods {
    margin-left: -15px;
 }

 .instruct-section {
    max-width: 90%
 }

 .attribution {
    margin: 50px 0 0 50px;
 }

}