.preloader-holder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fffffff2;
  z-index: 10000;
}
.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 128px;
  width: 128px;
  margin: -64px 0 0 -64px;
  -webkit-animation: 2s linear infinite fade;
  animation: 2s linear infinite fade;
}
.status {
  margin: 1em 0;
}
.status.error {
  color: #e11d48;
}
.status.success {
  color: green;
}
.req.error {
  border-color: #e11d48;
}
body div.grecaptcha-badge {
  visibility: hidden;
}

main {
  min-height: 100vh;
}

.h3::first-letter {
  text-transform: uppercase;
}

.menu {
  flex: 1;
  padding: 8px 0;

  display: flex;
  flex-direction: row;
  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  user-select: none;

  @media (max-width: 768px) {
    gap: 8px;
  }

  @media (max-width: 450px) {
    gap: 6px;
  }

  a {
    display: flex;
    white-space: nowrap;
    border-radius: 14px;
    background: #f3f4f6;
    padding-top: 4px 12px;
    font-size: 10px;
    font-weight: 300;
    line-height: 1;
    transition:
      background 0.2s ease-in-out,
      transform 0.2s ease-in-out;

    &.selected,
    &:hover {
      transform: translateY(-2px);
      background: #d4d4d8;
    }

    @media (min-width: 640px) {
      padding: 8px 15px;
    }

    @media (min-width: 330px) {
      padding: 6px 14px;
      font-size: 14px;
    }
  }
}