Simple Recipe Page

Good use of semantic tags, making your code reponsive, and use of css variables, it makes your code readible and maintainable. Here's a few suggestions:

Make sure your paying attention to detail with spelling (e.g., "protein" instead of "protien") in your html markup, to ensure your code aligns as much as possible to the draft.

• For your CSS, it would suffice to use just one breakpoint. Since you started with the mobile first-approach you can remove @media only screen and (max-width:375px) from your code.

• With the exception of main{ width: 800px; background-color: var(--color-white); box-sizing: border-box; padding: 35px; border-radius: 15px; margin-top: 100px; margin-bottom: 100px; }, you can remove main from all of your selectors as all of the code you have developed is already inside the main section so it's not needed.

• Use rem instead of px when setting the margin/gap, padding, and font-size so that they accomodate the users defult broswser font-size. Doing this is necessary for making an accessible site.