@import "modern-normalize";

* {
  padding: 0;
  margin: 0;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-block-size: 100%;
}

html {
  position: relative;
  background-attachment: scroll, fixed;
  background-blend-mode: multiply;
  background-image: radial-gradient(
      51.98% 51.98% at 75.49% 26.72%,
      #330e82 0%,
      #18004a 100%
    ),
    url("../assets/img/grain.png");
  background-size:
    auto,
    22rem 30rem;
}

body {
  display: flex;
  flex-direction: column;
  color: var(--color-foreground);
  font-family:
    "Outfit",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  gap: var(--space);
  margin-inline: auto;
  max-inline-size: 66rem;
  padding-block-start: calc(var(--space) * 2);
  padding-inline: 1rem;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border-width: 0;
  margin: -1px;
  block-size: 1px;
  clip: rect(0, 0, 0, 0);
  inline-size: 1px;
  white-space: nowrap;
}

a {
  display: inline-block;
  border-radius: 0.25rem;
  color: inherit;
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

button {
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

::selection {
  background: hsl(var(--color-orange-hsl) / 0.4);
  color: var(--color-foreground);
}

@media (--reduced-motion) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01s !important;
  }
}
