*{

box-sizing:border-box;

}



body{


margin:0;


font-family:

-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial;


background:

linear-gradient(
135deg,
#f5f5f7,
#ffffff
);


color:#111;


}



header{


text-align:center;


padding:80px 20px 40px;


}



h1{


font-size:64px;


margin:0;


letter-spacing:-3px;


}



header p{


font-size:26px;


color:#666;


}



.search-box{


margin:40px auto;


max-width:650px;


height:60px;


background:white;


display:flex;


border-radius:40px;


padding:5px;


box-shadow:

0 20px 50px rgba(0,0,0,.15);


}



.search-box input{


flex:1;


border:0;


outline:none;


font-size:18px;


padding-left:25px;


}



.search-box button{


border:0;


background:#007aff;


color:white;


padding:0 35px;


border-radius:35px;


font-size:16px;


}



.category{


display:flex;


justify-content:center;


gap:15px;


flex-wrap:wrap;


}



.category button{


background:white;


border:0;


padding:12px 25px;


border-radius:30px;


box-shadow:

0 5px 20px rgba(0,0,0,.12);


}



#results{


max-width:1000px;


margin:40px auto;


padding:20px;


}



.card{


background:white;


padding:30px;


border-radius:30px;


margin-bottom:25px;


box-shadow:

0 15px 40px rgba(0,0,0,.1);


}



.card h2{


margin-top:0;


}



.card a{


color:#007aff;


font-weight:bold;


}