@font-face {
  font-family: "Philosopher";
  src: url("./assets/fonts/Philosopher/Philosopher-Regular.ttf")
    format("truetype");
}

@font-face {
  font-family: "Mulish";
  src: url("./assets/fonts/Mulish/Mulish-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter/Inter_28pt-Regular.ttf") format("truetype");
}

:root {
  /* number */
  --space-xxxs: 4px;
  --space-xxs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-xxxl: 80px;
  --space-4-xl: 112px;
  /* color */
  --font-color-black: #1a1a1a;
  --font-color-brand: #f5f5f7;
  /* number */
  --font-line-height-copy-m: 28px;
  --font-line-height-copy-l: 32px;
  --font-line-height-display-xl: 60px;
  --font-line-height-display-xxl: 90px;
  --font-size-copy-xs: 14px;
  --font-size-copy-s: 18px;
  --font-size-copy-m: 20px;
  --font-size-display-l: 32px;
  --font-size-display-xl: 60px;
  --font-size-display-xxl: 80px;
  --font-weight-regular: 400px;
  --font-weight-bold: 700px;
  --radius-radius-s: 1px;
  --radius-radius-m: 2px;
  --radius-radius-l: 4px;
  --radius-radius-full: 9999px;
  /* string */
  --font-body: Mulish;
  --font-heading: Philosopher;
  --font-logo: Inter;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  margin: 0;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  min-height: 100dvh;
  max-width: 1440px;
  margin-inline: auto;
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;

  position: relative;

  @media (min-width: 1024px) {
    gap: 40px;
  }
}

.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background: linear-gradient(90deg, var(--font-color-black) 50%, #0000 0)
    right/200% 100%;
  animation: l21 2s infinite linear;
}
.loader::before {
  content: "Loading...";
  color: #0000;
  padding: 0 5px;
  background: inherit;
  background-image: linear-gradient(
    90deg,
    var(--font-color-brand) 50%,
    var(--font-color-black) 0
  );
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes l21 {
  100% {
    background-position: left;
  }
}

:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}