/*
Author: Kadience Szeto,
Date: 10/04/2025
File Name: vacationist.css
*/


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

/* Style rules for body and images */

body {
	background-color: #DBECEE;	
}

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

/* Style rules for mobile viewport */


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

header img{
	margin:0 auto;
	display: block;
}
	header h2 {
	  text-align: center;
	  font-family: 'Emblema One', cursive;
	  color: #404040;
	  padding-top: 1em;
	}
	

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

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

nav li {
	font-size: 1.75em;	
	font-family: 'lora', serif;
	border-top: 1px solid #006D77;
}

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

nav li a {
	display: block;
	color: #CC5500;
	padding: 0.5em 2em 0.5em 2em;
	text-decoration: none;

}

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

/* show mobile class, hide tablet-desktop */

.mobile{
	display: block;
}

.tablet-desktop {
	display: none;
}

/* Style rules for main content */
main{
	background-color:#DBECEE;
	padding: 2%;
	font-size: 1.15em;
	font-family: 'lora',  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;
}

/* Style rules for tel-link */
.hours{
	margin-left: 10%;
}

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

#ocean, #mountain, #city {
	margin:0.2%;
	
}

.round{
	border-radius: 8px;
}

/* Style rules for contact area */
#contact {
	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 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; 
}

/* 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 {
		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{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1em;
		padding: 0;
		margin: 0;
	}
	nav li {
		border-top: none;
		display: inline-block;
		border-right: 1px solid #fff;
	}

	nav li:last-child{
		border-right: none;
	}
	
	nav li a {
		padding: 0.1em 0.75em;
	}
	
	/* Tablet Viewport: Style rules for main content area */
	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: 1000px), print {

	/* 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;
	}
	
	/* Desktop Viewport: Style rule for main content */
	main{
		width: 100%;
		clear: both;
		display: block;
	}

	main h1{
		font-size: 1.8em;}
		
	#ocean, #mountain, #city{
		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;
	}

}

/* Media Query for Print */
@media print {
	
	body{background: #fff;
	color: #000;	
	}
	
}