* {
  box-sizing: border-box; /* bxb */
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: #90c7e3; /* bgc#90c7e3 */
  background-image: linear-gradient(to bottom, #fff, #90c7e3);
  border: 1px solid #003; /* b1pxs#003 */
  box-shadow: 3px 3px 3px #333; /* bxsd*/
  color: #555; /* c#555 */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* ffa */
}
#wrapper {
  margin: auto; /* m:a 8*/
  max-width: 75rem; /* maw75rem*/
  width: 80%; /* w80%*/
}
header {
  background-color: #000032; /* bgc#000032 */
  background-image: url("images/sunset.jpg"); /* bgi */
  background-position: right; /* image aligned to right */
  background-repeat: no-repeat; /* image does not repeat */
  color: #fff; /* white text color */
  height: auto; /* header can expand of shrink */
  padding: 1rem; /* space above header content */
  text-align: center; /* centers header text horizontally */
}
header a {
  text-decoration: none; /* tdn */
}
header a :link,
header a :visited {
  color: #fff; /* c#fff*/
}
header a:hover {
  color: #90c7e3; /* c#90c7e3 */
}
nav {
  font-size: 120%; /* fz120% */
  font-weight: bold; /* fwb */
  padding: 0; /* p0 */
  text-align: center; /* txa:center */
}
nav ul {
  list-style: none; /* lsn */
  margin: 0; /* m0 */
  padding-left: 0; /* pl0 */
  display: flex;
  flex-direction: column; /* fldir:column */
  align-items: stretch;
  max-width: 100%; /* maw100% */
  box-sizing: border-box; /* bs:border-box */
  flex-wrap: wrap; /* flw:wrap */
}
nav li {
  flex-wrap: wrap;
  border-bottom: 1px solid #003;
  padding: 0.5rem 0;
  max-width: 100%;
  box-sizing: border-box;
}
nav a {
  text-decoration: none; /* td:none */
}
nav a:link {
  color: #5c7fa3; /* c#5c7fa3 */
}
nav a:visited {
  color: #344873; /* c#344873 */
}
nav a:hover {
  color: #a52a2a; /* c#a52a2a */
}

main {
  background-color: #fff; /* bgc#fff: White background for main content */
  padding: 0.0625rem 1.25rem 1.25rem 1.875rem; /* pd: Spacing around content */
}
section {
  padding: 1rem 0; /* p1rem0 */
}
h1,
h2,
h3,
footer {
  font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
  letter-spacing: 0.25em; /* ls.025em */
  margin-bottom: 0; /* mb0 */
  margin-top: 0; /* mt0 */
}
h2 {
  color: #1976d2; /* c#1976d2 */
  text-shadow: 1px 1px #ccc;
}
h3 {
  color: #003; /* c#003 */
}
address {
  font-style: normal; /* fsn */
}
footer {
  background-color: #fff; /* bgc#fff */
  font-size: 75%; /* fz75% */
  font-style: italic; /* fsi */
  padding: 2em; /* p2em */
  text-align: center; /* ta:c */
  max-width: 100vw; /* Ensures footer never exceeds viewport width */
  overflow-wrap: break-word; /* Prevents overflow of long words and wrapped to the next line */
}
.resort {
  color: #1976d2; /* c#1976d2 */
  font-weight: bold;
}
#homehero,
#yurtshero,
#trailhero {
  background-repeat: no-repeat; /* bgr:norepeat */
  background-size: cover; /* bgs:cover */
  height: 18.75rem; /* h:18.75rem */
}
#homehero {
  background-image: url(images/coast2.jpg); /* bgimg:url(images/coast.jpg */
}
#yurtshero {
  background-image: url(images/yurt.jpg); /* bgimg:url(images/yurt.jpg */
}
#trailhero {
  background-image: url(images/trail.jpg); /* bgimg:url(images/trail.jpg */
}
.card-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: auto;
}
.card-row section {
  max-width: 100%; /* Ensures sections don't exceed the width of their container */
  box-sizing: border-box; /* Includes padding and border inside the width of the section */
  overflow-wrap: break-word; /* Prevents overflow of long words and wrapped to the next line */
}
@media (max-width: 32.5rem) {
  body {
    background-image: none; /* Removes background gradient for small screens */
    border: none; /* Removes border for small screens */
    box-shadow: none; /* Removes box shadow for small screens */
    margin: 0; /* Removes margin for small screens */
  }
  #wrapper {
    width: 100%; /* Wrapper takes full width on small screens */
    max-width: 100%; /* Removes box shadow for small screens */
    margin: 0; /* Removes margin for small screens */
    padding: 0; /* Removes padding for small screens */
  }
  header {
    background-image: none; /* None background image in header */
    padding: 0; /* removes wrapper padding  */
  }
  footer {
    padding: 1em; /* Reduces footer padding on small screens */
  }
}
@media (min-width: 37.5rem) {
  nav ul {
    flex-direction: row; /*fd:row */
    justify-content: center; /* jc:center */
    align-items: center; /* al:center */
  }
  nav li {
    border-bottom: none; /* bb:none */
    padding: 0 1rem; /* p0 1rem */
    max-width: none; /* maw:none*/
  }
  .card-row {
    flex-direction: row; /* fld:row */
    gap: 2rem; /* g2rem */
    max-width: 100vw; /* maw100vw */
  }
  .card-row section {
    flex: 1 1 0; /* fl: 1 1 0 */
    max-width: 100%; /* maw100% */
  }
}