/* Box-sizing */
* {
  box-sizing: border-box;
}


body {
  margin: 0;
  background-color: #90C7E3;
  color: #666666;
  font-family: Verdana, Arial, sans-serif;
}


#wrapper {
  background-color: #FFFFFF;
  padding: 0; 
}

/* Header styles --might just keep padding */
header {
  background-color: #002171;
  color: #FFFFFF;
  font-family: Georgia, serif;
  padding: 1em;
}

header a {
  text-decoration: none;
}

header a:link,
header a:visited {
  color: #FFFFFF;
}

header a:hover {
  color: #90C7E3;
}

/* might remove text-align */
h1 {
  font-size: 1em;
  letter-spacing: 0;
  padding: 0;
  text-align: center;
}

/* Heading styles */
h2 {
  color: #1976D2;
  font-family: Georgia, serif;
}

h3 {
  font-family: Georgia, serif;
}

/* Navigation styles - might remove font size */
nav {
  font-size: 1.5em;
  text-align: center; 
  background-color: white; /* White background color */
}

nav a {
  text-decoration: none;
}

nav a:link {
  color: #5C7FA3;
}

nav a:visited {
  color: #344873;
}

nav a:hover {
  color: #A52A2A;
}

/* Configuring flex layout for nav ul */
nav ul {
  list-style-type: none;
  margin: 0; 
  padding: 0;
  display: flex; 
  flex-direction: column; /* vertically */
}

/* Styling for nav li */
nav li {
  padding: 0.5em 1em;
  width: 100%;
  border-bottom: 1px solid #ccc; /* Adding a bottom border */
}

/* Main content styles */
main {
  padding: 0 1em;
}

/* Definition Term styles */
dt {
  color: #002171;
  font-weight: bold;
}

/* Resort class styles */
.resort {
  color: #1976D2;
  font-size: 1.2em;
}

/* Hero image styles */
#homehero,
#yurthero,
#trailhero {
  height: 300px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

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

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

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

section {
  padding: 0.5em; /* Adjusting padding */
}

/* Footer styles */
footer {
  background-color: #FFF;
  font-size: 0.70em;
  font-style: italic;
  padding: 1em;
  text-align: center;
}

#mobile {
  display: inline; /* Displaying as inline for small screens */
}

#desktop {
  display: none; /* Hiding on desktop screens */
}


@media (min-width: 600px) {
  /* Styles for h1 element */
  h1 {
      font-size: 2em;
      letter-spacing: 0.25em;
  }

  /* Styles for nav ul as a flex container */
  nav ul {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      padding-right: 2em; /* Adjusted from 2em to match the request */
  }

  /* Styles for nav li within the flex container */
  nav li {
      width: 12em;
      border-bottom: none; /* Remove the bottom border */
  }

  /* Styles */
  section {
      padding-left: 2em;
      padding-right: 2em;
  }

  /* Styles */
  #flow {
      display: flex;
      flex-direction: row;
  }

  /* Styles for the mobile id */
  #mobile {
      display: none; 
  }

  /* Styles for the desktop id */
  #desktop {
      display: inline; 
  }
}



/* Existing styles above */

/* Media query for screens with a minimum width of 1024px */
@media (min-width: 1024px) {
  /* Styles for the body element */
  body {
    background-image: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%);
  }

  /* Styles for nav ul */
  nav ul {
    padding: 0 10%;
  }

  /* Styles for #wrapper */
  #wrapper {
    margin: auto; /* Horizontally center the content */
    width: 80%;
  }
}