/*

Purpose:  Style sheet for Ch 6 Lab 2

Author:  TONYH

Date:  2026-03-17

Filename:  rescue6styles.css



For Lab 2 I "re-sorted" the style rules into groups that make sense to me before proceeding with the lab instructions.

*/



/* CSS Reset */



body, header, nav, main, footer, img, h1, h3, ul {

	margin: 0;

	padding: 0;

	border: 0;

	}

	

/* Style rules for mobile viewport ========================================== */



/* Display mobile class */



.mobile {

	display: block;

	}

	

.mobile h1 {

	padding: 2%;

	text-align: center;

	font-family: "Emblema One", system-ui;

	font-weight: 400;

	font-style: normal;

	}

	

.mobile h3 {

	padding: 2%;

	text-align: center;

	font-family: "Lora", serif;

	/* font-optical-sizing: auto; ← from Google Fonts but invalid per CSS validator */

	font-weight: 400;

	font-style: normal;

	}



/* Hide tab-desk class */



.tab-desk {

	display: none;

	}

	

/* Style rules for entire webpage



img {

	max-width: 100%;

	display: block;

	margin: auto; /* I added this on my own - think images look better centered */

	}



.action {

	font-size: 1.75em;

	font-weight: bold;

	text-align: center;

	}

	

.link {

	color: #4d3319;

	text-decoration: none;

	font-weight: bold;

	font-style: italic;

	}

	

.round {

	border-radius: 6px;

	}

	

.tel-link {

	background-color: #2a1f14;

	padding: 2%;

	width: 80%;

	margin: 0 auto 0 auto;

	}

	

.tel-link a {

	color: #f6eee4;

	text-decoration: none;

	font-weight: bold;

	}

	

#info ul {

	margin-left: 10%;

	}

	

#contact {

	text-align: center;

	}

		

/* Style rules for body */





body {

	background-color: #f6eee4;

	}

	



	

/* Style rules for header area */





	

/* Style rules for navigation area */



nav {

	background-color: #2a1f14;

	}

	

nav ul {

	list-style-type: none;

	text-align: center;

	}

	

nav li {

	display: block;

	border-top-style: solid;

	border-top-color: #f6eee4;

	border-top-width: 0.5px;

	font-size: 1.5em;

	font-family: Geneva, Arial, sans-serif; /* Should this be removed for Ch5 Lab2? */

	font-weight: bold;

	}

	

nav li a {

	display: block;

	color: #f6eee4;

	padding: 0.5em 2em;

	text-decoration: none;

	}

	

/* Style rules for main content */



main {

	padding: 2%; /* removed in Ch 5 → font-family: Verdana, Arial, sans-serif; */

	font-family: "Lora", serif;

	/* font-optical-sizing: auto; ← from Google Fonts but invalid per CSS validator */

	font-weight: 400;

	font-style: normal;

	}

	

main p {

	font-size: 1.25em;

	}

	

main h3 {

	padding-top: 2%;

	}

	

main ul {

	list-style-type: square;

	}

	

	

/* Style rules for footer content */



footer {

	text-align: center;

	color: #f6eee4;

	padding: 1% 0%;

	}

	

footer a {

	color: #f3e6d8;

	text-decoration: none;

	}

	

/* Media query for tablet viewport ========================================== */



@media screen and (min-width:620px), print {



/* Tablet viewport:  Show tab-desk class, hide mobile class */



.tab-desk {

	display: block;

	}



.mobile {

	display: none;

	]

	

/* Tablet viewport:  Style rules for nav area */



nav li {

	display: inline-block;

	font-size: 1.25em;

	border-top: none;

	}

	

nav li a {

	padding: 0.5em;

	}



}



/* Media query for desktop viewport ========================================= */



@media screen and (min-width:1000px), print {



/* Desktop viewport:  Style rules for nav area */



nav li {

	display: inline-block; /* Added on my own - display didn't work correctly without */

	border-top:  none;

	font-size: 1.5em;

	}

	

nav li a {

	padding: 0.5em 1.5em;

	}

	

nav li a:hover {

		color: #2a1f14;

		background-color: #f6eee4;

	}

	

/* Desktop viewport:  Style rules for main content */



#info ul {

	margin-left: 5%

	}

	

}



/* Media query for large desktop viewports ================================== */



@media screen and (min-width:1920px) {



body {

	background: linear-gradient(#f6eee4,#78593a);

	}

	

#wrapper {

	width: 1920px;

	margin: 0 auto;

	}

	

main {

	background-color: #f6eee4;

	}

	

}



/* Media query for print ==================================================== */



@media print {



body {

	background-color: #fff;

	color: #000;

	}



}