@font-face {
    font-family: nazanin;
    src: url(../font/Far_Nazanin.ttf) format('truetype') , url(../font/Far_Nazanin.woff) format('woff');
}

@font-face {
    font-family: vazir;
    src: url(../font/11zon_Vazir.ttf) format('truetype') , url(../font/Vazir.woff) format('woff');
}

@keyframes myanimation {

    from{
        transform: translate(-180px);
        text-shadow: 1px 1px 5px red;

    }
    to{
        transform: translate(180px);
        text-shadow: 1px 1px 5px black;

    }
    
}
body {
    margin: 0;
    padding: 0;
    color: black;
    background-color: #e0e5ec;
}

.title{
    animation-name: myanimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction:alternate ;
    width: 30%;
    margin: 3vh auto;
    text-align: center;
    
    border-radius: 20px;

}
.title h1{
    padding: 2vh;
}

.detaile {
    width:100%;
    margin: 8vh 0;
    text-align: center;
    

}

.Box {
    width: 50%;
    margin: 7vh auto;
    text-align: center;
    box-shadow: 10px  10px 20px #a3b1c6 , -10px  -10px 20px #ffffff;
    padding: 5vh 0;
    border-radius: 20px;
    background-color: #e0e5ec;

}

.Box ul li {
    list-style: none;
    margin: 5vh auto;
    width: 50%;
    box-shadow: 10px  10px 20px #a3b1c6 , -10px  -10px 20px #ffffff;
    transition: all 600ms;
    background-color: #e0e5ec;
    border-radius: 20px;
    


}
.Box ul li a{
    display: block;
    text-decoration: none;
    color: black;
    width: 100%;
    padding: 3vh 0;
    font-weight: bold;
    font-family: nazanin;
}

.Box ul li:hover{
    
    transform: scale(1.2);
    box-shadow: 10px  10px 20px #a3b1c6 , -10px  -10px 20px #ffffff   ;
    

}



@media screen and (min-width:10px) and (max-width:800px) {
    @keyframes myanimation {

        from{
            transform: translate(0px);
            

        }
        to{
            transform: translate(0px);
            text-shadow: 1px 1px 5px red;
        }
    
    }
    
    .title{
        animation-name: myanimation;
        animation-duration: 500ms;
        animation-iteration-count: infinite;
        animation-direction:alternate ;
        width: 100%;
        margin: 3vh auto;
        text-align: center;
        
        

    }
    

    .Box {
        width: 90%;
        margin: 7vh auto;
        text-align: center;
       
        padding: 5vh 0;
        
        

    }

    .Box ul li {
    list-style: none;
    margin: 5vh auto;
    width: 75%;
    
    transition: all 600ms;
    
    


}
    
}