body{
    direction: rtl;
    font-family: koodak;
    box-sizing:border-box;
}
.myheader{
    overflow: auto;

}
div.myheader img{
    border-radius: 10%;
    width: 15%;
    height: auto;
    margin: 20px auto 20px auto;
    display: block;
    box-shadow: 20px 10px 5px gray;
}


.mycontainer{
    border-radius: 4px;
    display: flex;
    background-color: #607D8B;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.myitem{
    width: 30%;
    background-color: antiquewhite;
    padding: 20px;
    margin: 20px;
    height: auto;
    text-align: center;
    overflow: hidden;
}
div.di_himage img{
    width: 50%;
    height: auto;
}


.mm{
    height: 200px;
    width: 100%;
    
}

a.mmm{
    text-decoration: none;
}

div.main{
    text-align: center;
}
h1{
    font-family: koodak;
    text-align: center;
    border: 2px solid orange;
    background-color: orange;
    border-radius: 10px;
}
img.mainimage{
    padding: 20px;
    border: 2px solid gray;
    border-radius: 20px;
    max-width: 50%;
    height: auto;
    margin: 20px;
    box-shadow: 20px 10px 5px gray;
}
ul.Mymenu{
    padding:0;
    margin:0;
    list-style-type:none;
    overflow: hidden;
    background-color:#37526b;
    
    border-radius:4px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;

}
ul.Mymenu li{
    float: right;
}
ul.Mymenu li a{
    font-family: koodak;
    font-size: large;
    padding: 10px;
    
    color: white;
    display: block;
    text-decoration: none;
}

@font-face {
    font-family: koodak;
    src: url('/fonts/BKoodkBold.ttf') format('truetype'),
    url('/fonts/BKoodakBold.woff') format('woff'),
    url('fonts/BKoodakBold.woff2') format('woff2');
}
/* وقتی عرض صفحه کمتر از 600 پیکسل شد */
@media (max-width: 600px){
    .mycontainer{
      flex-direction: column;

    }
    .mm{
        width: 100%;
        height: 100px;
    }
    h1{
        font-size: 20px;
    }

  }
/* وقتی عرض صفحه کمتر از 600 پیکسل شد */
@media (min-width: 1800px){
    .mycontainer{
      

    }
    .mm{
        width: 100%;
        height: 400px;
    }
    h1{
        font-size: 40px;
    }

}