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

:root {
  --color: #f2f7f4;
  --bg: #328632;
  --link: #e2d659;
  --hBgTint: #d9decf18;
  --hColor: rgb(243, 245, 237);
}

/* UTILITY */
.hide {
  display: none;
}

a {
  color: var(--link);
}

html,
body {
  background-color: var(--bg);
  color: var(--color);
  min-height: 100dvh;
  /* better than 100vh on mobile */
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Inter", sans-serif;
  font-size: 18px;
}

body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background-image: url(/images/green1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-size: clamp(16px, 4vw, 24px);
}
@media screen and (width < 1200px) {
  body {
    background-image: none;
    background-color: #328632;
    gap: 5px;
  }
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
  width: 100%;
  font-family: "Merriweather", serif;
  color: var(--hColor);
  width: 100%;
  background-color: var(--hBgTint);
  margin-bottom: 5px;
  padding: 6px;
}

header,
main,
footer {
  display: flex;
  padding: clamp(10px, 3vw, 30px);
  max-width: 1200px;
  width: calc(100% - 10px);
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0.831372549);
  border-radius: 7px;
}

header {
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-top: 5px;
}
header > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
header #mainLogo {
  height: 120px;
  width: auto;
  background-color: var(--color);
  border-radius: 50%;
  margin-top: 6px;
}
header .liveoak {
  font-family: Jomolhari;
  /* clamp(min, preferred, max) */
  font-size: clamp(2.5rem, 10vw, 5.2rem);
  line-height: 1;
  white-space: nowrap;
}
header .restaurantandtap {
  font-size: clamp(1.334rem, 5.25vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  margin-top: clamp(-5px, -2vw, -10px);
  white-space: nowrap;
}

main {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
}
main > * {
  width: 100%;
}

footer {
  margin-bottom: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 0.9em;
}
footer .contact {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* Change selection background and text color */
::selection {
  background-color: #d4af37; /* gold */
  color: #0f2f1f; /* dark green / text color */
}

/* Optional: Firefox uses ::-moz-selection */
::-moz-selection {
  background-color: var(--link);
  color: var(--bg);
}

/*# sourceMappingURL=base.css.map */