* {
  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: 75em; /* maw2048*/
  width: 80%; /* w80%*/
}
header {
  background-color: #000032; /* bgc#00032 */
  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 */
  color: #fff;
}
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; /* makes text bold */
  padding: 0; /* space around nav content */
  text-align: center; /* centers nav content */
}
nav ul {
  list-style-type: none; /* Removes the default bullet points */
  margin: 0px; /* Removes default spacing outside the list items */
  display: inline-flex; /* Turns the list items into a flexible layout */
  flex-direction: row; /* Stacks the content of each list item  */
  align-items: stretch; /* Each list item stretches to fill the width of the menu */
  gap: 1rem; /* Adds space between each list item */
  max-width: 100%; /* Ensures each list item doesn't exceed the width of its container */
  box-sizing: border-box; /* Includes padding and border inside the width of the list item */
  flex-wrap: wrap; /* Allows content to wrap to the next line if necessary */
}
nav li {
  border-bottom: 0px solid #003; /* bdb1pxs#003 */
  padding: 0.5em 0; /* pd05em0 */
  max-width: 100%; /* Ensures each list item doesn't exceed the width of its container */
  box-sizing: border-box; /* Includes padding and border inside the width of the list item */
}
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: #a42a2a; /* c#a42a2a */
}

main {
  background-color: #fff; /* bgc#fff: White background for main content */
  padding: 0.0625em 1.25em 1.25em 1.875em; /* pd: Spacing around content */
}
section h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #405405; /* c#003*/
  letter-spacing: 0.25em; /* ls.025em */
  margin-bottom: 0; /* mb0 */
  margin-top: 0; /* mt0 */
}

h1,
h2,
h3,
footer {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold; /* fwn */
}
h2 {
  color: #39c; /* c#39c*/
  text-shadow: 1px 1px #405405; /* txd */
  padding-left: 0em;
}
h3 {
  color: #405405; /* c#003*/
}
dt {
  color: #002171; /* c#002171*/
}
address {
  font-style: normal; /* fsn */
}
footer {
  background-color: #fff; /* bgc#fff */
  font-size: 75%; /* fz75% */
  text-align: center; /* txa */
  font-style: italic; /* fsi */
  padding: 2em; /* p2em */
  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: #5c7fa3; /* c#5c7fa3 */
  font-weight: bold; /* fwb */
}
#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/coast.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; /* Enables flexbox layout */
  flex-direction: column; /* Aligns children in a column */
  gap: 1rem; /* Adds space between items */
  max-width: 100vw; /* Ensures card row doesn't exceed viewport width  */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  overflow: auto; /* Adds scrollbars if content overflows */
}
.card-row section {
  max-width: 100%; /* Ensures sections don't exceed the width of their container */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  overflow-wrap: break-word; /* Prevents overflow of long words and wrapped to the next line */
}
.sr-only {
  position: absolute; /* p:a */
  width: 1px; /* w1px */
  height: 1px; /* h1px */
  padding: 0; /* p0 */
  margin: -1px; /* m-1px */
  overflow: hidden; /* ovh */
  clip: rect(0, 0, 0, 0); /* c:r(0, 0, 0, 0) */
  border: 0; /* b0 */
}

/* Table styles  */

table {
  border: 0.125rem solid #1976d2; /* bd:0.125rem solid #1976d2 */
  border-collapse: collapse; /* bc:border-collapse: ; */
  width: 100%; /* w100% */
}
th {
  background-color: #1976d2; /* bgc:#1976d2 */
  color: #fff; /* c:#fff */
}
td,
th {
  border: 0.125rem solid #1976d2; /* bd:0.125rem solid #1976d2 */
  padding: 0.5rem; /* p:0.5rem */
}
td {
  text-align: center; /* txa:center */
}
.text {
  text-align: left; /* txa:left */
}
tr:nth-of-type(odd) {
  background-color: #ffcd6f; /* bgc:#ffcd6f */
}
@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 */
  }
  #special table {
    margin: 0 auto; /* Adds space between rows on small screens */
  }
  #special td,
  #special th {
    display: block;
    width: 100%; /* Makes table cells take full width on small screens */
  }
  #special th {
    height: 0; /* Hides table headers on small screens */
    margin: 0; /* Removes padding from table headers on small screens */
    padding: 0; /* Removes padding from table headers on small screens */
    font-size: 0.625rem; /* Reduces font size of table headers on small screens */
    border: none; /* Removes borders from table headers on small screens */
    overflow: hidden; /* Hides any overflow content in table headers on small screens */
    padding: 0; /* Removes padding from table headers on small screens */
  }
  td.package::before {
    content: "Package: "; /* Adds "Package: " before package name */
  }
  td.description::before {
    content: "Description: "; /* Adds "Description: " before description */
  }
  td.nights::before {
    content: "Nights: "; /* Adds "Nights: " before number of nights */
  }
  td.cost::before {
    content: "Cost: "; /* Adds "Cost: " before price */
  }
  .package,
  .description,
  .nights,
  .cost {
    width: 100px;
    padding-left: 35%; /* Adds left padding to create space for labels */
    position: relative; /* Allows absolute positioning of labels */
    text-align: left;
  }
  td::before {
    width: 25%; /* Sets width of labels */
    display: block; /* Makes labels block elements */
    padding-right: 0.625rem; /* Adds space between label and content */
    position: absolute; /* Positions labels absolutely */
    top: 0.375rem; /* Vertically aligns labels with content */
    left: 1rem; /* Aligns labels to the left */
    color: #39c; /* Sets label color */
    font-weight: bold; /* Makes labels bold */
    white-space: nowrap; /* Prevents labels from wrapping to the next line */
  }
}
@media (min-width: 37.5rem) {
  nav ul {
    border-bottom: none; /* Removes bottom border from nav on larger screens */
    padding: 0 1rem; /* Adds horizontal padding to nav on larger screens */
    max-width: none; /* Removes max-width restriction on larger screens */
  }
  nav li {
    border-bottom: none; /* Removes bottom border from nav items on larger screens */
    padding: 0 1rem; /* Adds horizontal padding to nav items on larger screens */
    max-width: none; /* Removes max-width restriction on nav items on larger screens */
  }
  .card-row {
    flex-direction: row; /* Aligns children in a row for larger screens */
    gap: 1.5rem; /* Increases space between items for larger screens */
    max-width: 100vw; /* Ensures card row doesn't exceed viewport width  */
  }
  .card-row section {
    flex: 1 1 0; /* Each section takes up approximately half the width of the container, minus the gap */
    max-width: 100%; /* Ensures sections don't exceed half the width of their container, minus the gap */
  }
}