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

body{
    font-family:Arial, sans-serif;
    background:#1a1a1a;
    overflow-x:hidden;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#2c2c2c;
    padding:15px 20px;
}

.navitems{
    display:flex;
    gap:20px;
}

.navitems a{
    color:white;
    text-decoration:none;
}

.search-wrapper{
    position:relative;
    width:250px;
}

.search-wrapper input{
    width:100%;
    padding:10px 10px 10px 40px;

    background:#444;
    border:none;
    border-radius:5px;

    color:white;
}

.search-wrapper .icon{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
}

.maindiv{
    padding:20px;
}

.mainheader{
    background:#444;
    color:white;

    padding:8px 14px;
    display:inline-block;

    margin:15px 0;
    border-radius:6px;

    font-size:15px;
}

.cards-grid{
    display:grid;

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

    gap:12px;

    margin-bottom:20px;
}

.card{
    background:#444;
    border-radius:10px;

    display:flex;
    flex-direction:column;

    aspect-ratio:1 / 1;

    overflow:hidden;
}

.image{
    flex:1;
    padding:8px;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}

.image img{
    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:6px;
}

.card-content{
    padding:8px;

    display:flex;
    flex-direction:column;
    gap:6px;
}

.desc{
    background:#bebebe;
    color:#111;

    padding:5px;
    border-radius:5px;

    font-size:11px;

    overflow:hidden;
}

.btn-use{
    display:block;
    width:100%;

    background:#00D329;
    color:white;

    text-align:center;

    padding:6px;

    border-radius:5px;

    text-decoration:none;

    font-size:12px;
}

.btn-use:hover{
    background:#00b322;
}