:root {
  --measure: 60ch;
  --container-width: 36rem;
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-height: calc(var(--window-inner-height) - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 1px);
  --stack-margin: var(--space-m-l);
  --border-thin: 1px;
  --border-medium: 2px;
  --border-radius-s: 4px;
  --color-vowls: #047a9a;
  --color-vowls-inactive: #047a9a4d;
  --color-hint: #4da167;
  --color-locked: #9e2b25;
  --color-white: #fff;
  --color-light: #f0f0f0;
  --color-grey: #dfdfdf;
  --color-dark-grey: #bfbfbf;
  --color-dark: #232323;
  --color-inactive: #7a7a7a;
  --font-size-s: var(--step--1);
  --font-size-m-sm: var(--step-0);
  --font-size-m: var(--step-1);
  --font-size-l-m: var(--step-2);
  --font-size-l: var(--step-3);
  --font-size-xl: var(--step-4);
  --font-size-xxl: var(--step-5);
  --font-family: 'Georgia, "Times New Roman", Times, serif';
  --font-weight-bold: 700;
}

* {
  max-inline-size: var(--measure);
}

html,
body,
div,
header,
nav,
main,
section,
footer {
  max-inline-size: none;
  font-family: sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

*,
*::before,
*::after {
  border-style: solid;
  /* ↓ 0 by default */
  border-width: 0;
}

/* Locks viewport to height to prevent Safari from revealing
   browser chrome during user gestures */
html.is-locked,
html.is-locked body {
  height: var(--safe-height);
  overflow: hidden;
}

nav {
  z-index: 200;
}

button {
  background-color: var(--color-white);
}