/* minimum.css */

@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: "Jameel Noori Nastaleeq";
    src: url(https://cdn.jsdelivr.net/npm/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2) format('woff2'),
        url(https://unpkg.com/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2) format('woff2');
}


:root {
  /* --- Parametric sizing --- */
  --size: 0.8; /* default: 0.8 */
}

::selection {
  color: rgb(var(--highlight-text));
  background-color: rgb(var(--highlight-bg));
}

::-webkit-scrollbar {
  width: calc(0.5rem * var(--size));
  height: calc(0.5rem * var(--size));
}
::-webkit-scrollbar-track {
  border-radius: calc(0.625rem * var(--size));
  background: rgba(var(--highlight-text), 0.7);
}
::-webkit-scrollbar-thumb {
  border-radius: calc(0.625rem * var(--size));
  background: rgba(var(--highlight-bg), 0.45);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--highlight-bg), 0.85);
}

article {
  display: flex;
  flex-direction: column;
  align-self: center;
  font-family: 'Jameel Noori Nastaleeq', serif;
  max-width: calc(680px * var(--size));
  color: rgb(var(--text));
  background-color: rgb(var(--bg));
  direction: rtl;
}

article img {
  width: 100%;
  border-radius: 4px;
  min-height: 100px;
}

article h1 {
  font-size: calc(3.25rem * var(--size));
  font-weight: 700;
  margin-top: calc(0.75rem * var(--size));
  margin-bottom: calc(0.5rem * var(--size));
  font-family: 'Jameel Noori Nastaleeq', serif;
  letter-spacing: normal;
  text-align: center;
}

article h2 {
  font-size: calc(2.5rem * var(--size));
  font-weight: 700;
  margin-top: calc(0.5rem * var(--size));
  margin-bottom: calc(0.5rem * var(--size));
}

article h3,
article h4,
article h5,
article h6 {
  font-size: calc(2rem * var(--size));
  font-weight: 700;
  margin-top: calc(0.5rem * var(--size));
  margin-bottom: calc(0.5rem * var(--size));
}

article p,
article li,
article a,
article strong,
article em {
  font-size: calc(1.5rem * var(--size));
  margin-top: calc(0.5rem * var(--size));
  margin-bottom: calc(0.5rem * var(--size));
}

article a {
  color: inherit;
  font-weight: inherit;
}

article blockquote {
  font-size: calc(2.875rem * var(--size));
  font-weight: 500;
  border-left: calc(0.25rem * var(--size)) solid rgb(var(--text));
  padding: calc(0.15rem * var(--size)) calc(1.5rem * var(--size));
  font-family: 'Noto Serif', serif;
  font-style: italic;
}

article blockquote p {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

article pre {
  font-weight: 400;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: inherit;
  margin-top: calc(0.25rem * var(--size));
  margin-bottom: calc(0.25rem * var(--size));
  background: rgb(var(--lowlight-bg));
  color: rgb(var(--lowlight-text));
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'IBM Plex Mono', monospace;
  padding: calc(1.95rem * var(--size));
}

article pre code {
  background-color: inherit;
}

article code {
  color: rgb(var(--lowlight-text));
  display: inline-block;
  font-size: calc(1.25rem * var(--size));
  font-family: 'IBM Plex Mono', monospace;
  background-color: rgb(var(--lowlight-text));
  padding: calc(0.25rem * var(--size)) calc(0.3rem * var(--size));
  border-radius: calc(0.25rem * 1);
}

article table {
  border-collapse: collapse;
}

article thead tr th:first-child {
  border-top-left-radius: calc(0.75rem * var(--size));
}

article thead tr th:last-child {
  border-top-right-radius: calc(0.75rem * var(--size));
}

article td {
  font-size: calc(1.5rem * var(--size));
  font-weight: 400;
  border-bottom: 1px solid rgb(var(--text));
  padding: calc(0.75rem * var(--size));
}

article th {
  font-size: calc(1.5rem * var(--size));
  font-weight: 600;
  border-bottom: 1px solid rgb(var(--text));
  padding: calc(0.75rem * var(--size));
  text-align: center;
}

@media all and (max-width: 280px) {
  :root {
    --size: 0.3;
  }
}

@media all and (min-width: 280px) {
  :root {
    --size: 0.45;
  }
}

@media all and (min-width: 330px) {
  body {
    align-items: center;
  }
}

@media all and (min-width: 360px) {
  :root {
    --size: 0.5;
  }

  body {
    align-items: center;
  }
}

@media all and (min-width: 580px) {
  :root {
    --size: 0.7;
  }

  body {
    align-items: center;
  }
}

@media all and (min-width: 720px) {
  :root {
    --size: 1;
  }

  body {
    align-items: center;
  }
}