@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem; /*56px*/

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #6e57e0;
  --first-color-alt: #5a43cb;
  /* --first-color-light: hsl(var(--hue), 24%, 66%);
  --first-color-lighten: hsl(var(--hue), 24%, 92%); */
  --title-color: #242329;
  /* --text-color: hsl(var(--hue), 4%, 35%); */
  /* --text-color-light: hsl(var(--hue), 4%, 55%); */
  --body-color: #fbfbfe;
  /* --container-color: #fff; */
  --scroll-bar-color: hsl(var(--hue), 4%, 85%);
  --scroll-thumb-color: hsl(var(--hue), 4%, 75%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Vazirmatn", sans-serif;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  height: 100vh;
  background-color: #15202b;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.sleep {
  font-size: 64px;
  color: #fff;
  opacity: 0.87;
}

footer {
  position: fixed;
  bottom: 18px;
  cursor: default;
  direction: rtl;
  width: 100%;
  z-index: 100;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: 0 1rem;
}

footer p {
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  opacity: 0.6;
}

#donate {
  display: none;
}

/* For medium devices */
@media screen and (max-width: 576px) {
  .sleep {
    overflow: scroll;
  }
}