/*
Author: Kadience Szeto,
Date: 11/21/2025
File Name: CroChet-Chet.css
*/


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

/* Style rules for body and images */

body {
	background-color: #d4e5fb;	
}

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

/* Style rules for header */

header{
	top:0;
	background-color:#d4e5fb;
	height: 190px;
}

header img{
	margin:0 auto;
	display: block;
}
	header h1 {
	  text-align: center;
	  font-family: 'Cherry Bomb Oney', sans-serif;
	  color: #404040;
	  padding-top: 1em;
	}
	

/* Style rules for navigation area */
nav{
	background-color: #d4e5fb;
	padding: 1%; 
	margin-bottom: 1%;
}


nav li:first-child {
	border-top: none;
}


nav li a:hover {
	color: #006D77;
	background-color: #d41ca940;
}

.external-link{
	color:#CC5500;
}

/* =========Style rules for mobile viewport =============*/
/* show mobile class, hide tablet-desktop */

.mobile,
.mobile-tablet{
	display: block;
}


.tablet-desktop,
.desktop{
	display: none;
}

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

#nav-links{
	display: none;
}

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

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


/* Style rules for main content */
main{
	background-color:#d4e5fb;
	padding: 2%;
	font-size: 1.15em;
	font-family: 'short stack',  serif;
}
main::after {
  content: "";
  display: block;
  clear: both;
}

/* Style rules for hero image */

#hero {
  width: 100vw;        /* full viewport width */
  margin: 0;
  padding: 0;
}

#hero img {
  width: 100%;
  height: auto;
  display: block;
}


/* Style rules for tel-link */
.tel-link{
	background-color:#404040;
	padding: 2%;
	margin: 0 auto;
	width: 80%;
	text-align: center;
	border-radius: 5px;
}

.tel-link a {
	color:#CC5500;
	text-decoration: none;
	font-size: 1.5em;
	display:block;
}

#questions p {
	cursor: pointer;
}

#answer{
	text-align: center;
	font-weight: bold;
	color:#cc8100;
	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: 2%;
}

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

.action{
	font-size: 1.35em;
	color:#CC5500;
	font-weight: bold;
}


#holidays, #food, #animals {
	margin:0.2%;	
}

.round{
	border-radius: 8px;
}

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;
	}

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


/* Style rules for contact area */
#contact,
#form h2{
	text-align: center;
}

#contact a {
	color: #CC5500;
	text-decoration: none;
}

.map{
	border: 2px solid #000;
	width: 95%;
	height: 50%;
}


/* Style rules for footer content */
footer {
	background-color: #2a1f14;
}

footer p{
	text-align: center;
	font-size: 0.85em;
	background-color: #2a1f14;
	color: #f6eee4;
	padding: 1% 0% 1% 0%;
}

footer p a {
	color: #f3e6d8;
	text-decoration: none; 
}

.social img {
	display: inline-block;
	text-align: center;
	padding: 4%;
}



/* ========Media Query for Tablet Viewport============== */
@media screen and (min-width:630px), print {
	
	/* Tablet Viewport: Show tablet-desktop class, hide mobile class */
	.tablet-desktop {
		display:block;
	}

	.mobile,
	.mobile-nav {
		display:none;
	}

	/*Tablet Viewport: Style rule for header */
	header {
		position: static;
		padding-bottom: 5%;
		text-align: center;
	}
	
	nav {
		padding: 1em;
	}
	
	/* Tablet Viewport: style for nav area */
	nav ul {
		list-style-type: none;
		text-align: center;	
	}
	nav ul{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1em;
		padding: 0;
		margin: 0;
	}
	nav li {
		border-top: none;
		font-family: 'Cherry Bomb One', sans-serif;
		display: inline-block;
		border-right: 1px solid #fff;
	}

	nav li:last-child{
		border-right: none;
	}
	
	nav li a {
		padding: 0.1em 0.75em;
		display: block;
		color: #CC5500;
		text-decoration: none;
		font-size:large;
	}
	
	/* Tablet Viewport: Style rules for main content area */
	main ul{
		margin: 0 0 4% 10%;
	}
	
	.tel-num{
		font-size: 1.25em;
	}
	
	.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;
		}
		
		/* Tablet Viewport: Style rules for footer area */
	footer{
		overflow: auto;	
				}
	
		.copyright{
			float: left;
			width: 65%;
		
				}
	
		.social{
			float: right;
			text-align: center;
			width: 25%;
			padding-top: 10px;		
				}
	
		
	.map{
		width: 600px;
		height:450px;
	}
}

/* ============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;
				}
			
			/* Style rules for table */
			table{
				border: 1px solid #2a1f14;
				border-collapse: collapse;
				margin:0 auto;
				width:80%;	
			}
			
			caption{
						font-size: 1.5em;
						font-weight: bold;
						padding: 1%;
					}
		
			th,td{
						border: 1px solid #2a1f14;
						padding: 1%;	
					}
		
			th{
					background-color:#007980;
					color: #fff;
					font-size: 1.15em;
				}
		
			tr:nth-child(odd){
					background-color:#FFFFE0;
				}
			
		/* Desktop Viewport: Style rule for form elements */
				form{
					width: auto;
						}
		
				.form-grid{
						display: grid;
						grid-template-columns: auto auto;
						grid-gap: 20px;
					}
		
				.btn{
					grid-column:1/span 2;
					}
		
		

	/* Desktop Viewport: Style rule for header */
	header {
		width: 25%;
		float: left;
		padding-bottom: 0;
	}
	
	/* Desktop Viewport: Style rule for nav area */
	nav {
		float: right;
		width: 70%;
		margin: 4em 1em 0 0;
	}

	nav ul{
		text-align: right;
	}

	nav li{
		border: none;
	}

	nav li a {
		padding: 0.5em 1em;
		font-size:30px;
		
	}
	
	nav li a hoover {
				color: #2a1f14;
				background-color: #f6eee4;
				opacity: 0.5;
			}	
		
			.grid{
				display: grid;
				grid-template-columns: auto auto auto;
				grid-gap: 30px;	
			}
		
			aside{
				grid-column: 1 / span 3;
				font-size: 2em;	
			}
	
	/* Desktop Viewport: Style rule for main content */
	main{
		width: 100%;
		clear: both;
		display: block;
	}

	main h1{
		font-size: 1.8em;}
		
	#holidays, #food, #animals{
		width: 29%;
		float: left;
		margin: 0.2%;
	}	
		
	#contact img {
	    width: 80%;
		margin: auto;  
	    height: auto;
	    display: block;
	  }
}



/* Media Query for large desktop Viewport */
@media screen and (min-width: 1920px){

	#container{
		width: 1920px;
		margin: 0 auto;
	}
	
	.grid{
			display: 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: #fff;
	color: #000;	
	}
	
}