*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

@font-face {
font-family: iransans;
font-style: normal;
font-weight: normal;
src: url("../fonts/IRANSansWeb_Medium.eot");
src: url("../fonts/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/IRANSansWeb_Medium.woff2") format("woff2"), url("../fonts/IRANSansWeb_Medium.woff") format("woff"), url("../fonts/IRANSansWeb_Medium.ttf") format("truetype");
}

@font-face {
font-family: Parastoo;
font-style: normal;
font-weight: normal;
src: url("../fonts/Parastoo.eot");
src: url("../fonts/Parastoo.eot?#iefix") format("embedded-opentype"), url("../fonts/Parastoo.woff2") format("woff2"), url("../fonts/Parastoo.woff") format("woff"), url("../fonts/Parastoo.ttf") format("truetype");
}

@font-face {
font-family: Parastoo-Bold;
font-style: normal;
font-weight: normal;
src: url("../fonts/Parastoo-Bold.eot");
src: url("../fonts/Parastoo-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Parastoo-Bold.woff2") format("woff2"), url("../fonts/Parastoo-Bold.woff") format("woff"), url("../fonts/Parastoo-Bold.ttf") format("truetype");
}


@font-face {
font-family: Samim-FD;
font-style: normal;
font-weight: normal;
src: url("../fonts/Samim-FD.eot");
src: url("../fonts/Samim-FD.eot?#iefix") format("embedded-opentype"), url("../fonts/Samim-FD.woff2") format("woff2"), url("../fonts/Samim-FD.woff") format("woff"), url("../fonts/Samim-FD.ttf") format("truetype");
}

@font-face {
font-family: Samim-Bold-FD;
font-style: normal;
font-weight: normal;
src: url("../fonts/Samim-Bold-FD.eot");
src: url("../fonts/Samim-Bold-FD.eot?#iefix") format("embedded-opentype"), url("../fonts/Samim-Bold-FD.woff2") format("woff2"), url("../fonts/Samim-Bold-FD.woff") format("woff"), url("../fonts/Samim-Bold-FD.ttf") format("truetype");
}



@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap");
:root {
--FontFamily: iransans;
--FontFamily1: Parastoo;
--FontFamily2: Parastoo-Bold;
--FontFamily3:Samim-FD;
--FontFamily4:Samim-Bold-FD;
--DarkMode: #0e1728;
--BlueColor:#1fade1;
--LightMode: #F5F5F0;
--YellowColor:#ff9f2d;
--FontSize: 1rem;
--Transition: all 0.6s ease-in-out ;
}

body {
padding: 0;
margin: 0;
direction: rtl;
text-align: right;
font-size: 0.95rem;
font-family: var(--FontFamily);
background-color: var(--DarkMode);
min-height:100vh;
display:-ms-flexbox;
display:-webkit-box;
display:flex;
flex-direction: column;
height: 100%;
padding-top: 70px;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--FontFamily);
font-weight: 700;
}

a {
-webkit-transition: var(--Transition);
transition: var(--transition);
text-decoration: none;
outline: 0 !important;
}

p{
font-family: var(--FontFamily);
font-size: 1rem;
}

a:hover {
text-decoration: none;
}

li {
list-style-type: none !important;
list-style: none !important;
}

:focus {
outline: 0 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

/******* dark&light mode ********/

/* حالت لایت */
body.light-theme {
  background-color: var(--LightMode);
  color: var(--DarkMode);
}

body.light-theme .SiteName span{
  color: var(--LightMode);
}

/* رنگ آیکون در حالت لایت */
body.light-theme #themeToggle i {
  color: var(--YellowColor);   /* تیره روی بک‌گراند روشن */
}

body.light-theme .content_template span{
    color: var(--DarkMode);   
}

body.light-theme footer .mb-0{
color: var(--LightMode);
}

/******* dark&light mode ********/

/******* header ********/

.navbar{
border-bottom: 1px solid var(--BlueColor);
background-color: var(--DarkMode);
}

.SiteName{
  display: flex;  
}

.SiteName span{
  color: var(--LightMode);  
}

#themeToggle i {
  color: var(--BlueColor);   /* روشن روی بک‌گراند تاریک */
  transition: var(--Transition);
}

/******* header ********/


/*********** index page *********/

.content_template{
 display: flex;
 justify-content: center; 
 flex-direction: column;  
 align-items: center;
}

.content_template span{
color: var(--LightMode);   
line-height: 2;
}

.btn_template{
 display: flex;
 justify-content: center; 
 flex-direction: column;  
 align-items: center;    
 padding: 10px;
}

.btn_template a{
background-color: var(--BlueColor); 
padding: 12px;   
margin: 10px;
border-radius: 1rem;
color: var(--LightMode);
}

.formula-link,
.sub-formula {
  background-color: var(--BlueColor);
  transition: var(--Transition);
  color: var(--DarkMode);
  border-radius: 1rem;
}

.formula-link i,
.sub-formula i {
  color: var(--DarkMode);
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}

.formula-link:hover,
.sub-formula:hover {
  background: var(--YellowColor);
  transform: translateY(-3px);
}


/************** footter ***************/

footer {
margin-top: auto;
border-top: 1px solid var(--BlueColor);
background-color: var(--DarkMode);
}

footer .mb-0{
color: var(--LightMode);
font-size: 0.8rem;
}