:root {
  --background-color: #00587c;
}

header {
  background-color: var(--background-color);
  text-align: center;
}

header h1 {
  padding: 20px;
}

body {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #0077b6, var(--background-color)) fixed;
  font-family: Arial, sans-serif;
  color: white;
  margin: 0;
  padding: 0;
}

/* container */
.column {
  text-align: center;
}

h1 {
  font-size: 36px;
}

#main-body {
  padding: 2em 0;
}

#travelheader {
  font-size: 30px;
  text-align: left;
}

#map {
  height: 400px;
  width: 100%;
  color: black;
}
.searchField {
  text-align: center;
}

#search-results {
  padding: 20px;
}

.item:hover {
background-color: rgb(217, 233, 243);
transition: background-color 0.5s;
}

h2 {
  font-size: 40px;
}
h3 {
  font-size: 30px;
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

.hero {
  background-image: url("../../assets/images/iStock-1149801149.jpg");
  background-repeat: no-repeat !important;
  background-position: bottom;
  background-size: cover;
  border-radius: 0;
  width: 100%;
  height: 30em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-text {
  background-color: #00587cd9;
  width: fit-content;
  margin: 0 auto;
  padding: 1em 2em;
}

#foodButton {
  color: #f2f0f5;
}

#locations {
  height: 20em;
  overflow-y: scroll;
  background-color: white;
}

button:hover {
  background-color: #0077b6;
}

footer {
  margin-top: auto;
  width: 100%;
  background-color: #3dade9;
  color: white;
  text-align: center;
  font-size: 25px;
}

footer:hover {
  background-color: #00587c;
  transition: background-color 0.7s;
}