:root {
  --inline-space: 1ch;
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
}

html,
body {
  font-family: system-ui;
  line-height: 1.4;
  font-size: 1em;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header"
    "main"
}

button {
  touch-action: manipulation;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
}

.containers {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;

  @media (min-width: 150ch) {
    max-width: 1024px;
  }

  @media (min-width: 70ch) {
    max-width: 768px;
  }
}

.aspect-square	{ aspect-ratio: 1 / 1; }


.textarea-md { font-size: 1em; }

/* Prevent background to scroll when dialog is open */
:root:has( 
    :is(
        dialog[open]
      )
  ) {
  scrollbar-gutter: auto;
  overflow: hidden;
}