html {
  --content-bg: #f9fbfd;
  --header-bg: #ffffff;
  --link-color: #195cae;
  --font-main: #02073e;
  --text-disabled: #9a9cb2;
  --red-accent: #e12c6c;
  --input-border: #195cae;
  --input-border-hovered: #9fb1e1;
  --button-color: #3c4ac6;
  --button-color-alert: #ae1919;
  --green-border: #55c738;
  --green-accent: #f9fffa;
  --card-down: #faebec;
  --main-green: #3cc68a;
  --main-yellow: #ecbc35;
  --main-bg-red: #ae1919;
  --h-gap: 20px;
  --v-gap: 25px;
  --h-gap-content: 15px;
  --v-gap-content: 20px;
  --h-gap-content-small: 10px;
  --v-gap-content-small: 15px;
  --gap-micro: 5px;
  --section-top-gap: 55px;
  --header-height: calc(4.5rem + 2px);
  --border: #195cae;
  --border-radius: 8px;
  --shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.25);
  --clr-qms: #7700ff;
  --graph1: #16a0b0;
  --graph2: #9787ff;
  --graph2_tr: #9787ff00;
  --graph3: #da1f63;
  --graph3_tr: #da1f6300;
  --graph4: #e79e55;
  --map: rgba(166, 209, 233, 0.75);
  --complaints-map-color: 240deg;
  --internet-map-color: 168deg;
  --chart1: #36c936;
  --chart2: #6799fe;
  --chart3: #9933ff;
  --chart4: #e35454;
  --chart5: #e79e55;
  --chart_edgecenter: hsl(260, 100%, 50%);
  --chart_cdnvideo: hsl(40, 100%, 50%);
  --chart_curator: hsl(195, 70%, 45%);
  --chart_megafon: hsl(145, 70%, 45%);
  --chart_edgecenter1: hsl(260, 100%, 75%);
  --chart_cdnvideo1: hsl(40, 100%, 75%);
  --chart_curator1: hsl(195, 70%, 70%);
  --chart_megafon1: hsl(145, 70%, 70%);
  --hist1: #7d85cc;
  --hist2: #649dad;
  --hist2-sel: #4f8796;
  --hist3: #5760ae;
  --agraph0: #0fb5ae;
  --agraph1: #4046ca;
  --agraph2: #f68511;
  --agraph3: #de3d82;
  --agraph4: #7e84fa;
  --agraph5: #72e06a;
  --agraph6: #147af3;
  --agraph7: #7326d3;
  --agraph8: #e8c600;
  --agraph9: #cb5d00;
  --agraph10: #008f5d;
  --agraph11: #bce931;
  --average-line: #062062;
  font-size: 16px;
  line-height: 1.2;
  overflow-y: scroll;
}
body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  color: var(--font-main);
  background-color: var(--content-bg);
  position: relative;
  max-width: 1500px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
}
body > .header {
  margin: 0 -1rem;
  padding: 0 1rem;
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: repeat(5, max-content) 1fr max-content 2.5em;
  grid-template-rows: max-content;
  column-gap: var(--v-gap-content-small);
  justify-items: start;
  align-items: center;
  align-content: center;
  position: sticky;
  top: 0;
  background-color: var(--header-bg);
  z-index: 1000;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: -50vw 0 0 0 var(--header-bg), 50vw 0 0 0 var(--header-bg);
}
body > .header a {
  color: var(--font-main);
  text-decoration: none;
}
body > .header a:active,
body > .header a:visited {
  color: var(--font-main);
}
body > .header a[href]:hover {
  color: var(--red-accent);
}
body > .header > .submenu {
  position: relative;
  cursor: pointer;
}
body > .header > .submenu::after {
  content: "";
  display: inline-block;
  border: 0.35em solid transparent;
  margin-left: 0.15em;
  border-top-color: currentColor;
  opacity: 0.7;
  vertical-align: -0.15em;
}
body > .header > .submenu > div {
  position: absolute;
  top: 100%;
  left: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.25em 1ch;
  line-height: 1.75;
  min-width: 100%;
  background-color: var(--header-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  z-index: 1000;
}
body > .header > .submenu > div > a {
  white-space: nowrap;
}
body > .header > .submenu.show > div {
  visibility: visible;
  transform-origin: top center;
  animation: showup 250ms;
}
body > .header > .searchbar {
  grid-column: -4 / -3;
  justify-self: end;
  width: min(20em,100%);
}
body > .header > .searchbar:not(:focus-within) {
  border-color: color-mix(in oklab, var(--font-main) 30%, var(--header-bg));
}
body > .header #selector {
  grid-row: 1 / 2;
  grid-column: -2 / -1;
}
body > footer {
  margin: var(--h-gap) -1rem 0;
  padding-right: clamp(1rem, calc(4rem - (100vw - 1500px) / 2), 4rem);
  padding-left: 1rem;
  padding-block: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v-gap-content-small) var(--h-gap-content-small);
  background-color: var(--content-bg);
  z-index: 1;
}
body > footer > * {
  line-height: 1.5;
  color: var(--text-disabled);
  white-space: nowrap;
}
body > footer a.curator {
  margin-left: auto;
  color: var(--text-disabled);
  vertical-align: middle;
}
body > footer a.curator img {
  display: inline-block;
  width: 5.5rem;
  height: 1.5rem;
  margin: -0.25rem 0 -0.25rem 0.5ch;
  transform: translateY(0.1em);
  filter: brightness(0) opacity(0.3);
  transition: filter 250ms ease-in-out;
}
body > footer a.curator:hover img {
  filter: brightness(1) opacity(1);
}
h1,
.h1 {
  font-size: 48px;
  line-height: 1.4;
  font-weight: normal;
  font-style: normal;
  text-wrap: balance;
}
h2,
.h2 {
  font-size: 37px;
  line-height: 1.4;
  font-weight: normal;
  font-style: normal;
  text-wrap: balance;
}
h3,
.h3 {
  font-size: 22px;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  text-wrap: balance;
}
h4,
.h4 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: brightness(97%) blur(3px);
}
.modal.dark {
  backdrop-filter: brightness(15%);
}
.modal > div {
  transform-origin: center;
  animation: showup 250ms ease-out;
}
.searchbar {
  position: relative;
  display: flex;
}
.searchbar > input {
  flex-basis: 0;
  flex-grow: 1;
}
.searchbar > div {
  position: absolute;
  z-index: 100;
  background-color: var(--header-bg);
  right: 0;
  top: calc(100% - 1px);
  min-width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  border: 1px solid var(--input-border);
  transform-origin: center top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 250ms ease-in-out, opacity 250ms ease-out;
  transition-delay: 150ms;
}
.searchbar > div > a {
  line-height: 2;
  white-space: nowrap;
  padding: 0 1ch;
  text-decoration: none;
  cursor: pointer;
}
.searchbar > div > a:nth-child(5) ~ * {
  display: none;
}
.searchbar > div > a.site {
  font-style: italic;
}
.searchbar > div > a.site:not([href]) {
  color: var(--link-color);
}
.searchbar > div > a.site[href]:hover {
  color: var(--red-accent);
}
.searchbar:focus-within > div:not(:empty) {
  transform: scaleY(1);
  opacity: 1;
}
label.checkbox {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--text-disabled);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
label.checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
label.checkbox input + div {
  font-size: 0.8em;
  position: relative;
  width: 2em;
  height: 1.5em;
  margin: 0 0.5em;
}
label.checkbox input + div::before {
  content: "";
  position: absolute;
  width: 2em;
  height: 1em;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 100vmax;
  background-color: var(--text-disabled);
  transition: background-color 150ms;
}
label.checkbox input + div::after {
  content: "";
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  top: 50%;
  left: 0.5em;
  transform: translate(-50%, -50%);
  border-radius: 100vmax;
  background-color: var(--header-bg);
  border: 1px solid var(--font-main);
  transition: left 150ms, border-color 150ms;
}
label.checkbox input:checked + div::before {
  background-color: var(--font-main);
}
label.checkbox input:checked + div::after {
  left: calc(100% - 0.5em);
}
label.checkbox:focus-within {
  outline: 1px dotted var(--input-border-hovered);
  outline-offset: 1px;
}
input,
textarea,
my-select,
my-input {
  border: 1px solid var(--input-border);
  padding: 0 var(--border-radius);
  border-radius: var(--border-radius);
  accent-color: var(--red-accent);
  color: inherit;
  line-height: 2.5;
}
input::placeholder,
textarea::placeholder,
my-select::placeholder,
my-input::placeholder {
  color: var(--text-disabled);
  font-style: italic;
}
input:focus-within,
textarea:focus-within,
my-select:focus-within,
my-input:focus-within {
  outline: 1px solid var(--input-border-hovered);
  outline-offset: 0;
}
my-input {
  --dropdown-bg: var(--header-bg);
  --hover-bg: var(--text-disabled);
  --hover-fg: var(--font-main);
  --placeholder-color: var(--text-disabled);
  --placeholder-opacity: 1;
  --placeholder-style: italic;
}
button {
  line-height: 2.5;
  background-color: var(--button-color);
  border: none;
  border-radius: var(--border-radius);
  padding: 0 1em;
  color: var(--header-bg);
  cursor: pointer;
}
button:focus-within {
  outline: 1px dotted var(--link-color);
  outline-offset: 1px;
}
a {
  color: var(--link-color);
  text-decoration: none;
}
a:visited,
a:active {
  color: var(--link-color);
}
a:hover {
  color: var(--red-accent);
}
a.card {
  position: relative;
  width: min(15vw,155px);
  aspect-ratio: 0.97;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) 2rem 27% calc(0.75rem + 1px);
  align-items: stretch;
  justify-items: stretch;
  padding-top: 0.5em;
  background-color: var(--header-bg);
}
a.card.down {
  background-color: var(--card-down);
}
a.card.down::after {
  content: "";
  position: absolute;
  width: 15%;
  aspect-ratio: 1;
  right: 2px;
  top: 2px;
  background-image: url(/img/corner.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: center;
  animation: wobble 5s linear infinite;
}
a.card img {
  object-fit: contain;
}
a.card > span {
  line-height: 1;
  text-align: center;
  align-self: center;
  color: var(--font-main);
  font-size: min(14px,1.5vw);
  padding: 0 2px;
}
a.card > span.forced {
  word-break: break-word;
}
a.card > div {
  overflow: hidden;
  display: flex;
  justify-content: start;
  align-items: start;
}
a.card > div:nth-of-type(2) {
  background-color: var(--header-bg);
  padding-top: 1px;
}
#usermenu {
  grid-column: -3 / -2;
  position: relative;
  cursor: pointer;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
#usermenu > button {
  background-color: var(--text-disabled);
}
#usermenu > span {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-weight: bold;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--font-main);
  color: var(--header-bg);
}
#usermenu > div {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--header-bg);
  padding: 0.25em 1ch;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  visibility: hidden;
  white-space: nowrap;
  z-index: 1000;
}
#usermenu > div div {
  line-height: 1.75;
}
#usermenu > div div:hover {
  color: var(--red-accent);
}
#usermenu > div.show {
  visibility: visible;
  animation: showup 250ms;
  transform-origin: top right;
}
#hamburger {
  cursor: pointer;
  display: none;
  width: 5.5rem;
  height: var(--header-height);
  margin: -1rem 0;
  justify-self: end;
  align-items: center;
  justify-content: center;
}
#hamburger img {
  width: 36px;
}
#hamburger span {
  display: none;
  color: var(--red-accent);
  font-weight: bold;
  font-size: 42px;
  line-height: 1;
}
#hamburgermenu {
  display: none;
}
#login > div {
  width: 420px;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: var(--h-gap);
  padding: var(--h-gap) var(--v-gap);
  border-radius: var(--border-radius);
  background-color: var(--header-bg);
  box-shadow: var(--shadow);
}
#login span:first-child {
  line-height: 1.5;
  text-align: center;
}
#login span:nth-child(2) {
  color: var(--text-disabled);
  text-align: center;
  margin-top: calc(-1 * var(--h-gap));
}
#login input {
  background-color: var(--content-bg);
}
#login button {
  background-color: var(--red-accent);
  text-transform: lowercase;
  font-variant: small-caps;
  margin-top: var(--h-gap);
}
#logo {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(2, max-content);
  cursor: pointer;
  margin-right: 0.5em;
}
#logo > img {
  grid-row: span 2;
  width: 2.375rem;
  height: 1.6rem;
  object-fit: contain;
  align-self: center;
  padding-right: 0.5rem;
  border-right: 2px solid #344767;
  margin-right: 0.5rem;
}
#logo span {
  line-height: 1;
  font-weight: bold;
  color: #344767;
}
#logo span:last-child {
  font-weight: normal;
  font-size: 60%;
}
#logo em {
  font-style: normal;
  color: #e02a6b;
}
#logo em:last-child {
  padding-right: 0.15rem;
}
#selector {
  width: 3.5rem;
  height: 3.5rem;
  position: absolute;
  right: calc(50% - 1.75rem);
  top: calc(50% - 1.75rem);
  border-radius: var(--border-radius);
  isolation: isolate;
  transition-property: width, height, box-shadow;
  transition-duration: 250ms;
  cursor: pointer;
}
#selector [data-flag] {
  position: absolute;
  width: calc(2.5rem + 2px);
  height: calc(2.5rem + 2px);
  left: 50%;
  top: 1.75rem;
  translate: -50% -50%;
  border-radius: 0.5rem;
  transition-property: top, opacity, width, height;
  transition-duration: 250ms;
  object-fit: cover;
  object-position: 0% 50%;
  z-index: 0;
  opacity: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
