:root {
  --alpha-more: 0.8;
  --alpha-less: 0.12;

  --basis: 0.4rem;
  --basis_x0_2: calc(0.2 * var(--basis));
  --basis_x0_5: calc(0.5 * var(--basis));
  --basis_x2: calc(2 * var(--basis));
  --basis_x4: calc(4 * var(--basis));
  --basis_x8: calc(8 * var(--basis));
  --basis_x16: calc(16 * var(--basis));
  --basis_x32: calc(32 * var(--basis));
  --basis_x64: calc(64 * var(--basis));

  --font-add: 1rem;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', 'Noto Kufi Arabic', 'Geeza Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  /*
    Ubuntu = Volt (It includes latin and arabic characters.)

    Noto Kufi Arabic = A Noto font from Google (maybe it's installed)
    Geeza Pro = macOS Arabic Default

    -apple-system, BlinkMacSystemFont = macOS Default
    Helvetica Neue = Old macOS Default
    Segoe UI = Windows Default
    Roboto = Android Default
    Fira Sans = Firefox OS Default
    Oxygen, Cantarell, Droid Sans = Linux

    sans-serif = Fallback
  */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[lang="ar"] { /* for arabic */
  letter-spacing: 0 !important;
}

body {
	padding: 32px;

  --body-font-size: calc(var(--font-add) + var(--basis));
  --body2-font-size: calc(var(--font-add) + var(--basis_x0_5));
  font-size: var(--body-font-size);
}

code, h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu Mono', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

h1 {
  font-size: calc(var(--font-add) + var(--basis_x4));
  line-height: 0.9;
  /* margin: 0 0 var(--basis) 0; */
  margin: 0 0 var(--basis_x4) 0;
  text-decoration: inherit;
}

h2 {
  font-size: calc(var(--font-add) + var(--basis_x2));
  margin: var(--basis_x8) 0 var(--basis) 0;
  text-decoration: inherit;
}

h3 {
  font-size: calc(var(--font-add) + var(--basis));
  margin: var(--basis_x4) 0 var(--basis) 0;
  text-decoration: inherit;
}

p {
  /* width: calc(var(--basis_x16) + var(--basis_x8)); */
  max-width: 100%;
  margin: var(--basis) 0;
  text-decoration: inherit;
}

ul {
  margin-block-start: var(--basis_x4);
  max-width: calc(100% - var(--basis_x4));
}

li {
	margin-bottom: var(--basis);
}

hr {
  border: none;
	background: black;
  height: var(--basis_x0_2);
  margin: var(--basis_x4) 0;
}