/* add your css in this file here */

.card {
 display: flex;
    flex-direction: column;
}

main {
    display: grid;
    gap: 20px;
    align-items: center;
}

.card-dark {
    background-color: #000000;
    border-radius: 10px;
    color: white;
    display: flex;
}

.card-dark .pill {
    color: black;
    background-color: white;
    border-radius: 1000px;
    justify-content: left;
    display: flex;
    max-width: 100px;
}

.card-blue {
    background-color: #3772FF;
    color: white;
    border-radius: 10000px;
    display: flex;
}

.card-blue .pill {
    color: #3772FF;
    background-color: white;
    border-radius: 1000px;
    justify-content: center;
    display: flex;
    max-width: 100px;
}

.card-red {
    background-color: #DF2A35;
    color: white;
    display: flex;
}

.card-red .pill {
    color: #DF2A35;
    background-color: white;
    border-radius: 1000px;
    justify-content: left;
    display: flex;
    max-width: 100px;
}

.card-yellow {
    background-color: #FDeA41;
    color: white;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    display: flex;
}

.card-yellow .pill {
    color: black;
    background-color: white;
    border-radius: 1000px;
    display: flex;
    max-width: 100px;
}


.card-image {
    border-radius: 10px;
    object-fit: cover;
    display: flex;
}