@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazirmatn-RD[wght].woff2') format('woff2 supports variations'),
         url('../fonts/Vazirmatn-RD[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mikhak';
  src: url('../fonts/Mikhak[DSTY,KSHD,wght].woff2') format('woff2 supports variations'),
         url('../fonts/Mikhak[DSTY,KSHD,wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lalezar';
  src: url('../fonts/Lalezar-Regular.woff2') format('woff2 supports variations'), 
         url('../fonts/Lalezar-Regular.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;}
:root {
/*https://coolors.co/palette/606c38-283618-fefae0-dda15e-bc6c25*/
--brand-color:              #bc6c25;
--background-color:   #fefae0;
--footer-color:             #dda15e;
--text-color:                 #283618;
--title-color:                 #606c38;

/*https://coolors.co/palette/22223b-4a4e69-9a8c98-c9ada7-f2e9e4*/
--brand-color:              #4a4e69;
--background-color:   #f2e9e4;
--footer-color:             #9a8c98;
--text-color:                 #22223b;
--title-color:                 #c9ada7;
}
*{margin:0;padding:0}
.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}

body {
  background: var(--background-color);
  font-family: "Vazir";
  font-size: 17px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--text-color); }

.base{
  background: var(--background-color);
  padding:0px 30px;
  max-width:568px;
  margin-left:auto;
  margin-right:auto;}

.nav{
  background: var(--brand-color);
  padding:10px 30px; 
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:30px;
  font-family: "Mikhak";
  font-weight: 400;
  font-size: 38px;
line-height:0;
  color: var(--background-color);}

.content{
  padding: 10px 30px;
  background: white;
  text-align: justify;
  text-justify: inter-word;
  margin-top:30px;
  margin-bottom:30px}

.footer{
  background: var(--footer-color);
  border-radius:20px;
  margin-bottom:30px;
  padding: 30px}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lalezar";
  font-weight: 500;
  color: var(--text-color);
  margin: 0 0 10px;
  text-align: center;}

.h1,h1{font-size:1.2em;line-height:38px}
.h2,h2{font-size:1.1em;line-height:30px}
.h3,h3{font-size:1em;line-height:22px}
.h4,h4{font-size:0.95em;line-height:18px}
.h5,h5{font-size:0.9em;line-height:14px}
.h6,h6{font-size:0.85em;line-height:10px}
 
 navv{
   font-family: "Mikhak";
  font-weight: 400;
  font-size: 25px;
  color: var(--background-color);}

 button{
  font-family: "Vazir";
   font-size: 18px;
  line-height: 1.6;
  font-weight: 500;} 

