:root{

--bg:#0f172a;
--card:#1e293b;
--text:#f8fafc;
--accent:#38bdf8;

}


*{

box-sizing:border-box;

}


body{

margin:0;
font-family:Arial,sans-serif;
background:var(--bg);
color:var(--text);

}



header{

padding:30px;
background:var(--card);
text-align:center;

}



nav a{

color:white;
text-decoration:none;
margin:10px;

}



nav a:hover{

color:var(--accent);

}



main{

max-width:1000px;
margin:auto;
padding:40px;

}



.hero{

text-align:center;

}



.btn,
button{

background:var(--accent);
color:#000;
padding:12px 20px;
border-radius:6px;
border:0;
text-decoration:none;
cursor:pointer;

}



.cards{

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

}



.card{

background:var(--card);
padding:25px;
border-radius:10px;

}



.card a{

color:var(--accent);

}



input,
textarea{

width:100%;
padding:12px;
margin-bottom:15px;
background:#334155;
border:0;
color:white;

}



footer{

text-align:center;
padding:20px;
background:var(--card);

}