* {
  box-sizing: border-box;
}
body {
  background-color: #eaeaea; /* bgc#90c7e3 */
  color: #555; /* c#fff */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* ffa */
}
#wrapper {
  background-color: #90c7e3; /* bgc#fff */
  background-image: linear-gradient(to bottom, #fff, #90c7e3);
}
header {
  background-color: #24c3d1; /* bgc#006271d */
  background-image: url(images/DVRSO-la-dv-474x800px.png); /* bgi */
  background-position: right; /* bgdp */
  background-repeat: no-repeat; /* bgr */
  background-size: contain;
  color: #fff; /* c#fff */
  padding: 0.5em;
  text-align: center; /* tac */
}
header a {
  text-decoration: none; /* txd */
}
header a:link,
header a:visited {
  color: #fff; /* c#fff */
}
header a:hover {
  color: #90c7e3; /* #90c7e3 */
}
nav {
  font-size: 120%; /*font-size: 120% */
  font-weight: bold; /* fwb */
  padding: 0; /* p0 */
  text-align: center; /* tac */
}
nav ul {
  font-size: 1.2em; /* fz1.2em */
  list-style-type: none; /* listn */
  margin: 0; /* mo */
  padding-left: 0; /* pl0 */
}
nav li {
  border-bottom: 1px solid #002171; /* bdl-solid-#002171 */
}
nav a {
  text-decoration: none; /* txd */
  transition: color 3s ease-out;
}
nav a:link {
  color: #5c7fa3; /* 5c7fa3 */
  text-decoration: none;
}
nav a:visited {
  color: #344873; /* c#344873 */
  text-decoration: none;
}
nav a:hover {
  color: #a52a2a; /* c#a52a2a */
  text-decoration: none;
}
main {
  background-color: #fff; /* bgc#fff */
  padding: 1px 20px 20px 30px;
  display: block;
  overflow: auto; /* ova */
}
.comment-section {
  max-width: 900px;
  margin: 60px auto;
  padding: 30px;
  background-color: #1e1e1e;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: "Segoe UI", sans-serif;
}

.comment-section h2 {
  font-size: 28px;
  margin-bottom: 25px;
  color: #00ffd5;
  text-align: center;
}

.comment-form {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.comment-form input[type="text"],
.comment-form textarea {
  background: #2c2c2c;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 16px;
  width: calc(50% - 10px);
  box-sizing: border-box;
}

.comment-form textarea {
  width: 100%;
  height: 150px;
  resize: vertical;
}

.comment-form input[type="text"]::placeholder,
.comment-form textarea::placeholder {
  color: #aaa;
}

.comment-form button {
  margin-top: 20px;
  padding: 15px 35px;
  background-color: #00ffd5;
  color: #000;
  font-size: 17px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.comment-form button:hover {
  background-color: #00c7a3;
}
h1 {
  /* font-size: 3em; fz3em */
  letter-spacing: 0.25em; /* lts.25em */
  margin-bottom: 0.5em; /* mb0 */
  margin-top: 0.5em; /* mt0 */
}
h1,
h2,
h3,
h4,
footer {
  font-family: Georgia, "Times New Roman", serif;
}
h2 {
  color: #1976d2; /* c#1976d2 */
  text-shadow: 1px 1px #ccc;
}
h3 {
  color: #1976d2; /* c#003 */
}
h4 {
  color: #1976d2; /* c#003 */
}
dt {
  color: #002171; /* c#002171 */
}
footer {
  background-color: #fff; /* bgc#fff */
  font-size: 75%; /* fz75% */
  font-style: italic; /* fsi */
  padding: 2em;
  text-align: center; /* txa */
}
.resort {
  color: #1976d2; /* c#1976d2 */
  font-weight: bold; /* fwb */
}
#contact {
  font-size: 90%; /* fz90% */
}
#homehero {
  background-image: url(images/cristian1.JPG); /* bgi */
  background-repeat: no-repeat; /* bgr */
  background-size: 60% 100%; /* bgz100%100% */
  height: 300px; /* h300 */
}
#yurthero {
  background-image: url(images/20190405_111334.jpg); /* bgi */
  background-repeat: no-repeat; /* bgr */
  background-size: 100% 100%; /* bgz100%100% */
  height: 300px; /* h300 */
}
#trailhero {
  background-image: url(images/20190213_204027.jpg); /* bgi */
  background-repeat: no-repeat; /* bgr */
  background-size: 100% 100%; /* bgz100%100% */
  height: 300px; /* h300 */
}