.button-brand{background-color:var(--brand-color);color:#fff;border-color:var(--brand-color);}
.button-brand-outlined{background-color:#fff;color:var(--brand-color);border-color:var(--brand-color);}
.button-brand-text{color:var(--brand-color);border-color:transparent}


.button-background{background-color:var(--background-color);color:#000;border-color:var(--background-color);}
.button-background-outlined{background-color:#000;color:var(--background-color);border-color:var(--background-color);}
.button-background-text{color:var(--background-color);border-color:transparent}

.button-footer{background-color:var(--footer-color);color:#000;border-color:var(--footer-color);}
.button-footer-outlined{background-color:#000;color:var(--footer-color);border-color:var(--footer-color);}
.button-footer-text{color:var(--footer-color);border-color:transparent}

.button-title{background-color:var(--title-color);color:#000;border-color:var(--footer-color);}
.button-title-outlined{background-color:#000;color:var(--footer-color);border-color:var(--footer-color);}
.button-title-text{color:var(--title-color);border-color:transparent}

  p {
  text-indent: 0px;
  margin-top: 15px;
  margin-bottom: 5px; }

p.magnify {
  font-size: 17.6px;
  line-height: 1.8; }

strong, b {
  font-weight: 600; }

.footer-text {
  color: #000000;
  font-size:18px;
  direction:ltr; }

footer .copyright {
  color: #000000; }

blockquote {
  display: block;
  margin: 0px 35px 20px 0px;
  padding: 0px;
  font-family: "Vazir";
  font-size: 16px;
  font-weight: 600;
  border-right: 0px solid var(--brand-color);
  border-left: 0px solid var(--brand-color);
  background: #ffffff; }

blockquote :last-child {
  margin-bottom: 0; }
 

pre{
  display:block;
  margin:15px 0;
  padding:10px 15px;
  border-left:4px solid #4caf50;
  background:#f5f5f5;
  font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size:15px;
  color:#212121;
  white-space:normal;
  overflow-x:auto;
  direction:ltr;}

code{
  background:#f5f5f5;
  color:#212121;
  font-family:Monaco, 'Courier New', Courier, monospace;
  white-space:pre;}

a {
  text-decoration: none;
  color: #1B8957;
  color: var(--brand-color);
  font-weight: 500;
  transition: opacity .1s ease-out;}

a:focus, a:hover {
  opacity: 0.75; }

a:active {
  opacity: 1; }

hr.mima {
  border-style: none; }

hr.mima:after {
  content: "&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863\f863";
  width: 100%;
  overflow: hidden;
  display: block;
  font-size: 20px;
  white-space: nowrap; }

.breadcrumbs-alt li {
  padding: 10px 15px;
  background: #eeeeee;}

.breadcrumbs-alt li::after {
  padding-right: 30px;
  content: '>>';}

.alert{margin:15px 0; padding:5px 15px; border-radius:5px;}
.alert-title {background: var(--title-color);color:black}
.alert-background {background: var(--background-color);color:black}
.alert-brand {background: var(--brand-color);color:white}
.alert-footer {background: var(--footer-color);color:black}

img {
  display: block;
  margin: 20px auto 20px auto;
  max-width: 100%;
  height: auto;
  border-radius:30px;}

.img-nav{
  margin: 0;}

.blog-list{
  font-size:95%;}

ul {
  list-style-position: inside;}

ol {
  list-style-position: inside;
  list-style-type: upper-roman;}

/* Progress bar */
#progress-bar {
  --scrollAmount: 0%;
/*  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); */
  width: var(--scrollAmount);
    background:var(--brand-color);
  /*  background: linear-gradient(to right, #F24E1E var(--scrollAmount), transparent 0);
  width: 100%; */
  height: 5px;
  position: fixed;
  top: 0;
}

.form-control{position:relative;margin-bottom:10px}.form-control-group{display:flex;justify-content:flex-start}.form-control-group .form-control{flex:1;padding-right:15px}.form-control-group .form-control:last-of-type{padding-right:0}.form-control-group .form-control.grow-1x{flex-grow:1}.form-control-group .form-control.grow-2x{flex-grow:2}.form-control-group .form-control.grow-3x{flex-grow:3}.validation-error{margin-top:2px;font-size:12px;color:#f44336}label{font-size:14px;font-weight:400}input[type="color"],input[type="date"],input[type="datetime-local"],input[type="email"],input[type="month"],input[type="number"],input[type="range"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],input[type="week"],input[type="text"],input[type="password"],select{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;padding:10px;line-height:20px;font-size:16px;font-weight:inherit;background:#fff;border-radius:5px;border:1px solid #bdbdbd}input::-webkit-input-placeholder,select::-webkit-input-placeholder,fieldset::-webkit-input-placeholder{color:#9e9e9e}input:-ms-input-placeholder,select:-ms-input-placeholder,fieldset:-ms-input-placeholder{color:#9e9e9e}input::-ms-input-placeholder,select::-ms-input-placeholder,fieldset::-ms-input-placeholder{color:#9e9e9e}input::placeholder,select::placeholder,fieldset::placeholder{color:#9e9e9e}input:focus,select:focus,fieldset:focus{outline:none;border-color:#4caf50}input.invalid,input:invalid,select.invalid,select:invalid,fieldset.invalid,fieldset:invalid{border-color:#f44336}fieldset{margin:15px 0;padding:15px;font-size:14px;border:1px solid #bdbdbd;border-radius:5px}fieldset legend{padding:0 5px}input[type="checkbox"],input[type="radio"]{margin-right:10px}input[type="range"]{-webkit-appearance:range;-moz-appearance:range;appearance:range}input[type="color"]{display:initial;padding:0 !important;height:42px}