.buttons {width: 100%; }
.bw2 { width: 50%; }
.bw1 { width: 100%; }

.vocabulary {
    width:100%;
}

.card-title {
    display: flex;
    align-items: center;
    height: 100px;
}

.card-body {
    text-align: center;
}

.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}

.box {
    display: inline-block;
    border-bottom: 2px solid grey;
    border-left: 2px solid grey;
    border-right: 2px solid grey;
    min-width: 41px;
    text-align: center;
    margin-right: 10px;
}

.box-0 {
    border-color: red;
    color:  red;
}

.box-1 {
    border-color: lightgreen;
    color: lightgreen;
}

.box-2 {
    border-color: green;
    color: green;
}

#circle {
    margin: auto;
    width: 100px;
}

#points {
    position: absolute;
    top: 45px;
    font-size: 20pt;
    text-align: center;
    width: 100px;
}

#myChart {
    margin: auto;
    max-width: 400px;
    max-height: 400px;
}