@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/inter-regular.woff2") format("woff2")
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/inter-bold.woff2") format("woff2")
}

body {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  letter-spacing: -0.01em
}

.page {
  background-color: var(--alt-background--box);
  color: var(--alt-text--primary);
}

.header {
  padding: 8px 16px;
  height: 48px;
  display: flex;
  align-items: center;
}

.logo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='20' fill='none'%3E%3Cpath d='M1.479 7.128h7.085v1.99L5.9 9.325c-4.305.322-5.651 1.46-5.651 4.655v.645c0 2.338 1.64 3.748 4.157 3.748 1.992 0 3.133-.47 4.54-1.904h.233v1.523h2.84V4.024H1.479v3.104zm7.085 6.735c-.877.876-2.196 1.461-3.279 1.461-1.17 0-1.669-.44-1.64-1.406.03-1.346.527-1.669 2.782-1.873l2.137-.205v2.023z' fill='%23F80'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.99 4.025h5.476v2.84h2.986V17.99h-3.484V7.158h-4.977V17.99h-3.485V0h3.485v4.025zm50.95 5.621l-2.108-.206c-1.17-.116-1.462-.409-1.462-1.346 0-1.054.41-1.318 2.046-1.318 1.462 0 1.874.235 2.08 1.23h3.279c-.088-3.337-1.113-4.189-5.184-4.189-4.45 0-5.563.85-5.563 4.275 0 3.133.82 3.982 4.13 4.304l1.727.176c1.552.146 1.932.44 1.932 1.376 0 1.142-.469 1.434-2.372 1.434-1.669 0-2.108-.262-2.196-1.346h-3.312c.088 3.455 1.142 4.334 5.358 4.334 4.685 0 5.856-.938 5.856-4.744.005-2.838-.844-3.658-4.211-3.98zm-17.938.263c0-4.509-1.55-6.09-6.002-6.09-4.392 0-6.12 2.046-6.12 7.144 0 5.564 1.523 7.405 6.442 7.405 3.544 0 5.036-1.084 5.534-4.13H47.49c-.38.942-.79 1.146-2.22 1.146-2.167 0-2.723-.614-2.84-3.22h8.344c.14-.744.217-1.498.23-2.255zm-8.549-.498c.03-1.96.82-2.693 2.694-2.693 1.786 0 2.517.732 2.577 2.693h-5.27zm10.578-4.773v13.353h3.485V7.01h4.189V4.024h-4.19v-.218c.029-.82.234-1.054.908-1.054h3.806V0h-4.1c-2.781 0-4.098.686-4.098 4.638zM32.49 17.991h-3.484V4.025h8.667v3.279h-5.183V17.99z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 74px 20px;
  text-indent: -5000px;
  height: 20px;
  width: 74px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 48px);
  padding: 16px;
  text-align: center;
}

.image-desktop {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}

.image-mobile {
  display: block;

  @media (min-width: 768px) {
    display: none;
  }
}

.image-circle {
  border-radius: 50%;
  overflow: hidden;
  width: 320px;
  height: 320px;
}

.message {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.title {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  margin: 0;
}

.text {
  font-size: 14px;
  line-height: 18px;
  margin: 0;
}

.button {
  font-size: 14px;
  margin: 0;
  color: #fff;
  text-decoration: none;
  height: 26px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--alt-border--control);

  &:hover {
    color: var(--alt-text--primary);
    border-color: var(--alt-text--primary);
  }
}