main{
    width: 80%;
}
#card-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.card{
    width: 250px;
    padding: 2%;
    border-radius: 8px;
    border: 5px solid ;
    box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.5);
    aspect-ratio: 9/12;
    transition: .2s;
}

.card.common{
    background-color: #f8f9fa;
    border-color:  #6c757d;
}

.card.uncommon{
    background-color: #bbe4b3;
    border-color:  #198754;
}

.card.rare{
    background-color: #c2e1ff;
    border-color:  #0dcaf0;
}

.card.epic{
    background-color: #e2c2ff;
    border-color:  #6f42c1;
}

.card.legendary{
    background-color: #f8d7da;
    border-color:  #dc3545;
}

.card img{
    width: 100%;
    border-radius: 8px;
}