html {
    position: relative;
    min-height: 100%;
    font-size: 10px;
    background-color: black;
}
/*@media (min-width: 480px) and (min-height: 250px) {
    html {
        font-size: 9px;
    }
}*/
@media (min-width: 480px) and (min-height: 320px) {
    html {
        font-size: 13px;
    }
}
@media (min-width: 768px) and (min-height: 420px) {
    html {
        font-size: 17px;
    }
}
@media (min-width: 1024px) and (min-height: 510px) {
    html {
        font-size: 24px;
        font-size: 20px;
    }
}



    div.key {
        display: flex;
        align-items: center;
        margin: 1rem 0;
        font-style: italic;
    }


    div.key span.key > span {
        width: 2rem;
        height: 2rem;
        background-color: #deb88761;
        border-width: 0.3rem;
        /*border-style: ridge ridge solid solid;*/
        border-color: burlywood;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-style: inset;
        box-shadow: 0.1rem 0.1rem 0.3rem black;
    }

    div.key span.key > span.dbl {
        width: 4rem;
    }

    div.key span.key > span.trpl {
        width: 7rem;
    }

    div.key span.key span span {
        color: #FFF;
        text-shadow: 0.1rem 0.1rem 0.2rem #2e2e2e; /* merge w/ header */
        /* font-style: italic; */
        font-size: 1rem;
        font-weight: 800;
        padding-bottom: 0.3rem;
        transition: color 1s ease-in-out, text-shadow 1s ease-in-out;    

    }

    div.main-cont.light div.key span.key span span {
        color: #000;
        text-shadow: 0.1rem 0.1rem 0.2rem #FFF0; /* merge w/ header */

    }

    div.key span.key span span.sm {
        /*font-size: 1.4rem;*/
        text-align: center;
    }


    div.key span.join {
        padding: 0 1rem;
        font-size: 1.3rem;
        color: #FFF;
        /*color: #DEB887;*/
        transition: color 1s ease-in-out;
    }

    div.key span.join-char {
        font-size: 1.0rem;
    }

    div.main-cont.light div.key span.join {
        color: #000;
    }

    div.key span.msg {
        font-size: 1.2rem;
        padding-left: 1rem;
        text-align: center;
        padding-bottom: 0.3rem;
        color: #FFF;
        transition: color 1s ease-in-out;
    }

    div.main-cont.light span.msg {
        color: #000;
    }