Hi! I would like you to help me with developing my HTML website based around cooking. I want to have four pages in total: 1. page would be the home page with hyperlinks to all other pages and information about what is the website for. 2. page would be filled with my favourite recipes. Third page would contain my favourite cooking websites / sources / chefs. Please make it look good and modern!
// Here is the home page. You can store it in file index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Cooking Website</title>
    <style>
      #menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background-color: #8bc34a;
        padding: 10px;
      }
      #menu a {
        padding: 10px;
        text-decoration: none;
        color: #333;
      }
      #menu a:hover {
        background-color: #689f38;
      }
    </style>
  </head>
  <body>
    <div id=menu>
      <a href=html/favourite-recipes.html>Favourite Recipes</a>
      <a href=html/favourite-cooking-websites.html>Favourite Cooking Websites</a>
    </div>
    <div id=main>
        <h1>My Cooking Website</h1>
    </div>
  </body>
</html>
That HTML satisfies some of the basic requirements but does not look very modern. Could you add some CSS to help?