* {
  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 */
  background-repeat: no-repeat; /* bgr */
  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 or 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; /* makes text bold */
  padding: 0; /* space around nav content */
  text-align: center;
}

nav ul {
  list-style: none; /* lsn */
  margin: 0; /* Removes default spacing outside the list items */
  padding: 0; /* pl0 */
  display: flex; /* Turns the list items into a flexible layout */
  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 #000032;
  padding: 0.5rem 0; /* pd05em0 */
  max-width: 100%; /* maw100% */
  box-sizing: border-box; /* bs: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;
  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: #39c; /* c#39c*/
  text-shadow: 1px 1px #405405; /* txd */
}

h3 {
  color: #003; /* c#003 */
}
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/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; /* 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 */
  border: 0.125rem solid #1976d2; /* bd:0.125rem solid #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 */
}
/*  Base Styles */
form {
  display: flex; /* Enables flexbox layout */
  flex-direction: column; /* Stacks form elements vertically */
  gap: 1rem; /* Adds space between form elements */
  max-width: 32em;
  margin: 0 auto; /* Centers the form horizontally */
  padding: 2em 1em; /* Adds space around the form */
  background-color: #f8fafc; /* bgc:#f8fafc */
  border-radius: 0.5em; /* br:0.5em */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* bxsd:0 2px 8px rgba(0, 0, 0, 0.5) */
}
label {
  font-weight: 600; /*fwb */
  margin-bottom: 0.25em; /* mb:0.25em */
  color: #003; /* c:#003 */
}
input,
textarea {
  margin-bottom: 0; /* mb:0 */
  padding: 0.5em; /* p:0.5em */
  border: 1px solid #b0bec5; /* b1pxs#b0bec5 */
  border-radius: 0.25em; /* br:0.25em */
  font-size: 1em; /* fz:1em */
  transition: border-color 0.2s ease-in-out;
}
input:focus,
textarea:focus {
  border-color: #003; /* bdc:#003 */
  outline: none; /* o:n */
}
input[type="submit"] {
  background-color: #003; /* bgc:#003 */
  color: #fff; /* c:#fff */
  border: none; /* b0 */
  border-radius: 0.25em; /* br:0.25em */
  padding: 0.75em; /* p:0.75em */
  font-size: 1em; /* fz:1em */
  font-weight: bold; /* fwb */
  cursor: pointer; /* cursor changes to pointer on hover */
  transition: background-color 0.2s ease-in-out;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: rgb(75, 75, 190); /* bgc:#003 */
}
.center {
  display: flex; /* Enables flexbox layout */
  flex-direction: column; /* Stacks children vertically */
  align-items: center; /* Centers children horizontally */
  justify-content: center; /* Centers children vertically */
  text-align: center; /* txa:center */
  margin: 2em 0; /* Adds vertical margin */
  gap: 0.5rem; /* Adds space between children */
}
.center > h2,
.center > h3,
.center > p {
  margin: 0; /* Removes default margin */
}
/* Media Queries for responsiveness */

@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 {
    flex-direction: row; /* Aligns nav items in a row for larger screens */
    justify-content: center; /* Centers nav items horizontally for larger screens */
    align-items: center;
  }
  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 */
  }
}