@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
    font-family: "Montserrat", sans-serif;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }

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

@layer base {
  :root {
    --clr-burgundy-500: hsl(338, 74%, 26%);
    --clr-burgundy-600: hsl(337, 63%, 17%);
    --clr-burgundy-disabled: hsl(334, 3%, 46%);
    --clr-champagne-500: hsl(39, 30%, 82%);
    --clr-gray-900: hsl(0, 0%, 16%);
    --clr-milky-way-100: hsl(36, 100%, 97%);

    --clr-action-primary: var(--clr-burgundy-500);

    --clr-surface-primary: var(--clr-milky-way-100);
    --clr-surface-inverse: var(--clr-burgundy-500);
    --clr-surface-inverse-strong: var(--clr-burgundy-600);
    --clr-surface-bubble: var(--clr-champagne-500);
    --clr-surface-disabled: var(--clr-burgundy-disabled);
    --clr-text-primary: var(--clr-burgundy-500);
    --clr-text-inverse: var(--clr-milky-way-100);
    --clr-text-normal: var(--clr-gray-900);
  }
}

main .actions {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

/* Medium screens */
@media screen and (width >=620px) {
}

/* Large screens */
@media screen and (width >=960px) {
  .navbar-horizontal {
    display: block;
  }

  .navbar-vertical {
    display: none;
  }
}

/* Extra large screen */
@media screen and (width >=1200px) {
}