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

body{

    min-height:100vh;

    font-family:Segoe UI,sans-serif;

    color:white;

    background-image:url("/img/background.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.overlay{

    min-height:100vh;

    background:rgba(0,0,0,.65);

    padding:40px;

}

h1{

    margin-bottom:40px;

    font-size:48px;

    color:#56ffff;

    text-shadow:0 0 10px #56ffff,0 0 30px #56ffff;

}

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

    gap:30px;

}

.card{

    display:block;

    text-decoration:none;

    color:white;

    background:rgba(0,0,0,.45);

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

    border-radius:20px;

    overflow:hidden;

    backdrop-filter:blur(8px);

    transition:.3s;

}

.card:hover{

    transform:translateY(-6px);

    border-color:#56ffff;

    box-shadow:0 0 20px rgba(86,255,255,.3),0 0 50px rgba(86,255,255,.2);

}

.card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.title{

    padding:20px 20px 10px;

    font-size:24px;

}

.price{

    padding:0 20px 10px;

    font-size:20px;

    color:#56ffff;

}

.description{

    padding:0 20px 20px;

    color:#cccccc;

    line-height:1.5;

}

.received{

    opacity:.4;

    filter:grayscale(1);

    text-decoration:line-through;

}

@media(max-width:700px){

    .overlay{

        padding:20px;

    }

    h1{

        font-size:36px;

    }

}