Create one external CSS file to control the layout and format of all four HTML pages when viewed on a desktop screen and a smart-phone screen. You should include all formatting that is consistent on all pages in this external CSS file. Use the layout as shown to the right for the desktop screen. Here is a brief description of the id and HTML 5 structure elements that will be created.

• #wrapper will have a fluid width with 40px margins at the left and right. The height should be fluid and will be determined by the amount of content that is placed in the main content area.
• header must contain the logo image on all pages. You can decide if you want to include any other content in this area
• nav will hold the horizontal navigation bar
• main will hold the main content for each page
• footer should contain a basic text version of the navigation menu, copyright information, and an email link to your email address on all pages
• As a minimum requirement, in addition to the rules listed above, please define rules for the body (set margins to 0), h1, h2, a:link, a:active, a:visited, and a:hover elements. I am sure there will be several additional rules you will want to add.
• In some way you must demonstrate the use of text shadow, border radius, and a gradient background using CSS. The format (colors, fonts, alignment, etc.) is up to you. Please do not use any background images in the areas where text is read.
• Smart-phone -- Code a media query for a typical smart-phone device veiwport size with a max-width of 768px. Create new styles within the media query you feel are necessary to maximize the space on a smaller display screen.