/* Universal styles */
* {
    box-sizing: border-box;
}

/* Global styles for the document */
body {
    background-color: #90C7E3; 
    color: #666666;
    font-family: Verdana, Arial, sans-serif;
	Margin: 0;
}

/* Styles for the header element */
header {
    background-color: #002171;
    color: #FFFFFF;
    font-family: Georgia, serif;
    Padding: 1 em;
}

/* Styles for the h1 element */
h1 {
    text-align: center;
    font-size: 1.5em
    color: #FFFFFF; /* Set H1 text color to white */
}

/* Remove underline from header link */
header a {
    text-decoration: none; /* Remove underline */
    color: #FFFFFF; /* Ensure link color is white */
}

/* Styles for the nav element */
nav {
    font-weight: bold;
    padding: 0; /* Changed padding to 0 */
    text-position: center;
    Float: left;
    font-size: 1.2em; /* Set font size */
    background-color: #FFFFFF;
}

/* Remove underline from hyperlinks in nav */
nav a {
    text-decoration: none;
}

/* Styles for nav link states */
nav a:link {
    color: #5C7FA3; /* Unvisited hyperlinks */
}

nav a:visited {
    color: #344873; /* Visited hyperlinks */
}

nav a:hover {
    color: #A52A2A; /* Hover state */
}

/* Styles for the unordered lists in nav */
nav ul {
    list-style-type: none; /* No list markers */
    padding-left: 1em;
	width: 12em; 
	border-bottom: none;
           display: flex;
         -webkit-flex-direction: row;
		 justify-content: space-around;
			padding-right: 2em;
}

nav a:flow id{   display: -webkit-flex;
           display: flex;
         -webkit-flex-direction: row;
         -webkit-flex-wrap: wrap;
}

/* Styles for the h2 element */
h2 {
    color: #1976D2;
    font-family: Georgia, serif;
}

/* Styles for the h3 element */
h3 {
    font-family: Georgia, serif;
}
form {
	display: flex;
	flex-flow: column nowrap;
}
input, textarea {
	margin-bottom: .5em;
}
input {
	padding: .5em;
}
	
	
/* Styles for the dt element */
dt {
    color: #002171;
    font-weight: bold;
}

/* Styles for a class named resort */
.resort {
    color: #1976D2;
    font-size: 1.2em;
}

/* Styles for the footer element */
footer {
    font-size: 0.70em;
	Margin-left: 170px;
    font-style: italic;
    text-align: center;
    padding: 1em;
    background-color: #FFFFFF; /* Added background color */
    
}

/* Style rule for the wrapper ID */
#wrapper {
    background-color: #FFFFFF; 
    background: linear-gradient(#FFFFFF, #90C7E3); /* Added gradient background */
	margin: auto;
	width: 80%;
}

/* Styles for the main element */
#main {
    padding-left: 1em;
    padding-right: 1em;
    display: block; /* For IE compatibility */
    background-color: #FFFFFF; /* Set background color */
    margin-left: 170px; /* Set left margin */
    overflow: auto; /* Prevent display issues for floated elements */
}

/* Styles for the hero image areas */
#homehero,
#yurthero,
#trailhero {
    height: 300px;
    background-size: 100%;
    background-repeat: no-repeat;
    
}

#homehero {
    background-image: url('coast.jpg');
}

#yurthero {
    background-image: url('yurt.jpg');
}

#trailhero {
    background-image: url('trail.jpg');
}

/* Styles for the section element */
section {
    padding-left: 2em; /* Left padding */
    padding-right: 2em; /* Right padding */
}

}

@support mobile id(display: grid) {
   .message {
   display:none;
  }
}

@support desktop id(display: grid) {
   .message {
   display:inline;
  }
}

.body {
	linear-gradient (to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%);
	
	Table {
		position: center; 
		border: 1px #3399CC;
		border-width: 90%;
		use border-collapse: collapse;
	}
	
	td,th {
		Padding: 5px;
		Border: 1px solid #3399CC;
		text-align: center; 
	}
	
	.text {
		td use text align: left;
	}
	
	tr: nth of type (even) { 
	background-color: #DFEFDF8;
	}
	
form {	display: flex;
		flex-direction: column;
		padding-left: 1em; width: 80%;
}
/* comment section */
textarea {
	margin-bottom: .5em;
}
/* Changed CSS to reshero */
#reshero { height: 300px;
		background-image: url('ocean.jpeg');
		background-size 200%, 100%
		repeat: none; 
}
/* two column query */
two-column form { Width: 60%
					grid-column: 1em;
					flex-direction: column;
					width: 10em, 1 fr; 
					background-image: erl('ocean.jpeg')
					background-size: 100%,100%;
}