*{
box-sizing:border-box;
}


body{

margin:0;

padding:40px 20px;

font-family:"Nunito",sans-serif;

background:#fff2f7;

color:#5f6170;

overflow-x:hidden;

}



header{

text-align:center;

max-width:750px;

margin:auto;

}



.logo{

font-size:70px;
color: #ec7fa8;
}



h1{

font-size:45px;

color:#ec7fa8;

}



header p{

font-size:18px;

line-height:1.7;

}



.creator{

display:inline-block;

background:white;

padding:12px 25px;

border-radius:30px;

color:#e86d9d;

font-weight:700;

box-shadow:0 8px 20px #ffd1e2;

}




.cloud{

position:absolute;

border-radius:50%;

z-index:-1;

}



.cloud1{

width:250px;

height:250px;

background:#bdeaff;

top:-80px;

left:-80px;

opacity:.5;

}



.cloud2{

width:200px;

height:200px;

background:#bde8c8;

right:-60px;

top:350px;

opacity:.5;

}



.directory-tools{

max-width:1000px;

margin:50px auto 30px;

}



#search{

width:100%;

padding:18px;

border-radius:40px;

border:3px solid #ffd0e2;

font-size:16px;

outline:none;

}



.buttons{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

margin-top:25px;

}



button{

border:none;

padding:13px 22px;

border-radius:30px;

background:#bdeaff;

color:#3785aa;

font-weight:700;

cursor:pointer;

}



button:hover{

transform:translateY(-3px);

}



button.active{

background:#ec7fa8;

color:white;

}



.resources{

max-width:1100px;

margin:auto;

display:grid;

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

gap:25px;

}



.card{

padding:30px;

border-radius:35px;

background:white;

cursor:pointer;

box-shadow:0 12px 25px rgba(220,120,160,.15);

transition:.3s;

}



.card:hover{

transform:translateY(-8px);

}



.card:nth-child(even){

background:#edfff2;

}



.icon{

font-size:45px;
color: #7ec8e3;
}



h2{

color:#e36b98;

}



span{

display:inline-block;

background:#bdeaff;

padding:8px 18px;

border-radius:25px;

color:#3785aa;

font-weight:bold;

}



footer{

text-align:center;

margin-top:70px;

color:#999;

}

.linktree-button{
display:inline-block;
margin-top:15px;
padding:12px 25px;
border-radius:30px;
background:#ec7fa8;
color:white;
font-weight:700;
text-decoration:none;
transition:.3s;
}


.linktree-button:hover{
background:#d95f8d;
transform:translateY(-3px);
}

.icon {
  font-size: 55px;
  filter: drop-shadow(2px 2px 0 #ffd1e2);
}