* {
    box-sizing: content-box;
}

h1.py-title {
    padding: 5px 10px;
    margin-bottom: 5px;
}

.py-block {
    flex: 1;
    margin-right: 10px;
    /* min-width: 400px; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.row {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    border-top: 1px solid #ccc;
    align-items: center;
}

.cell {
    flex: 1;
    text-align: center;
    font-size: 30px;
    font-family: "Helvetica";
    font-weight: 800;
    padding: 10px;
}
.cell:hover {
    text-shadow: 2px 2px 0px #ffffff;
    background: #f7f7c8;
}
@media (hover:none) {
    .cell:hover {background: none}
}

.container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap-reverse;
    margin-bottom: 30px;
    /* min-width: 520px; */
}


.row:nth-child(2n) {
    background: #f7f7f7;
}

.row:last-child {
    border-bottom: 1px solid #ccc;
}

.image-block img {
    border: 1px solid #ccc;
    max-width: 100%;
}

.py-b, .py-p, .py-m, .py-f,
.py-a, .py-o, .py-e,
.py-zhi, .py-chi
 {
    color: #fd8282;
}
.py-d, .py-t, .py-n, .py-l,
.py-i, .py-u, .py-v,
.py-shi, .py-ri
 {
    color: #e29034;
}
.py-g, .py-k, .py-h,
.py-ai, .py-ei, .py-ui,
.py-zi, .py-ci
 {
    color: #5c42ea;
}
.py-j, .py-q, .py-x,
.py-ao, .py-ou,
.py-si
 {
    color: #5dcc82;
}
.py-zh, .py-ch, .py-sh, .py-r,
.py-iu, .py-ie,
.py-yi
 {
    color: #5085da;
}
.py-z, .py-c, .py-s,
.py-ve, .py-er,
.py-wu, .py-yu
 {
    color: #e83976;
}
.py-y,
.py-an, .py-en, .py-in,
.py-ye, .py-yue
{
    color: #ecba1c;
}

.py-w,
.py-un, .py-vn,
.py-yuan
{
    color: #3de0dc;
}
.py-ang, .py-eng,
.py-yin
{
    color: #f39;
}
.py-ing, .py-ong,
.py-yun, .py-ying
{
    color: #93F;
}