#selector [data-flag="kz"] {
  object-position: 58% 50%;
}
#selector [data-flag="in"] {
  object-position: 50% 50%;
}
#selector [data-flag="xx"] {
  object-position: 50% 50%;
}
#selector .selected {
  z-index: 1;
  opacity: 1;
}
#selector:where(:not(.open):has(.changelocation))::after {
  content: "";
  position: absolute;
  top: calc(100% - 0.5rem + 2px);
  right: 50%;
  width: 0.5rem;
  height: 1rem;
  border-right: 2px solid color-mix(in oklab, var(--button-color) 50%, var(--content-bg));
  z-index: 1;
  animation: opacityup 250ms;
}
#selector:where(:not(.open):has(.changelocation))::before {
  content: "";
  position: absolute;
  top: calc(100% - 1.5em + 2px);
  right: 50%;
  width: 2em;
  height: 2em;
  border: 2px solid color-mix(in oklab, var(--button-color) 50%, var(--content-bg));
  border-radius: 50%;
  clip-path: rect(50% auto auto 50%);
  box-shadow: 0px 0px 0px 2em color-mix(in oklab, var(--button-color) 10%, var(--content-bg));
  z-index: 1;
  animation: opacityup 250ms;
}
#selector > .changelocation {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 50%;
  animation: opacityup 250ms;
  cursor: default;
  pointer-events: none;
}
#selector > .changelocation > div {
  position: relative;
  padding: 0.5rem 1rem 3rem;
  border: 2px solid color-mix(in oklab, var(--button-color) 50%, var(--content-bg));
  border-radius: 0.5em;
  border-top-right-radius: 0;
  background-color: color-mix(in oklab, var(--button-color) 10%, var(--content-bg));
  pointer-events: all;
}
#selector > .changelocation > div > span {
  display: block;
  font-size: 120%;
  text-align: center;
  text-wrap: nowrap;
}
#selector > .changelocation > div > button {
  position: absolute;
  bottom: 0.75rem;
  left: 28%;
  width: 32%;
  translate: -50%;
  margin-top: 0.25rem;
  padding: 0;
  line-height: 1.75;
  background-color: color-mix(in oklab, var(--button-color) 70%, var(--content-bg));
  border: 1px solid color-mix(in oklab, var(--button-color) 70%, var(--content-bg));
  cursor: pointer;
}
#selector > .changelocation > div > button:last-of-type {
  left: 72%;
  background-color: color-mix(in oklab, var(--button-color) 20%, var(--content-bg));
  color: var(--font-main);
}
#selector.open {
  height: 18.5rem;
  background-color: var(--header-bg);
  box-shadow: var(--shadow);
  z-index: 1;
}
#selector.open [data-flag] {
  opacity: 1;
}
#selector.open [data-flag]:nth-last-child(1 of :not(.selected)) {
  top: 4.75rem;
}
#selector.open [data-flag]:nth-last-child(2 of :not(.selected)) {
  top: 7.75rem;
}
#selector.open [data-flag]:nth-last-child(3 of :not(.selected)) {
  top: 10.75rem;
}
#selector.open [data-flag]:nth-last-child(4 of :not(.selected)) {
  top: 13.75rem;
}
#selector.open [data-flag]:nth-last-child(5 of :not(.selected)) {
  top: 16.75rem;
}
#selector.open > .changelocation {
  display: none;
}
#goup {
  position: fixed;
  width: 2.5rem;
  height: 2.5rem;
  top: 100dvh;
  right: max((100dvw - 1500px) / 2 - 2.5rem, 0.5rem);
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
  background-color: #3f83b0;
  transform: translateY(0);
  transition: transform 300ms ease-in-out;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
}
#goup.show {
  transform: translateY(-100%);
}
#goup::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.5rem solid transparent;
  border-top-width: 0;
  border-bottom-width: 0.866rem;
  border-bottom-color: var(--content-bg);
}
#tooltip {
  position: absolute;
  pointer-events: none;
  transition: transform 250ms;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) scale(0);
  z-index: 1500;
}
#tooltip.show {
  transform: translate(-50%, -100%) scale(1);
}
#tooltip::before {
  content: "";
  position: absolute;
  bottom: -0.1em;
  left: 50%;
  border: 0.3em solid transparent;
  border-bottom-width: 0;
  border-top-color: var(--font-main);
  border-top-width: 0.3em;
  transform: translateX(-50%);
}
#tooltip > span {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
  color: var(--content-bg);
  background-color: var(--font-main);
  padding: 0.25em 0.75ch;
  border-radius: 0.25em;
  margin-bottom: 0.2em;
}
#tooltip > span > span {
  display: flex;
  justify-content: space-between;
}
#tooltip > span > span > :last-child {
  padding-left: 1em;
}
#tooltip > span > span:first-child {
  margin-top: 0.25em;
}
section.breadcrumbs {
  font-size: 14px;
  padding-top: 0.25em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
  user-select: none;
  -webkit-user-select: none;
}
section.breadcrumbs a:not([href]) {
  color: var(--font-main);
}
section.breadcrumbs a:has(+ a)::after {
  content: ",";
  color: var(--font-main);
}
section.breadcrumbs span {
  width: 0.5em;
  height: 0.5em;
  border-right: 1px solid var(--font-main);
  border-bottom: 1px solid var(--font-main);
  transform-origin: center;
  transform: translateX(-20%) rotate(-45deg);
}
section.breadcrumbs + section {
  margin-top: var(--h-gap);
}
@keyframes showup {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes opacityup {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes wobble {
  0%,
  44%,
  50%,
  56%,
  100% {
    scale: 0.8;
  }
  47%,
  53% {
    scale: 1;
  }
  45%,
  49%,
  51%,
  55% {
    scale: 0.827;
  }
  46%,
  48%,
  52%,
  54% {
    scale: 0.973;
  }
}
@media (max-width: 1060px) {
  body > .header {
    padding-right: 0;
    grid-template-columns: 1fr minmax(0, 5.5em) max-content;
    grid-template-rows: var(--header-height) 0px;
    gap: 0;
    transition: grid-template-rows 300ms ease-in-out;
  }
  body > .header > .button {
    justify-self: end;
  }
  body > .header > a:not(.button),
  body > .header > .searchbar,
  body > .header > button,
  body > .header > .submenu {
    display: none;
  }
  body > .header #selector {
    grid-column: -3 / -2;
    width: 100%;
    height: 4em;
    right: 0;
    top: calc(50% - 2em);
  }
  body > .header #selector [data-flag] {
    max-width: unset;
    top: 2em;
  }
  body > .header #selector::before {
    right: calc(50% - 1px);
    width: 1.41em;
    clip-path: rect(50% calc(100% - 1px) auto 50%);
  }
  body > .header #selector::after {
    right: auto;
    left: calc(50% - 1px);
    top: calc(100% - 1.5em + 2px);
    height: 2em;
    width: 1.41em;
    clip-path: rect(50% 50% auto 1px);
    border: 2px solid color-mix(in oklab, var(--main-bg-blue) 50%, var(--main-bg));
    border-radius: 50%;
    box-shadow: 0px 0px 0px 2em color-mix(in oklab, var(--main-bg-blue) 10%, var(--main-bg));
  }
  body > .header #selector .changelocation {
    right: -4.5em;
    width: calc(100vw - 2em);
  }
  body > .header #selector .changelocation > div {
    border-top-right-radius: 0.5em;
    margin-left: auto;
    max-width: max-content;
  }
  body > .header #selector .changelocation > div > span {
    text-wrap: balance;
  }
  body > .header #selector.open {
    height: 30.5em;
    width: 5.5em;
  }
  body > .header #selector.open [data-flag] {
    width: 4.5em;
    height: 4.5em;
    top: 2.75em;
  }
  body > .header #selector.open [data-flag]:nth-last-child(1 of :not(.selected)) {
    top: 7.75em;
  }
  body > .header #selector.open [data-flag]:nth-last-child(2 of :not(.selected)) {
    top: 12.75em;
  }
  body > .header #selector.open [data-flag]:nth-last-child(3 of :not(.selected)) {
    top: 17.75em;
  }
  body > .header #selector.open [data-flag]:nth-last-child(4 of :not(.selected)) {
    top: 22.75em;
  }
  body > .header #selector.open [data-flag]:nth-last-child(5 of :not(.selected)) {
    top: 27.75em;
  }
  body > .header #hamburger {
    grid-column: -2 / -1;
  }
  #hamburger {
    display: flex;
  }
  #hamburgermenu {
    grid-column: span 3;
    display: grid;
    justify-self: stretch;
    grid-template-columns: auto;
    grid-auto-rows: max-content;
    overflow: hidden;
    align-self: stretch;
    gap: 1em;
    font-size: 120%;
    padding: 0 1em 0;
    transition: padding 300ms ease-in-out;
  }
  #hamburgermenu .form {
    justify-self: stretch;
    display: flex;
    gap: 1em;
    align-items: center;
    font-size: 80%;
  }
  #hamburgermenu .form .searchbar {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
  }
  #hamburgermenu > span[data-action] {
    cursor: pointer;
  }
  #hamburgermenu .tools {
    display: grid;
    justify-self: stretch;
    grid-template-columns: auto;
    grid-auto-rows: max-content;
    overflow: hidden;
    align-self: stretch;
    gap: 0.75em;
  }
  #hamburgermenu .tools > a {
    margin-left: 1em;
  }
  #usermenu {
    display: none;
  }
  body.hamburger > .header {
    grid-template-rows: var(--header-height) 100dvh;
  }
  body.hamburger #hamburger img {
    display: none;
  }
  body.hamburger #hamburger span {
    display: block;
  }
  body.hamburger #hamburgermenu {
    padding-top: 2em;
    padding-bottom: 1em;
  }
  a.card {
    width: min(155px,22vw);
  }
  a.card span {
    font-size: min(14px,2vw);
  }
}
@media (max-width: 600px) {
  body > .header > input {
    max-width: auto;
    justify-self: stretch;
  }
  a.card {
    width: min(155px,30vw);
  }
  a.card span {
    font-size: min(14px,3vw);
  }
}
@media (max-width: 450px) {
  html {
    font-size: 14px;
  }
  h1,
  .h1 {
    font-size: 42px;
  }
  h2,
  .h2 {
    font-size: 32px;
  }
  h3,
  .h3 {
    font-size: 19px;
  }
  #hamburgermenu {
    padding-left: 2px;
  }
}