@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&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 {
  /* --- General Colors --- */
  --white: 255, 255, 255; /* #fff */
  --off-white: 249, 249, 249; /* #f9f9f9 */
  /* --white: 244, 245, 244; /* #f4f5f4 */
  /* --black: 31, 43, 55; /* #1f2b37 */
  --black: 0 0 0; /* #000 */
  --grey: 36, 36, 36; /* #242424 */
  --blue: 80, 118, 246; /* #5076f6 */
  --green: 119, 241, 161; /* #77f1a1 */
  --red: 237, 43, 42; /* #ED2B2A */

  /* --- Color Scheme based on usage type --- */
  --lowlight-text: var(--grey);
  --lowlight-bg: var(--off-white);
  --text: var(--black);
  --bg: var(--white);
  --highlight-text: var(--off-white);
  --highlight-bg: var(--grey);

  /* --- Default Colors of Document --- */
  background-color: rgb(var(--bg));
  color: rgb(var(--text));

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

::-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);
}  



.material-symbols-rounded.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  cursor: pointer;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
  gap: calc(0.5rem * 1);
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  font-family: 'Jameel Noori Nastaleeq', serif;
}

nav {
  position: fixed;
  top: 7px;
  font-size: 1.5rem;
  display: flex;
  flex-direction: row;
  width: 90%;
  justify-content: space-between;
  align-items: center;
}

#logo {
  display: flex;
  background: rgb(var(--bg));
  border-radius: 5px;
}

#logo img {
  width: 7rem;
}

.btn {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background-color: rgb(var(--highlight-bg));
  color: rgb(var(--highlight-text));
  padding: 5px 11px;
  border-radius: 10px;
  cursor: pointer;
}

#landing {
  width: 90%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body:has(article) #landing {
  display: none;
}

#preview {
  width: 80%;
  text-align: center;
}

#tools {
  position: fixed;
  bottom: 10px;
  width: 90%;
  display: none;
  align-items: center;
  justify-content: space-evenly;
}

body:has(article) #tools {
  display: flex;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.5rem * 1);
}

#state {
  display: none;
  position: absolute;
  z-index: 900;
  left: 50vw;
  transform: translateX(-50%);
}

#state[data-loading='true'] {
  animation: rotate 800ms linear infinite;
  display: block;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media print {
  body {
    display: none;
  }
}