*{

box-sizing:border-box;

}



body{


margin:0;

font-family:
"Microsoft YaHei",
sans-serif;


background:#f5f5f5;

color:#222;


}



header{


background:white;


padding:50px 20px;


text-align:center;


border-bottom:1px solid #eee;


}



header h1{


font-size:32px;

margin:0 0 10px;


}



header p{


color:#777;


}



.menu{


margin-top:30px;


}



button{


border:none;


background:#222;


color:white;


padding:8px 18px;


margin:5px;


border-radius:20px;


cursor:pointer;


}



button:hover{


opacity:.8;


}



#list{


max-width:1100px;


margin:auto;


padding:40px 20px;


display:grid;


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


gap:20px;


}




.card{


background:white;


padding:25px;


border-radius:15px;


box-shadow:
0 5px 20px rgba(0,0,0,.06);


transition:.2s;


}



.card:hover{


transform:
translateY(-5px);


}



.category{


font-size:14px;


color:#888;


}



.card h2{


font-size:20px;


}



.tag{


display:inline-block;


background:#eee;


padding:5px 10px;


border-radius:15px;


font-size:12px;


margin:5px;


}



.level{


color:#e6a700;


}



a{


color:#222;

text-decoration:none;


}



.detail-card{


max-width:850px;


background:white;


margin:40px auto;


padding:35px;


border-radius:15px;


line-height:1.8;


}



.detail-card h2{


border-left:4px solid #222;


padding-left:10px;


margin-top:30px;


}



@media(max-width:600px){

header h1{

font-size:25px;

}


}