html {
  scroll-behavior: smooth;
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

h1,
h2 {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
h1 {
  font-weight: bold;
}
p {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

header,
footer {
  background-color: #8aa5ba;
  color: white;
  text-align: center;
  padding: 1em;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em;
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: inline-block;
  margin-right: 20px;
  color: white;

  text-shadow: 1px 1px 2px gray;
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: x-large;
}

.banner {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

@media screen and (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}