html {
  --darkerColor: color-mix(in oklch, var(--color), #42190e 20%);
  --darkColor: color-mix(in oklch, var(--color), #42190e 10%);
  --color: #f0532d;
  --lightColor: color-mix(in oklch, var(--color), white 45%);
  --lighterColor: color-mix(in oklch, var(--color), white 60%);
  --lightestColor: color-mix(in oklch, var(--color), white 80%);
  height: 100%;
}
body {
  font-family: "Comma Sans";
  min-height: 100%;
  margin: 0;
  padding: 1rem 0;
  box-sizing: border-box;
  background-image: url("../images/background-pattern.svg");
  background-size: 13vh;
  background-position: 0% 2%;
  background-repeat: repeat-x;
  background-color: var(--color);
  color: white;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr max-content;
  grid-template-areas:
    "."
    ".";
}
body > * {
  text-align: center;
}
h2 {
  font-size: min(5ex, 1.5rem);
  margin-top: 0.5rem;
  font-weight: 400;
  color: var(--lightestColor);
  padding: 0;
  margin: 0;
}
hgroup {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.logo {
  width: min(400px, 70vw);
  margin: 0 auto;
  display: inline-block;
  filter: drop-shadow(0px 2px 0px var(--darkerColor))
    drop-shadow(0px 0px 10px var(--darkColor));
}

.description {
  color: var(--lightestColor);
  line-height: 1.5;
  margin-bottom: 1rem;
}

a {
  color: currentColor;
  padding-inline: 0.5ex;
  text-decoration-color: var(--lightColor);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--lighterColor);
  /* text-decoration-color: var(--color); */
}

.address {
  color: var(--lightColor);
  display: flex;
  gap: 0.5ex;
  justify-content: center;
}

@media (max-width: 469px) {
  .address .dot {
    display: none;
  }
  .address {
    display: flex-inline;
    flex-direction: column;
  }
}

.icon {
  display: inline-block;
  width: 1.5cap;
  height: 1.5cap;
  vertical-align: -0.25cap;
}