site-footer {
  position: relative;
  display: block;
  max-width: 600px;
  margin: auto;
  padding: 0;
}

site-footer [prop='divider'] {
  height: 1rem;
  width: 1px;
  background: color-mix(in srgb, var(--text), transparent 70%);
}

site-footer [prop='divider']:last-child {
  display: none;
}

site-footer [container] {
  position: relative;
  display: flex;
  gap: 0.77rem;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

/* @media (min-width: 1000px) {
  .site-footer-container {
    justify-content: space-between;
    align-items: flex-start;
  }
} */

site-footer [heading] {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 0.77rem;
}

site-footer [links] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.77rem;
}

site-footer [branding] {
  max-width: 130px;
  width: fit-content;
  height: fit-content;
}

site-footer [branding] svg {
  height: 2.5rem;
  width: auto;
  max-width: 100%;
}

site-footer [install] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  height: 1.5rem;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text), transparent 75%);
  border-radius: 3px;
  font-size: 12px;
  padding: 0.33rem;
  text-decoration: none;
  transition: all ease 300ms;
}

site-footer [install]:hover {
  background: color-mix(in srgb, var(--text), transparent 90%);
}

site-footer [contact] {
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.33rem;
}

site-footer [contact] span {
  color: color-mix(in srgb, var(--text), transparent 40%);
}

site-footer [contact] a {
  text-decoration: none;
  font-weight: 400;
}

site-footer [contact] a:hover {
  text-decoration: underline;
}

site-footer [user],
site-footer [legal] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.77rem;
  font-size: 0.77rem;
  text-decoration: none;
}

site-footer [user] a,
site-footer [legal] a {
  text-decoration: none;
  color: color-mix(in srgb, var(--text), transparent 40%);
  transition: all ease 300ms;
  white-space: nowrap;
}

site-footer [user] a:hover,
site-footer [legal] a:hover {
  color: color-mix(in srgb, var(--text), transparent 0%);
  text-decoration: underline;
}

site-footer [copyright] {
  font-size: 0.77rem;
  color: color-mix(in srgb, var(--text), transparent 60%);
}

site-footer langauge-selector > button {
  padding: 0;
  background: none;
  height: fit-content;
  width: fit-content;
  text-decoration: none;
  color: color-mix(in srgb, var(--text), transparent 40%);
  transition: all ease 300ms;
  font-size: 0.77rem;
  text-decoration: none;
  font-weight: 400;
}

site-footer langauge-selector button > span {
  display: none;
}

site-footer langauge-selector:hover button,
site-footer langauge-selector:focus-within button {
  text-decoration: underline;
}

site-footer langauge-selector a:hover {
  text-decoration: none;
}