You have already created the mobile layout, but now need to add media queries for a tablet, desktop, and print. Style the website shown in Figure $668$ for the tablet viewport. Style the website shown in Figure $669$ for the desktop viewport. Style the website shown in Figure $670$ for a large desktop viewport.

$1.$ Open the styles.css file in your text editor. Below the last style rule, add a comment with the text, Media Query for Tablet Viewport.

$2.$ Below the comment, add a media query that targets a screen with a minimum width of $620$px and print.

$3.$ Add the following comments to the tablet media query:

a$.$ Tablet Viewport: Show tab$-$desk class, hide mobile class

b$.$ Tablet Viewport: Style rules for nav area

$4.$ Add the following style rules below the Show tab$-$desk class, hide mobile class comment:

a$.$ Style rule for the tab$-$desk class selector that sets the display to a block.

b$.$ Style rule for the mobile class selector that sets the display to none.

$5.$ Add the following style rules below the style rules for nav area comment:

a$.$ Style rule for the nav li selector that removes the top border, sets the display to an inline$-$block, and sets the font size to $1\mathrm{.}25$em$.$

b$.$ Style rule for the nav li a selector that sets the padding to $0\mathrm{.}5$em$.$

$6.$ In the contact.html file, add mobile to the existing class attribute within the paragraph element on Line $44.$

$7.$ Insert a new Line $45$ and add a paragraph element with the tab$-$desk class. Wrap the phone number, $(814)555-9228,$ within the paragraph element.

$8.$ In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Desktop Viewport.

$9.$ Below the comment, add a media query that targets a screen with a minimum width of $1000$px and print.

$10.$ Within the desktop media query, add a comment with the text, Desktop Viewport: Style rules for nav area. Add the following style rules below the comment.

a$.$ Style rule for the nav li selector that sets the font size to $1\mathrm{.}5$em

b$.$ Style rule for the nav li a selector that sets the top and bottom padding to $0\mathrm{.}5$em and the left and right padding to $1\mathrm{.}5$em

c$.$ Style rule for the nav li a selector with a hover pseudo$-$class that sets the color to #$2$a$1$f$14$ and the background color to #f$6$eee$4$

$11.$ Within the desktop media query, add a comment with the text, Desktop Viewport: Style rules for main content. Below the comment, add a style rule for the #info ul selector that sets the left margin to $5\%.$

$12.$ In the index.html$,$ about.html$,$ contact.html$,$ and template.html files, wrap all of the elements between the body tags within a single, parent div element with an id attribute of wrapper. Indent all nested elements.

$13.$ In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Large Desktop Viewports.

$14.$ Below the comment, add a media query that targets a screen with a minimum width of $1921$px$.$ Add the following style rules to the large desktop media query:

a$.$ Style rule for the body element that sets the background to a linear gradient with the color values #f$6$eee$4$ and #$78593$a

b$.$ Style rule for the #wrapper selector that sets the width to $1920$px$,$ top and bottom margin to $0,$ and left and right margins to auto

c$.$ Style rule for the main selector that sets the background color to #f$6$eee$4$

$15.$ Below the large desktop media query, add a comment with the text, Media Query for Print. Below the comment, add a media query that targets print.

$16.$ In the print media query, add a style rule for the body selector that sets the background color to white and the font color to black.

$17.$ Check your spelling. Validate all HTML and CSS files and correct any errors. Save your changes.

$18.$ Open the index.html file in Google Chrome$$s device mode to view the home page in a tablet viewport. Navigate to the About Us and Contact pages to view the tablet design for each page.

$19.$ Open the index.html file in Google Chrome$$s device mode to view the home page in a desktop viewport. Navigate to the About Us and Contact pages to view the desktop design for each page. Exit device mode to view and test the hover pseudo$-$class.

$20.$ Open the index.html file in Google Chrome$$s device mode to view the home page in a large desktop viewport $($at least $1950$px$).$ Navigate to the About Us and Contact pages to view the large desktop design for each page.