.btn-cont {
    display: flex;
    position: absolute;
    align-items: end;
    justify-content: end;
    width: 100%;
    height: 100%;
}

.btn-c2 {
    display: flex;
    flex-direction: column;
    width: 11vw;
    height: 44vh;
}

.btn-c3 {
    /*display: inline-block;*/
    width: 100%;
    height: 7vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-c4 {
    position: absolute;
    z-index: 100;
    padding: 0;
    box-sizing: content-box;
    border-radius: 3vh;
    opacity: 0.8;
    font-style: inherit;
    font-family: inherit;
    font-weight: bold;
    height: 4vh;
    width: 8vw;
    font-size: 0.6rem;
    transition: background-color 3.5s ease-in-out, box-shadow 3.5s ease-in-out, border-color 3.5s ease-in-out, color 3.5s ease-in-out;
    background-color: #0000;
    border-color: #0000;
    color: #0000;
    height: 1.8em;
    width: 7em;
}
    .btn-c4:hover /*, .btn-c4:focus*/ {
        opacity: 1.0;
        cursor: pointer;
    }

.btn-c4-numeral {
    letter-spacing: -0.053em;
    padding-left: 0.2em;
}

/*            ~  gl series  ~              */

body.gl0 div.btn-cont div.btn-c3 button.btn-c4/*, .btn-c4-gl0*/ {
    background-color: #000033d9;
    border-color: #00F;
    color: white;
}

body.gl1 div.btn-cont div.btn-c3 button.btn-c4,
body.gl5 div.btn-cont div.btn-c3 button.btn-c4
/*, .btn-c4-gl1*/ {
    background-color: rgba(62, 53, 170, 0.22);
    border-color: #0b1a94;
    color: aliceblue;
}

body.gl2 div.btn-cont div.btn-c3 button.btn-c4/*, .btn-c4-gl2*/ {
    background-color: rgba(92, 43, 6, 0.0);
    border-color: #fffad9;
    color: aliceblue;
    box-shadow: 0.03em 0.03em 0.1em #fff, 0.05em 0.05em 0.3em #fff, 0.3em 0.3em 1em #9985e0,-0.3em 0.3em 1em #43448d;
    box-shadow: 0.03em 0.03em 0.1em #fff, 0.05em 0.05em 0.3em #fff, 0.3em 0.3em 1em #d585e0c4,-0.3em 0.3em 1em #43448d;
}

body.gl3 div.btn-cont div.btn-c3 button.btn-c4/*, .btn-c4-gl3*/ {
    background-color: rgba(64, 128, 128, 0.12);
    border-color: #0b942d;
    color: springgreen;
    box-shadow: 0.03rem 0.03rem 0.1rem #ffffff57, 0.05rem 0.05rem 0.3rem #ffffff4d, 0.3rem 0.3rem 1rem #08bc1c57,-0.3rem 0.3rem 1rem #25ab2147;
}

body.gl4 div.btn-cont div.btn-c3 button.btn-c4/*, .btn-c4-gl4*/ {
    background-color: #2ecdf20a;
    border-color: #2ecdf2f2;
    color: #2ecdf2;
    box-shadow: 0.03em 0.03em 0.1em #fff, 0.05em 0.05em 0.3em #fff, 0.3em 0.3em 1em #2ecdf28a,-0.3em 0.3em 1em #2ecdf28a;
}

body.svg div.btn-cont div.btn-c3 button.btn-c4/*, .btn-c4-svg*/ {
    background-color: rgba(255, 0, 0, 0.22);
    border-color: #940b0b;
    color: aliceblue;
}

body.basic div.btn-cont div.btn-c3 button.btn-c4/*, .btn-c4-basic*/ {
    background-color: #66339954;
    border-color: rebeccapurple;
    color: rebeccapurple;
}

@media (max-width: 600px) and (min-height: 350px) {
    .btn-c2 {
        flex-direction: row;
        width: 96vw;
        height: 6vh;
    }
    .btn-c4 {
        width: 13vw;
        font-size: 0.7rem;
    }
}