table {
  border-bottom: 2px solid #1976d2;
  border-collapse: separate; /* Changed this style to separate because I liked the look of the white
  border between the cells */
}
/* This style gives the thread the blue background color with white lettering */
th {
  background-color: #1976d2;
  color: #fff;
}
td,
th {
  padding: 0.5em;
  /* border: 2px solid #39c; */
}
td {
  text-align: center; /* tac */
}
.text {
  text-align: left; /* ta: */
}
tr:nth-last-of-type(odd) {
  background-color: #ffcd6f;
}
form {
  display: flex;
  flex-flow: column nowrap;
}
input,
textarea {
  margin-bottom: 0.5em; /* mb.5em */
}
video {
  float: right;
  margin: 1em;
}
#gallery {
  display: grid;
  gap: 2em;
}
#gallery img {
  box-shadow: 10px 10px 10px #777;
  text-align: center;
  width: 100%;
}
#demo {
  display: flex;
  flex-direction: row;
}
#demo nav {
  flex: 1;
}
#demo main {
  flex: 7;
}
#demo aside {
  flex: 2;
}

#demo {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}
@media (max-width: 200px) {
  header {
    background-image: none;
  }
  #homehero,
  #yurthero,
  #trailhero {
    background-size: auto;
  }

  #demo {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  /* Table styles for smartphone devices */
  #special table {
    display: block; /* db */
    border-bottom: none; /* bd:n */
  }
  #special td,
  #special th {
    display: block; /* db */
  }
  /* Hide the table header elements */
  #special thead {
    display: none; /* dn */
  }

  /* Use the ::before pseudo-element to inject these labels before each row of the cell content. It is
  often used to add cosmetic content to an element with the content property. The content property is
  a handy trick for revealing extra bits of data hidden to HTML. */

  td.package::before {
    content: "Package:";
  }
  td.description::before {
    content: "Description:";
  }
  td.nights::before {
    content: "Nights:";
  }
  td.cost::before {
    content: "Cost:";
  }
  td.package,
  td.description,
  td.nights,
  td.cost {
    padding-left: 35%; /* pl35% */
    position: relative; /* pos:r */
    text-align: left; /* ta:l */
    font-size: max(
      1rem,
      4vw
    ); /* Relative length units specify a length relative to another length property.
  Relative length units scale better different rendering medium. vw = relative to 1% of the 
  height of the viewport. Viewport = the browser window size. If he viewport is 50cm wide, 1vm =0.
  5cm. */
  }
  td::before {
    position: absolute; /* pos:a */
    top: 30%; /* t6 */
    left: 0.5em; /* 1.5em */
    font-weight: bold; /* fwb */
    color: #1976d2; /* color:#1976d2 */
  }
  td:last-of-type {
    border-bottom: 2px solid #1b69b2; /* bb2-solid#1b69b2 */
  }
}

@media (min-width: 600px) {
  nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }
  nav li {
    border-bottom: none;
  }
  .flow {
    display: flex;
    flex-direction: row;
  }
  section {
    flex: 1;
    margin-right: 1em;
  }
  form {
    display: grid;
    grid-template-columns: 6em 1fr;
    gap: 1em;
    max-width: 30em;
    width: 60%;
  }
  input[type="submit"] {
    grid-column: 2 / 3; /* Starting grid line number and an editing grid line number separated by a fowardslash */
    width: 9em;
  }
  #gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 730px) {
  video {
    display: block;
    float: none;
    clear: both;
    max-width: 100%;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  #wrapper {
    margin: auto;
    width: 80%;
    border: 1px solid #002171;
    box-shadow: 3px 3px 3px #002171;
  }
  nav {
    text-align: left;
    padding-left: 1em;
  }
  @supports (display: grid) {
    nav ul {
      flex-direction: column;
      padding-top: 1em;
    }
    .hero {
      grid-area: hero;
    }
    header {
      grid-area: header;
    }
    nav {
      grid-area: nav;
    }
    main {
      grid-area: main;
    }
    #gallery {
      grid-area: gallery;
    }
    footer {
      grid-area: footer;
    }
    #wrapper {
      display: grid;
      grid-template:
        "header header"
        "nav hero"
        "nav main"
        "nav footer"
        / 180px 1fr;
    }
    #gallery {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}