@import url("https://fonts.googleapis.com/css2?family=Gabarito&family=Open+Sans&family=Roboto&display=swap");

body {
  font-family: "Roboto", cursive;
  margin: 0px;
}

:root {
  --primary-color: blue;
}

/* .header { */
  /* background-color: rgba(255, 255, 255, 0.459); */
/* } */

.img {
  height: 8%;
  width: 8%;
  margin: 0rem;
}

a:link {
  text-decoration: none;
}
a.nav-link:hover {
  font-weight: bolder;
}

.heading-h1 {
  padding-top: 0.8rem;
  font-weight: bolder;
  color: black;
}
.hero-image {
  /* background-image: linear-gradient(rgba(36, 16, 16, 0.4), rgba(0, 0, 0, 0.4)),
    url("/images/rrlogo.svg"); */
    background-image: 
    url("/images/profileImage.jpg");
  height: 50vh;
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 1rem;

}

.card {
  margin: 0.4rem;
}

.about-us {
  /* background-color: whitesmoke; */
  padding: 2rem;
}

.contact-us {
  padding: 2rem;
}
.contact-us a {
  padding: 1rem;
}
.contact-us div {
  padding: 0.2rem;
}

.css-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5em;
}
.css-grid > div {
  background: #eee;
  padding: 1em;
}

.css-grid > div:nth-child(odd) {
  background: #ddd;
}

@media only screen and (min-width: 768px) {
  /* For desktops phones: */
  #reservation {
    width: 400px;
    position: fixed;
  }
}