*{box-sizing:border-box}
body{
margin:0;
font-family:Arial,sans-serif;
color:white;
background:#050014 url('assets/background.webp') center/cover fixed;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#09001acc;
backdrop-filter:blur(10px);
}
.logo{width:180px}
nav a{color:white;margin:10px;text-decoration:none}
.hero{
min-height:70vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}
h1{
font-size:4rem;
background:linear-gradient(90deg,#ff00cc,#00ffff);
-webkit-background-clip:text;
color:transparent;
}
button{
padding:14px 25px;
border:1px solid #00ffff;
background:#10002b;
color:white;
border-radius:30px;
cursor:pointer;
box-shadow:0 0 20px #00ffff;
margin:10px;
}
.panel{
margin:30px auto;
max-width:1000px;
padding:30px;
background:#090018cc;
border:1px solid #6f00ff;
backdrop-filter:blur(15px);
}
input{
width:100%;
padding:15px;
background:#111;
color:white;
border:1px solid cyan;
}
.cards{
display:flex;
gap:20px;
flex-wrap:wrap;
}
.card{
padding:25px;
background:#16002f;
border-radius:15px;
flex:1;
}
#drop{
border:2px dashed cyan;
padding:50px;
text-align:center;
}
footer{text-align:center;padding:30px}
@media(max-width:700px){
header{flex-direction:column}
h1{font-size:2.5rem}
}