@import url(./styles/_reset.css);
@import url(./styles/_fonts.css);
@import url(./styles/_variables.css);
@import url(./styles/_typography.css);
@import url(./styles/_section.css);

@import url(./styles/osmo/_button.css);
@import url(./styles/osmo/_orbit.css);
@import url(./styles/osmo/_stack.css);

@import url(./styles/blocks/_window.css);
@import url(./styles/blocks/_card.css);
@import url(./styles/blocks/_grid.css);
@import url(./styles/blocks/_hero.css);
@import url(./styles/blocks/_icon.css);
@import url(./styles/blocks/_list.css);
@import url(./styles/blocks/_pills.css);
@import url(./styles/blocks/_slider.css);
@import url(./styles/blocks/_backpack.css);
@import url(./styles/blocks/_horizontal.css);
@import url(./styles/blocks/_footer.css);

::selection {
  background-color: var(--accent);
  color: var(--accent-contrast);
}

.container {
  padding-inline: var(--medium);
  padding-block: var(--huge);
  margin-inline: auto;
  max-width: 64rem;

  &.container--overflow {
    overflow: hidden;
  }

  &.container--center {
    display: grid;
    place-items: center;
    text-align: center;
  }

  &.container--left {
    text-align: left;
    margin-right: auto;
    margin-left: 0;
    padding-left: var(--huge);
    max-width: 90vw;
  }
}

.my-huge {
  margin-block: var(--massive);
}

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

body {
  opacity: 0;
  transition: opacity 0.35s ease-in;

  &.loaded {
    opacity: 1;
  }
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}