* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#root,
#__next {
  isolation: isolate;
}

html {
  --page-max-width: 75rem;
  --page-padding-horizontal: 2.25rem;
  --page-padding-vertical: 1.5rem;
  --page-sections-spacing: 4.125rem;

  --font-size-caption: 0.75rem;
  --font-size-body: 0.8125rem;
  --font-size-heading: 1.125rem;
  --font-size-display: 1.875rem;

  --ease-fluid: cubic-bezier(0.36, 0.66, 0.6, 1);
  --ease-sharp: cubic-bezier(0.6, 0.12, 0.34, 0.96);
  --ease-elastic: cubic-bezier(0.42, 0, 0.58, 1.8);
  --ease-impact: cubic-bezier(0.24, 0.9, 0.32, 1.4);

  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overscroll-behavior: contain;
  touch-action: manipulation;

  &[data-theme="light"] {
    color-scheme: light;

    --hue: 48;
    --main-hue: 252;

    --cyan: hsl(198, 96%, 30%);
    --green: hsl(114, 84%, 24%);
    --orange: hsl(24, 78%, 36%);
    --pink: hsl(336, 78%, 36%);
    --purple: hsl(252, 54%, 54%);
    --red: hsl(6, 66%, 48%);
    --yellow: hsl(48, 72%, 24%);

    --code-background: hsl(48, 100%, 98%);
    --code-foreground: hsl(0, 0%, 12%);
    --code-comment: hsl(246, 24%, 48%);

    --color: hsl(var(--main-hue), 54%, 24%);

    --color-caption: hsl(var(--hue), 12%, 30%);
    --color-body: hsl(var(--hue), 12%, 24%);
    --color-heading: hsl(var(--hue), 12%, 18%);
    --color-display: hsl(var(--hue), 12%, 12%);

    --background-color-primary: hsl(var(--hue), 12%, 90%);
    --background-color-secondary: hsl(var(--hue), 12%, 96%);
    --background-color-tertiary: hsl(var(--hue), 12%, 72%);

    --background-color-overlay: hsla(var(--hue), 12%, 6%, 84%);

    --hero-background-color-primary: hsl(var(--main-hue), 24%, 90%);
    --hero-background-color-secondary: hsl(var(--main-hue), 30%, 60%);
  }

  &:not([data-theme="light"]):not([data-theme="dark"]),
  &[data-theme="dark"] {
    color-scheme: dark;

    --hue: 250;
    --main-hue: 250;

    --cyan: hsl(170, 88%, 66%);
    --green: hsl(115, 92%, 66%);
    --orange: hsl(35, 92%, 66%);
    --pink: hsl(330, 92%, 66%);
    --purple: hsl(250, 92%, 66%);
    --red: hsl(10, 92%, 66%);
    --yellow: hsl(60, 92%, 66%);

    --code-background: hsl(245, 14%, 15%);
    --code-foreground: hsl(60, 30%, 96%);
    --code-comment: hsl(249, 25%, 55%);

    --color: hsl(var(--main-hue), 92%, 72%);

    --color-caption: hsl(var(--hue), 12%, 72%);
    --color-body: hsl(var(--hue), 12%, 78%);
    --color-heading: hsl(var(--hue), 12%, 84%);
    --color-display: hsl(var(--hue), 12%, 90%);

    --background-color-primary: hsl(var(--hue), 12%, 6%);
    --background-color-secondary: hsl(var(--hue), 12%, 12%);
    --background-color-tertiary: hsl(var(--hue), 12%, 24%);

    --background-color-overlay: hsla(var(--hue), 12%, 6%, 84%);

    --hero-background-color-primary: hsl(var(--main-hue), 24%, 12%);
    --hero-background-color-secondary: hsl(var(--main-hue), 30%, 42%);
  }

  &::selection {
    background-color: var(--purple);
    color: hsl(var(--hue), 12%, 100%);
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  @media (max-width: 60rem) {
    --page-max-width: 100%;
    --page-padding-horizontal: 1.125rem;
    --page-padding-vertical: 0.75rem;
    --page-sections-spacing: 2.625rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
      interpolate-size: allow-keywords;
    }
  }
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--background-color-primary);
  color: var(--color-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;

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

header,
main,
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

main {
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: var(--page-sections-spacing);
  gap: var(--page-sections-spacing);
}

.container {
  width: 100%;
  max-width: var(--page-max-width);
  padding: var(--page-padding-vertical) var(--page-padding-horizontal);

  @media (max-width: 60rem) {
    max-width: 100%;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-heading);
  font-weight: 600;
  font-size: var(--font-size-heading);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

strong,
b,
em {
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
button,
textarea,
select {
  color: inherit;
  font: inherit;
}

input {
  font-size: 1rem;

  &::placeholder {
    font-size: var(--font-size-body);
  }
}

figure,
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  margin: 0;
}

hr {
  position: relative;
  width: 100%;
  height: 0.0625rem;
  margin: 0 auto;
  border: none;
  background-color: var(--background-color-tertiary);
}

code,
kbd {
  font-family: var(--font-mono);
  font-variant-ligatures: normal;
}

.action {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 2.625rem;
  padding: 0 0.75rem;
  overflow: hidden;
  gap: 0.5em;
  border: none;
  border-radius: 0.375rem;
  outline-color: transparent;
  outline-style: solid;
  outline-width: 0;
  background-color: transparent;
  color: var(--color-body);
  font-weight: 600;
  font-size: inherit;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 240ms var(--ease-elastic),
    outline-color 240ms var(--ease-fluid),
    outline-width 180ms var(--ease-fluid),
    color 240ms var(--ease-fluid);
  user-select: none;

  &.primary,
  &.active {
    background-color: var(--background-color-secondary);
  }

  &:focus:not(.active) {
    color: var(--color-display);
  }

  &:focus-visible,
  &:hover {
    outline-color: var(--background-color-tertiary);
    outline-width: 0.125rem;
  }

  &:active {
    transform: scale(0.98) translateY(0.0625rem);
  }
}

.icon {
  pointer-events: none;
  user-select: none;
}

.sr-only {
  clip: rect(0 0 0 0);
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.prose {
  line-height: 1.8;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 0.5em;
    color: var(--color-display);

    a {
      font-weight: inherit;
    }

    &:not(:first-child) {
      margin-top: 1em;
    }
  }

  a {
    color: var(--color);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--color);
    text-underline-offset: 0.1875rem;
    transition: color 240ms var(--ease-fluid);

    &:focus,
    &:hover {
      color: var(--color-display);
    }
  }

  p,
  ul,
  ol {
    margin: 0 0 1em;
  }

  hr {
    margin: 1em 0;
  }

  blockquote {
    display: flex;
    flex-direction: column;
    margin: 1em 0;
    padding: 1.125rem 1.5rem;
    gap: 1em;
    border: 0.0625rem solid var(--background-color-tertiary);
    border-radius: 0.375rem;

    * {
      margin: 0;
    }
  }

  .table-wrapper {
    width: 100%;
    margin: 2em 0;
    overflow: auto hidden;
    border: 0.0625rem solid var(--background-color-tertiary);
    border-radius: 0.375rem;

    table {
      width: max-content;
      min-width: 100%;
      border: none;
      border-radius: 0.375rem;
      border-spacing: 0;
      font-size: var(--font-size-caption);
      text-align: left;

      thead {
        color: var(--color-display);
      }

      th,
      td {
        padding: 0.375rem 0.75rem;
        border-right: 0.0625rem solid var(--background-color-tertiary);
        border-bottom: 0.0625rem solid var(--background-color-tertiary);

        &:last-child {
          border-right: none;
        }
      }

      tr {
        &:last-child {
          td {
            border-bottom: none;
          }
        }
      }
    }
  }

  figure {
    position: relative;
    width: 100%;
    margin: 2em 0;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      object-fit: contain;
      border-radius: 0.1875rem;
    }

    figcaption {
      width: 100%;
      margin-top: 0.5rem;
      color: var(--color-caption);
      font-weight: 500;
      font-size: var(--font-size-caption);
      text-align: center;
    }
  }

  &:not(pre) {
    code,
    kbd {
      display: inline-block;
      word-break: break-all;
    }
  }
}

.hide,
.hide-on-desktop {
  display: none;
  visibility: hidden;
}

@media (max-width: 60rem) {
  .hide-on-desktop {
    display: block;
    visibility: visible;
  }

  .hide-on-mb {
    display: none;
    visibility: hidden;
  }
}
