@font-face {
  font-family: "Yekan";
  src: url("../font/BMitra.ttf") format("truetype");
        
}
.wrapper{

}
/****footer*/


.footer{
  background-color: #101010;
  min-height: 20rem;
  border-top: 3px solid black;
  display: flex;
  color: white;

}
.footer > div{
  width: 100%;
  direction: rtl;
  padding: 3rem;
}

.footer .tags li{
  display: inline-block;
  margin: .3rem;
  background-color: darkred;

}
.footer .tags li:hover{
   background-color: white;
   color: darkred;
}

/****end footer*/
.xshow{
  display: none;
}
.closemodify{
  margin-top: -6px;
  margin-left: -5px;
}
body{
	margin: 0;
    overflow-x: hidden;
     font-family: 'Yekan';
}
.nav{
	background: black;
	 position: sticky;
	width: 100%;
	padding: .5rem;
	color:white;
      font-family: 'Yekan';
    top: 0;
    z-index: 222;
    display: flex;
    direction: rtl;
}
.nav ul{
  direction: rtl;

}
.nav ul li:hover:after{
   width: 100%;
}
.nav ul li:after{
  content: '';
  display: block;
  width: 0px;
  height: 1px;
  background: red;
  margin: auto;
  transition: width .3s cubic-bezier(.23,1,.32,1);
}
.nav ul li:hover a{
   color: gray;

  
}
.nav ul li a{
  color: #f1f1f1;
  text-decoration: none;

}
.nav ul li{
  padding: .2rem;
  margin-left: 1rem;

}
a:visited{
  color: unset;
}
a:link {
   
    text-decoration: none;
    color: unset;
     
}
.see-more{
  width: 80%;
  padding: 1rem;
  background: #f1ecec;
 
  text-align: center;
  color: gray;
  margin-left: auto;


}

.see-more:hover{
  background-color: black;
  color: white;
}
.nav ul li{
  display: inline-block;
}
.nav a{
   
   
}
.nav .logo{
  width: 4rem;
  margin-right: 1rem;
}
.wrapper{

}
.grid{
	display: flex;
    box-sizing: content-box;
    width: 100%;
    flex-wrap: wrap;
   
  
    justify-content: flex-start;
  justify-content: center;
     
}
.grid .col{
	width: 470px;
min-height: 100vw;
background: white;
margin: .1rem;
    
}
.col > .title{
    position: sticky;
    top:5rem;
        display: inline-block;
    transform: rotate(90deg);
    transform-origin:bottom left;
    font-size: 1.5rem;
 
    
}
.col > .title:before{
    content: '';
    display: inline-block;
    width:10px;
    height: 25px;
    background-color: black;
    margin-right: .5rem;
    margin-left: .1rem;
}
.post img{
    width: 100%;
    height: auto;
   

  

}
.col img{
     filter: grayscale(100%);
     transition: filter .5s linear;
}
.col:hover{
    
}
.col:hover img{
       filter: grayscale(0%);
    
}
.post{
    text-align: right;
    margin-left: 4rem;
}
.post .title{
    font-size: 1.5rem;
       font-weight: bolder;
}
.post .desc{
   opacity: .5;
    padding: 1rem;
    transition: opacity .5s linear;
}
 
.post:hover .desc{ 
opacity: 1;
}
.post .end{
    height: 5px;
    border-bottom: 1px dashed black;
   margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 2rem;
}
.post .date{
  color:darkred;
  font-size: .8rem;
  padding: .5rem;
  opacity: .5;
}
.search-btn{
      position: absolute;
    left: 1rem;
    top: 1.3rem;
    display: none;
    padding: 1rem;
}
.search-btn:hover{
  cursor: pointer;
  color:red;
}
.keys{
  direction: ltr;
}

  .search-menu{
    position: fixed;
    width: 100vw;
    height: 100%;
    background-color: rgba(0,0,0,.9);
    left: 0;
    top: 0;

    z-index: 1;
    text-align: center;
    display: flex;
    justify-content: center;
      flex-flow: column-reverse;
      animation-name: searchfadein;
        animation-duration: .5s;
   
  }
  @keyframes searchfadein{
    from{opacity: 0}
    to{opacity: 1;}
  }
  .xshow{
    display: none !important;
  }
  .textinp{
     background: transparent;
    border: 0;
    border-bottom: 1px solid white;
    color: white;
    outline: none;
    font-family: Yekan;
    font-size: 2rem;
    text-align: right;
  }
  .big-search-btn{
    display: inline-block;
    color: white;
    display: inline-block;
    /* padding: 1rem; */
    color: white;
    /* margin-top: -3rem; */
    position: relative;
    top: .5rem;
    
    cursor: pointer;
        position: relative;
    top: .5rem;
    padding-right: 1rem;
    padding-left: 1rem;
 
    border: 1px solid white;
    margin-right: 1rem;

  }


  .berger-menu:hover{
color:lightgray;
}
.berger-menu{
 
    position: absolute;
    left: 1rem;
    top: 1.5rem;
  
display:none;
padding:1rem;
 

}
.mobile-menu{
    display: none;
}
@media(max-width:700px){
.berger-menu{display:block;}
    .mobile-menu{

          position: fixed;
        bottom: 0;
        top: 0;
         width:100%;
           height:calc(100vh + 3rem);
         z-index: 500;
        overflow: hidden;

     
    }
    .mobile-menu .l{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.8);
        
    }
    
    .mobile-menu .r i{
        right: 1rem;
        position: absolute;
        margin: 1rem;
        transform: scale(var(--ggs,2));
        color: darkred;
        cursor: pointer;
    }
    .mobile-menu .r i:hover{
        color:cadetblue
    }
    .goout{
        animation-name: out !important;
        animation-fill-mode: forwards;
         animation-duration: .5s !important;
    }
    .mobile-menu .r{
              animation-name: example;
  animation-duration: .5s;
           background-color: white;
    width: 80%;
        height: 100%;
        position: absolute;
      
        right: 0;
        box-shadow: 1px 5px 5px black;
    }
}
.show{
    display: block;
}
@media (max-width: 700px){
  .search-btn{
    left: 4rem;
    display: block;
  }

  .textinp{
        width: 70%;
  }

}