@font-face {
    font-family: IranSans;
    src: url(../fonts/IRANSans-web.woff);
}

*{

font-family:IranSans;
box-sizing:border-box;
margin:0;
padding:0;

}


body{

background:#0d110d;
color:white;

}



.header{

background:#171f17;

text-align:center;

padding:25px;

border-radius:0 0 25px 25px;

border-bottom:2px solid #10B981;

}



.logo{

width:70px;

}



h1{

color:#10B981;

}



.main{

padding:30px;

}



.tutorials{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}



.card{


background:
linear-gradient(
145deg,
#123d18,
#0d110d
);


border:1px solid #10B98155;

border-radius:20px;

padding:20px;

transition:.3s;


}



.card:hover{

transform:translateY(-8px);

border-color:#10B981;

}



.card h2{

color:#10B981;

margin-bottom:15px;

}



.card button{

margin-top:15px;

background:#10B981;

color:white;

border:0;

padding:10px 20px;

border-radius:12px;

cursor:pointer;

}



.tutorial-box{

margin-top:40px;

background:#171f17;

border:1px solid #10B98155;

border-radius:20px;

padding:25px;

line-height:2;

display:none;

}



@media(max-width:600px){

.main{

padding:15px;

}

}
.tutorial-box p{

white-space:pre-line;

}


.tutorial-box h2{

color:#10B981;
margin-bottom:20px;

}