:root {
  --bg-primary: #ECE1FF;
  --color-primary: #0a0a0a;
  --color-secondary: #612a74;
  --color-tertiary: #776f69;
  --color-white: #f3eee9;
  --font-size: 1.3rem;
  --noto: "Noto Serif", monospace;
  --sans: "Noto Sans", sans-serif;
  --border-radius-1: 0.5rem;
  --border-radius-2: 1rem;
  --border-radius-3: 1.5rem;
  --border-radius-4: 4rem;
  --width: 428px;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  background-color: var(--bg-primary);
  color: var(--color-primary);
  font-size: var(--font-size);
  line-height: 1.6;
  /* Setup the body to min height */
  min-block-size: 100vh; /* fallback nếu không hỗ trợ svh */
  min-block-size: 100svh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/**
         * Set text to automatically wrap when it reaches the end of the line,
         * without orphaned words.
         */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

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

img,
picture {
  max-inline-size: 100%;
  display: block;
  border-radius: var(--border-radius-1);
}

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