/* خدا، به نامش */
:root {
    --پوست: #000;
    --مو: #555;
    --سفید: #ffffffff;
    --سیاه: #4d4d4dff;
    --کمسفید: #ccccccff;
    --کمسیا: #808080ff;}
    ::selection {
      color: var(--پوست);
      background: var(--سفید);
    }
/* hi lit */
html {
    scroll-behavior: smooth;
      color: var(--سفید);
    background-image: ;
    background-color: var(--پوست);
    background-repeat: repeat;
    background-size: 7vh;
    background-attachment: fixed;
}
body, html {
                overflow-x: hidden;
                overflow-y: visible;
                scrollbar-color: var(--سیاه) var(--سفید) ;
                scrollbar-width: thin;
                }
*{margin:0;}
* {
  box-sizing: border-box;
}
hr.khat {
  border: solid 0.01vh var(--سیاه);
  width: 100%;
  scale: 1 0.5;
  margin: 2vh auto;
  
  }
.matnklid {
  font-family: "Sahel";
  transition: 0.2s;
  text-decoration: none; 
  color: white;
}
.matnklid:hover {
padding: 1vh;
border-radius: 2vh;
  background: var(--سفید);
  cursor: pointer;
  color: #000;
}
.qaabax {
display: inline-block;
width: 100%;
padding: 0 3vh;
transition: 0.2s;
border-radius: 1vh;
}
.ax {
display: inline-block;
width: 100%;
transition: 0.2s;
border-radius: 1vh;
  border: 0.01vh solid var(--سیاه);
              box-shadow: 
              1vh 1vh 2vh #111, 
              -1vh -1vh 2vh #222;
filter: grayscale(100%);
}
.ax:hover {
transition: 0.5s;
z-index: 2;
transform: scale(1.05);
              box-shadow: 
              1vh 1vh 2vh #111, 
              -1vh -1vh 2vh #222;
filter: grayscale(0%);
cursor: pointer;
}
.ax:focus {
transition: 0.5s;
z-index: 2;
transform: scale(1.1);
border-radius: 1vh;
              box-shadow: 
              1vh 1vh 2vh #111, 
              -1vh -1vh 2vh #222;
filter: grayscale(0%);
}
.ax:active {
transition: 0.5s;
z-index: 2;
transform: scale(1.1);
border-radius: 1vh;
              box-shadow: 
              1vh 1vh 2vh #111, 
              -1vh -1vh 2vh #222;
filter: grayscale(0%);
}
.vasati {
margin: 0 auto;
display: block;
}
.vasat {
display: inline-grid;
width: 100%;
grid-template-columns: 33.33% 33.33% 33.33%;
}
/*ممنون از آقا اشکان لائی بابت پیشنهاد این قسمت و بهینه سازی شبکه بندی برای نمایشگر های مختلف گوشی و...*/
@media (max-width: 110vh) {
.vasat {
display: inline-grid;
width: 100%;
grid-template-columns: 50%  50%;
}}
@media (max-width: 70vh) {
.vasat {
display: inline-grid;
width: 100%;
grid-template-columns: 100%;
}}
.vasatchin {
vertical-align: middle;
text-align: center;
font-size: 3vh;
  margin: 5vh 0;
}
.shenavar-raast {
float: right;
}
.zirqaab {
  width: 80vw;
  max-width: 100vh;
}
.qaabax-bozorg {
vertical-align:middle; 
width: 50vh; 
max-width: 100%; 
border-radius: 5vh;
}
#ax { 
display: block;
  overflow: hidden;
  transition: 1s;
  top: 0;
vertical-align:middle; 
width: 25vh; 
margin: 40vh auto; 
border-radius: 5vh;
  }
  
.chasbak {
  position: sticky;
  top: 0;
  overflow: hidden;
}
.qaabax-riz {
vertical-align:middle; 
width: 20vh; 
margin: 40vh auto; 
border-radius: 5vh;
}
.qaab {
display: ;
  font-family: "samim" !important;
  font-size: 2.5vh;
  color: var(--سفید);
  border: solid 0.01vh var(--سیاه);
  border-radius: 3vh;
  background: var(--پوست);
  text-align: right;
  width: 90vh;
  max-width: 80vw;
  padding: 3vh;
  margin-top: 3vh;
  margin-bottom: 3vh;
              box-shadow: 
              1vh 1vh 2vh #111, 
              -1vh -1vh 2vh #222;
width: 100%;
max-width: 150vh;
    }
.tooqaab {
  font-family: "samim" !important;
  font-size: 2.5vh;
  color: var(--کمسیا);
  border: solid 0.1vh var(--پوست);
  border-radius: ;
  background: var(--سفید);
  text-align: center;
  padding: 3vh;
  margin-top: 3vh;
  width: 100%;
}
p {
    font-family: "samim" !important; 
    } 
.tozi{
  color: var(--سفید);
  font-size: 2.5vh;
  margin: 3vh 0 0 0;
    
} 
.matn{
  color: var(--سفید);
  font-size: 3vh;
  margin: 3vh 0 0 0;
} 
.zirnevis{
  color: var(--سفید);
  font-size: 2vh;
  margin: 2vh auto;
  text-align: center;
  display: block;
}
.matn-porang {
display: inline;
    background: var(--پوست); 
    padding: 0.5vh;
    margin: 1vh;
    }   
/* width */
::-webkit-scrollbar {
  width: 1px;  
}
/* width */
::-webkit-scrollbar:hover {
  width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #e1c10a80; 
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #e1c10a80; 
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #e1c10a80; 
}
.pizhklid {
    display: block;
border-radius: 100%;
  transition: 0.2s;
width: 5vh;
    margin: 0 auto;
}
.pizhklid:hover {
background: var(--سفید);
cursor: pointer;
}
.klid {
background: var(--سفید);
color: var(--کمسیا);
transition: 0.3s;
padding: 1vh 4vh;
border-radius: 2vh;
font-size: 3vh;
}
.klid:hover {
background: var(--پوست);
color: var(--سفید);
cursor: pointer;
}
.klid2 {
background: var(--سفید);
color: var(--کمسیا);
transition: 0.3s;
padding: 1vh 4vh;
border-radius: 2vh;
font-size: 3vh;
  margin: 0.5vh 0.25vh;
  display: inline-block;
}
.klid2:hover {
background: var(--پوست);
color: var(--سفید);
cursor: pointer;
}
a:link {
  text-decoration: none;
}
/* visited link */
a:visited {
}
/* mouse over link */
a:hover {
}
/* selected link */
a:active {
}