@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
    --bg:#0f1018;
    --card:#181a28;
    --card2:#22253a;
    --primary:#9147ff;
    --primary2:#b57cff;
    --text:#ffffff;
    --text2:#c8c8d4;
    --border:rgba(255,255,255,.08);
    --shadow:0 20px 40px rgba(0,0,0,.45);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:
        radial-gradient(circle at top left,#9147ff33,transparent 30%),
        radial-gradient(circle at bottom right,#00d4ff22,transparent 30%),
        var(--bg);

    color:var(--text);
    min-height:100vh;
}

.container{
    width:min(1200px,90%);
    margin:auto;
    padding:60px 0;
}

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

header h1{
    font-size:3rem;
    font-weight:800;
}

header h1 span{
    color:var(--primary);
}

header p{
    margin-top:10px;
    color:var(--text2);
    font-size:1.1rem;
}

.search{
    margin:40px auto;
    max-width:550px;
}

.search input{
    width:100%;
    padding:18px 22px;
    border:none;
    outline:none;
    border-radius:18px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    color:white;
    font-size:16px;

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;
}

.search input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(145,71,255,.2);
}

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

.card{

    background:linear-gradient(
    160deg,
    rgba(255,255,255,.07),
    rgba(255,255,255,.03));

    border:1px solid var(--border);

    border-radius:22px;

    padding:25px;

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

    transition:.35s;
    position:relative;
    overflow:hidden;
}

.card::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.08),
        transparent);

    transform:translateX(-100%);
    transition:.6s;
}

.card:hover::before{
    transform:translateX(100%);
}

.card:hover{
    transform:translateY(-8px);
    border-color:var(--primary);
}

.command{
    font-size:1.5rem;
    font-weight:700;
    color:var(--primary);
    margin-bottom:12px;
}

.category{

    display:inline-block;

    background:rgba(145,71,255,.15);

    color:#d8c1ff;

    padding:7px 14px;

    border-radius:50px;

    font-size:.8rem;

    margin-bottom:18px;
}

.description{
    color:var(--text2);
    line-height:1.7;
    margin-bottom:20px;
}

.response{
    background:rgba(0,0,0,.25);
    border-left:4px solid var(--primary);
    border-radius:10px;
    padding:15px;
    color:#ddd;
    font-size:.95rem;
}

footer{

    margin-top:60px;

    text-align:center;

    color:#999;
}

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary2);
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.card{
    animation:fadeUp .6s ease forwards;
}

.card:nth-child(2){animation-delay:.1s;}
.card:nth-child(3){animation-delay:.2s;}
.card:nth-child(4){animation-delay:.3s;}
.card:nth-child(5){animation-delay:.4s;}
.card:nth-child(6){animation-delay:.5s;}

@media(max-width:700px){

header h1{
    font-size:2.2rem;
}

.container{
    width:94%;
}

.card{
    padding:20px;
}

.search{
    display:flex;
    justify-content:center;
    margin:50px auto;
}

.search-box{

    position:relative;

    width:100%;
    max-width:650px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    transition:.35s;
}

.search-box:hover{
    border-color:#9147ff;
}

.search-box:focus-within{

    transform:translateY(-2px);

    border-color:#9147ff;

    box-shadow:
        0 0 0 4px rgba(145,71,255,.15),
        0 15px 35px rgba(145,71,255,.2);
}

.search-box input{

    width:100%;

    padding:20px 25px 20px 65px;

    background:transparent;

    border:none;

    outline:none;

    color:white;

    font-size:17px;

    font-family:'Poppins',sans-serif;
}

.search-box input::placeholder{
    color:#9b9db5;
}

.search-icon{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    width:24px;

    height:24px;

    color:#9147ff;

    transition:.3s;
}

.search-box:focus-within .search-icon{

    transform:translateY(-50%) scale(1.2);

    color:#b57cff;
}

.category-title{

    margin:50px 0 20px;

    padding-left:18px;

    border-left:5px solid #9147ff;

    font-size:28px;

    font-weight:700;

    color:white;

    letter-spacing:.5px;
}

}