/* 
Author: Kersten Buchanan
Date: 6/12/24
File name: styles.css
*/

/* CSS Reset */
body, header, nav, main, footer, img, h1, ul, aside, figure, figcaption, video {
	margin:0;
	padding: 0;
	border:0;
}	

/* Style rules for body and images */
body {
	background-color:#f6eee4;
}

img, video {	
	max-width:100%;
	display:block;
}

/*Style rules for mobile viewport*/


/*Styles rules to show mobile class and hide tab-desk class*/
.mobile,.mobile-tablet {
	display:block;
}

.tab-desk,.desktop, #nav-links{
	display:none;
}	


/*Style rules for header area*/
.mobile h1,.mobile h3{
	padding:2%;
	text-align: center;
}	

.mobile h1 {
	font-family: "Emblema One", system-ui;
	margin: 2% 0 0 3%;
}

.mobile h3 {
	font-family: "Lora", serif;
}	

.mobile-nav a{
	color:#fff;
	text-align: center;
	font-size: 2em;
	text-decoration: none;
	padding: 3%;
	display: block;
}

.mobile-nav a.nav-icon {
	display:block;
	position: absolute;
	left: 0;
	top:0;
	color: #f6eee4;
	padding: 2%;
}

.nav-icon div{
	height: 40px;
	width: 40px;
	color: #2a1f14;
}			
	

/* Style rules for navigation area */
nav{
	background-color: #2a1f14;
}

		

/* Style rules for main content */
main{
	padding:2%;
	font-family:Verdana,Arial,sans-serif;
	font-family: "Lora", serif;
}

main p{
	font-size:1.25em;
}

main h3{
	padding:2%;
}

main ul{
	list-style-type:square;
}

.link{
	color:#4d3319;
	text-decoration:none;
	font-weight:bold;
	font-style:italic;	
}

.action{
	font-size:1.75em;
	font-weight:bold;
	text-align:center;
}

.round{
	border-radius:6px;
}	

aside{
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	text-shadow: 4px 4px 10px #c5a687;
}	

figure{
	border:4px solid #2a1f14;
	box-shadow: 6px 6px 10px #c5a687;
	max-width: 400px;
	margin: 2% auto;
}

figcaption{
	padding:2%;
	border-top:4px solid #2a1f14;
}

aside {
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	text-shadow: 4px 4px 10px #c5a687;
}	





#info ul{
	margin-left:10%;
}
	
#contact,#form h2{
	text-align:center;
	font-weight:bold;
}

.tel-link{
	background-color: #2a1f14;
	padding: 2%;
	width:80%;
	margin:0 auto;
}	

.tel-link a{
	color:#f6eee4;
	text-decoration:none;
	font-weight:bold;
}	

#questions p{
	cursor:pointer;
}

#answer {
	text-align: center;
	font-weight: bold;
	width: 80%;
	margin: 0 auto;
}

#answer h2{
	display: none;
}	

/* Style rules for form elements*/

fieldset,input, textarea {
	margin-bottom:2%;
}	

fieldset legend {
	font-weight: bold;
	font-size:1.25em;
}

label {
	display: block;
	padding-top: 2%;
}

form #submit {
	margin: 0 auto;	
	display: block;
	padding: 2%
	background-color: #78593a;
	color: #f6eee4;
	font-size: 1.25em;
	border-radius: 10px;
}	
	
		

/*Style rules for footer content*/
footer{
	text-align:center;
	font-size:0.85em;
	background-color:#2a1f14;
	color:#46eee4;
	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, .mobile-nav{
		display: none;
	}	
	
	
	/*Tablet Viewport: Style rules for nav area */
	
	nav ul{
	list-style-type:none;
	text-align:center;
	}

	nav li{
		border-top: none;
		display: inline-block;
		font-size: 1.25em;
		font-family:Geneva, arial, sans-serif;
		font-weight: bold;
	}

	nav li a{
		padding: 0.5em;
		display: block;
		color: #f6eee4;
		text-decoration: none;
	}
	
	.grid{
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 10px;
	}	
	
	aside{
		grid-column: 1 / span 2;
	}	
	
	/*Tablet Viewport: Style rule for form element*/
	form{
		width:70%;
		margin:0 auto;
	}	
}

/* Media Query for Desktop Viewport*/

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

/*Desktop Viewport: Show desktop class, hide mobile-tablet class*/

.desktop {
	display:block;
}

.mobile-tablet {
	display: none;
}		

nav li {
	font-size: 1.5em;
}


nav li a{
	padding: 0.5em 1.5em;
}

nav li a:hover{
	color: #2a1f14;
	background-color: #f6eee4;
	opacity: 0.5;
}

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

#info ul{
	margin-left: 5%;
}

.grid{
	grid-template-columns: auto auto auto;
	grid-gap: 30px;
}

aside {
	grid-column: 1 / span 3;
	font-size: 2em;
}

/* Style rules for table*/
table {
	border: 1px solid #2a1f14;
	border-collapse: collapse;
	margin: 0 auto;
}	

caption {
	font-size: 1.5em;
	font-weight: bold;
	padding: 1%;
}

th,td {
	border:1px solid #2a1f14;
	padding: 1%;
}

th {	
	background-color:#2a1f14;
	color:#fff;
	font-size: 1.15em;
}	

tr:nth-child(odd) {
	background-color:#deccba;
}	

/*Desktop Viewport: Style rules for form elements*/
form {
	width: auto;
}

.form-grid {
	display:grid;
	grid-template-columns: auto auto;
	grid-gap: 20px;
}

.btn {
	grid-column: 1 / span 2;
}				
	
}	

/*Media Query for Large Desktop Viewports*/

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

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

#wrapper{
	width: 1920px;
	margin: 0 auto;
}

main {
	background-color: #f6eee4;
}	

.grid{
	grid-template-columns: auto auto auto auto;
}

aside{
	grid-column: 1 / span 4;
	font-size: 3em;
}		

}

/*Media Query for Print*/

@media print {

body {
	background-color: #fff;
	color:#000;
}

}