*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,Arial,sans-serif;
}

body{
background:#0f172a;
color:white;
padding:40px;
}

.hero{
text-align:center;
margin-bottom:50px;
}

.hero h1{
font-size:4rem;
margin-bottom:15px;
color:#7dd3fc;
}

.hero p{
font-size:1.2rem;
color:#cbd5e1;
}

.stats{
margin-top:30px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.stat{
background:#1e293b;
padding:20px;
border-radius:15px;
min-width:180px;
}

.stat h3{
font-size:2rem;
color:#7dd3fc;
}

.grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}

.card{
display:block;
text-decoration:none;
color:white;

background:#1e293b;

padding:25px;

border-radius:20px;

transition:.25s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:
0 0 25px rgba(125,211,252,.25);
}

.card h2{
margin-bottom:10px;
}

.card p{
color:#cbd5e1;
}

.sql{
border-left:5px solid #38bdf8;
}

.php{
border-left:5px solid #a855f7;
}

.html{
border-left:5px solid #f97316;
}

.css{
border-left:5px solid #06b6d4;
}

.js{
border-left:5px solid #facc15;
}

.templates{
border-left:5px solid #22c55e;
}

.ratunek{
border-left:5px solid #ef4444;
}


.section{
background:#1f2937;
padding:20px;
border-radius:15px;
margin-bottom:20px;
}

.warning{
background:#7f1d1d;
padding:15px;
border-radius:10px;
margin-top:10px;
}

.info{
background:#1e3a8a;
padding:15px;
border-radius:10px;
margin-top:10px;
}

.search-box{
margin:20px 0;
}

#searchInput{
width:100%;
padding:15px;
font-size:16px;
border:none;
border-radius:10px;
background:#111827;
color:white;
}

.links-section{

margin-top:50px;

}

.links-section h2{

margin-bottom:20px;

text-align:center;

}

.links-grid{

display:grid;

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

gap:20px;

}

.link-card{

display:flex;

flex-direction:column;

gap:10px;

padding:25px;

background:#1e293b;

border-radius:20px;

text-decoration:none;

color:white;

transition:.25s;

}

.link-card:hover{

transform:translateY(-5px);

box-shadow:
0 0 25px rgba(125,211,252,.25);

}

.link-card span{

color:#cbd5e1;

font-size:.9rem;

}

footer{

margin-top:60px;

padding:25px;

text-align:center;

color:#94a3b8;

border-top:
1px solid #334155;

}

.footer-content{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

padding-top:8px;
}