html{box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit;}
@font-face{font-family:"B Nazanin";src:url("project/font/B-NAZANIN.TTF") format("truetype");font-weight:normal;font-style:normal;}
body{font-family:"B Nazanin";padding:0;margin:0;background-color:tan}
.navar div,.navar nav{height:100%;max-height:60px;}
#blook1{grid-area:blook1}
#blook2{grid-area:blook2;display:flex;justify-content:center;align-items:center}
#blook3{grid-area:blook3}
#blook2 img{width:100%;height:100%;max-height:60px;max-width:60px;user-select:none;}
#blook1,#blook3{display:flex;justify-content:center;align-items:center}
.navar nav a{text-decoration:none;white-space:nowrap;font-size:clamp(1.1rem,1.2rem,1.3rem);font-weight:bold;color:DarkSlateGrey;padding:2px;border-radius:5px;display:block;width:150px;text-align:center;max-width:150px;background-color:Snow;user-select:none;transition:box-shadow 0.3s,transform 0.1s}
.navar{background-color:DarkCyan;height:60px;display:grid;grid-template-columns:1fr 100px 1fr;grid-template-areas: "blook1 blook2 blook3";}
.navar i{vertical-align:middle;color:Purple;margin-left:3px;font-size:clamp(1rem,1.1rem,1.2rem);opacity:0.7;transition:0.2s}
a:hover i{opacity:1}
nav div{height:100%;max-height:60px;flex:1 1 100%;display:flex;justify-content:center;align-items:center}
a:hover{box-shadow:1px 2.3px 5px 0.5px DarkSlateGray}
a:active{transform:translateY(1.3px)}
.navar2{display:none;background-color:DarkCyan;height:60px;user-select:none}
@media screen and (min-width:900px) and (max-width:1050px){.navar nav a{font-size:clamp(0.9rem,1rem,1.1rem);width:130px} }
@media screen and (max-width:899px) {.navar{display:none} .navar2{display:flex} }
.navar2 div{height:100%;max-height:60px}
#item2 img{width:100%;height:100%;max-width:60px;max-height:60px}
#item2 h1{height:100%;max-height:60px;display:flex;align-items:center;margin-top:0;letter-spacing:5px;white-space:nowrap;font-family:'Poppins', sans-serif;color:silver;user-select:none;text-shadow:3px 4px 2px DarkSlateGray}
#item1,#item3{flex:1 2 25%;display:flex;justify-content:center;align-items:center}
.navar2 i{color:snow;font-size:clamp(1.1rem,1.2rem,1.3rem);width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;transition:0.2s}
@media screen and (max-width:500px){.navar2 #item2{gap:0px} #item2 img{margin-left:15px;max-width:58px;max-height:58px} #item2 h1{margin-left:15px}}
#item2{display:flex;flex:1 1 75%;justify-content:center;}
#item1 i:hover, #item3 i:hover{background-color:MidnightBlue;background-clip:content-box;}
@media screen and (max-width:480px){#item2 img{max-width:50px;max-height:50px;margin-left:0;display:flex;align-items:flex-end;margin-top:5px} #item2 h1{font-size:clamp(1.3rem,1.4rem,1.5rem);margin-top:3px} }