:root {
  --w-header-main--hor: 100%;
  --h-header-main--hor: 62px;
  --pdg-header-main--hor: 0 16px;
  --w-header-main--ver: 108px;
  --h-header-main--ver: 100dvh;
  --color-background--header: var(--color-primary);
  --color-on-background--header: var(--color-on-primary);
  --color-background-container--header: var(--color-primary-container);
  --color-on-background-container--header: var(--color-on-primary-container);
  --color-background-main-container:var(--color-background);
  --color-on-background-main-container:var(--color-on-background);
  --color-footer:var(--color-secondary);
  --color-on-footer:var(--color-on-secondary);
}

.main-container {
  background-color: var(--color-background-main-container);
  color: var(--color-on-background-main-container);
}

.header-main--container {
  position: fixed;
  z-index: 6;
}
.header-main--container.horizontal {
  width: var(--w-header-main--hor);
  height: var(--h-header-main--hor);
  max-height: var(--h-header-main--hor);
  background-color: var(--color-background--header);
  color: var(--color-on-background--header);
  fill: var(--color-on-background--header);
}
.header-main--container.hor-after-ver {
  width: var(--w-header-main--hor);
  height: var(--h-header-main--hor);
  max-height: var(--h-header-main--hor);
}
.header-main--container.hor-after-ver.rail {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  fill: var(--color-on-primary);
}
.header-main--container.hor-after-ver .header-main--content {
  padding: var(--pdg-header-main--hor);
}
.header-main--content {
  width: 100%;
  align-items: center;
}
.header-main--content .low {
  color: var(--color-on-background--header);
  fill: var(--color-on-background--header);
}
.header-main--content .low:where(:hover, :active) .container-svg:before {
  background-color: var(--color-on-background--header);
}

.footer-container, .footer-main--container {
  background-color: var(--color-footer);
  color: var(--color-on-footer);
}

@media screen and (min-width: 640px) {
  .header-main--container.hor-after-ver {
    width: var(--w-header-main--ver);
    height: var(--h-header-main--ver);
    max-height: var(--h-header-main--ver);
  }
  .header-main--container.hor-after-ver .header-main--content {
    flex-direction: column;
  }
}

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