/* 
Author: Dorothy McBane
Date: 10/1/2024
File Name: styles.css
*/

/*CSS reset*/
body, header, nav, main, footer, h1, div, img, ul {
	margin: 0;
	padding: 0;
	border: 0;
}

/*style rule for links*/

/*style rules for body and images*/
body {
	background-color: #e7ffe7;
}

#container {
	text-align: center;
}

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

/*Style Rules for mobile viewport*/

/* Style rules for header */
header {
	position: sticky;
	top: 0;
	background-color: #ffffff;
	height: 200px;
}

header img {
	margin: 0 auto;
}

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

nav ul {
	list-style-type: none;
	text-align: center;
}

nav li {
	font-size: 1.5em;
	font-family: "Vujahday Script", cursive;
	border-top: 1px solid #61d561;
}

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

nav li a {
	display: block;
	color: #333;
	padding: 0.5em 1em;
	text-decoration: none;
}

/*Show mobile class, hide tablet-desktop class*/
.mobile {
	display:block;
}

.tablet-desktop {
	display:none;
}

/*Style rules for main content*/
main {
	background-color: #e7ffe7;
	padding: 2%;
	font-size: 1.15em;
	font-family: "Afacad Flux", sans-serif;
}

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



.tel-link {
	background-color: #98fb98;
	padding: 2%;
	margin: 0 auto;
	width: 80%;
	text-align: center;
	border-radius: 5px;
}

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

#amenities {
	text-align: center;
}

#rooms, #breakfast, #outside {
	margin: 0 2%;
}

#flowers, #trees {
	width: 100%;
	height: auto;
}

#zoo, #botanical, #kids {
	display: block;
	margin-left: auto;
	margin-right: auto;
	Width: 20%;
	height: auto;
}

.round { 
	border-radius: 8px;
}

#contact {
	text-align: center;
}

#contact .contact-email-link{
	color: #00A36C;
	text-decoration: none;
}

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

/*style rules for footer content*/

footer p {
	font-size: 0.75em;
	text-align: center;
	color: #000;
	padding:0 1em;
	clear: left;
}

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


/*media query for tablet viewport */
@media screen and (mind-width: 630px), print {
	
	/*Tablet Viewport: Show tablet-desktop class, hide mobile class */
	.tablet-desktop {
		display: block;
	}
	
	.mobile {
		display: none;
	}
	
	header {
		position: static;
		padding-bottom: 2%;
	}
	
	nav li {
		border-top: none;
		display: inline-block;
		border-right: 1px solid #61d516;
	}
	
	nav li a {
		padding: 0.1em 0.75em;
	}
	
	main ul {
		margin: 0 0 4% 10%;
	}
	
	.tel-num {
		font-size: 1.25em;
	}
	
	.map {
		width: 600px;
		height: 450px;
	}

}

/*media query for Desktop Viewport */
@media screen and (min-width: 1015px), print {
	
	.tablet-desktop {
		display: block;
	}
	
	.mobile {
		display: none;
	}
	
	header{ 
	position: static;
	}
	

	
	nav ul {
		text-align: center;
	}
	
	nav li a {
		padding: 0.5em 1em;
	}
	
	nav li a:link{
		color:#000;
	}
	
	nav li a:visited{
		color: #000;
	}
	
	nav li a:hover{
		color: #fff;
		background-color: #00A36C;
	}

	nav li a:active{
		color: #B2Beb5;
	}
	
	main {
		clear: left;
	}
	
	main h1 {
		font-size: 1.8em;
	}
	
	#rooms, #breakfast, #outside {
		width: 29%;
		float: left;
		margin: 0 2%;
	}
	
	#hero img{
		width: 100%;
		height: auto;
	}
	
}

/*Media Query for Large Desktop Viewports*/
@media screen and(min-width:1921px){
	
	#container {
		width: 1920px;
		margin: 0 auto;
	}	
}