index.css

* {
    box-sizing: border-box;

    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.header {
    padding: .125rem;
    width: 100%;
    font-size: 2rem;
    text-align: center;

    border-bottom: 1px solid white;
}

#panel-left, #panel-right {
    padding: .25rem;
}


.color1 {
    color: darksalmon;
    border-bottom: 1px solid darksalmon;
}

.color2 {
    color: darkseagreen;
    border-bottom: 1px solid darkseagreen;
}

#panel {
    display: flex;
    margin: 0 auto;
    vertical-align: center;
    max-width: 100%;
    width: 50rem;
    background: aliceblue;
    border: 1px lightblue solid;
}

#panel-center {
    display: flex;
    padding: .75rem;
    
    flex-direction: column;
    justify-content: space-around;
}

.flex-box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    padding-top: 1rem;
}

.card {
    padding: .25rem;
}

/* .card-checked {
    padding: .25rem;
    border-radius: 3px;
    border: 1px solid lightblue;
} */

.card-img {
    height: 5rem;
    width: 5rem;
    border-radius: 5rem;
    background-color: white;
    box-shadow: 0 0 5px #888;
}

.card-img-checked {
    height: 5rem;
    width: 5rem;
    border-radius: 5rem;
    background-color: white;
    box-shadow: 0 0 5px #888;

    border: .25rem solid deeppink;

}

.card-text {
    font-size: 1rem;
    font-weight: 100;
    margin: .25rem;
    text-align: center;
}

.card-big {

}
.card-img-big {
    height: 7rem;
    width: 7rem;
    border-radius: 7rem;
    background-color: white;
    box-shadow: 0 0 5px #888;
    border: .25rem solid white;
}
.card-text-big {
    font-size: 1.5rem;
    font-weight: 100;
    margin-top: .25rem;
    text-align: center;
}