* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 1280px;
  margin: auto;
}
body div.gridcontainer {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}
body div.gridcontainer > header {
  grid-area: "header";
  background-color: #c4b5b5;
  border-radius: 0px 0px 20px 0px;
}
body div.gridcontainer > header > h1 {
  font-size: 3rem;
  padding: 1rem 0.5rem;
}
body div.gridcontainer > header > nav {
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
}
body div.gridcontainer > header > nav > ul {
  display: flex;
  gap: 0.3rem;
  justify-content: space-between;
  list-style-type: none;
  border-radius: 0px 0px 20px 0px;
  /* Add a black background color to the top navigation */
  background-color: #1e90ff;
  overflow: hidden;
  /* Add an active class to highlight the current page */
}
body div.gridcontainer > header > nav > ul > li {
  /* Change the color of links on hover */
}
body div.gridcontainer > header > nav > ul > li > a {
  /* Style the links inside the navigation bar */
  width: 100%;
  display: block;
  color: #f2f2f2;
  text-align: center;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  background-color: #1e90ff;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  body div.gridcontainer > header > nav > ul > li > a {
    border-radius: 10%;
    display: block;
  }
}
body div.gridcontainer > header > nav > ul > li > a:hover {
  background-color: rgba(255, 255, 255, 0.5529411765);
  color: black;
}
body div.gridcontainer > header > nav > ul li.active {
  background-color: #1e90ff;
  color: white;
}
body div.gridcontainer > header > nav > ul.topnav.responsive {
  flex-direction: column;
  text-align: center;
}
body div.gridcontainer > header > nav > ul.topnav.responsive > li {
  display: block;
  text-align: left;
}
body div.gridcontainer > header > nav > ul.topnav.responsive > li.icon,
body div.gridcontainer > header > nav > ul.topnav.responsive a.icon {
  display: block;
  position: absolute;
  right: 0;
}
@media screen and (max-width: 600px) {
  body div.gridcontainer > header > nav .topnav li:not(:first-child) {
    display: none;
  }
  body div.gridcontainer > header > nav .topnav li.icon,
  body div.gridcontainer > header > nav .topnav a.icon {
    float: right;
    display: block;
    border-radius: 20px 0px 0px 20px;
  }
}
@media screen and (min-width: 600px) {
  body div.gridcontainer > header > nav ul.topnav li.icon {
    display: none;
  }
}
body div.gridcontainer > main {
  grid-area: "main";
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem 0.5rem;
}
body div.gridcontainer > main > section > img {
  max-inline-size: 100%;
  block-size: auto;
  width: 100vw;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 80% 100%;
     object-position: 80% 100%;
  min-height: 300px;
}
body div.gridcontainer > main.carsgrid > article {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  text-align: center;
}
body div.gridcontainer > main.carsgrid > article > button {
  background-color: #1e90ff;
  color: white;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}
@media screen and (min-width: 768px) {
  body div.gridcontainer > main.carsgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  body div.gridcontainer > main.carsgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
body div.gridcontainer main.booking > form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 360px;
  margin: 2rem auto;
  padding: 1rem;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
body div.gridcontainer main.booking > form > label {
  font-weight: bold;
  font-size: 1.1rem;
}
body div.gridcontainer main.booking > form > input,
body div.gridcontainer main.booking > form select,
body div.gridcontainer main.booking > form button {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}
body div.gridcontainer > main.aboutgrid > section > section.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  text-align: center;
  max-width: 250px;
}
body div.gridcontainer > main.aboutgrid > section > section.card > img {
  max-inline-size: 100%;
  block-size: auto;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}
body div.gridcontainer > footer {
  grid-area: "footer";
  padding: 0px 1rem;
  text-align: center;
  background-color: #c4b5b5;
}/*# sourceMappingURL=style.css.map */