.btn-mc {
    /* min-width: 500px;
    width: 35vw; */
    /* min-height: calc(5rem + 8px);
    height: 100%; */
    border-radius: 0;
    border: 4px solid var(--border-default);
    background-color: var(--background-default);
    color: var(--text-default);
    /* line-height: 3.5rem; */
    /* font-size: 2.5rem; */
    text-shadow: 4px 4px 1px var(--text-shadow);
    overflow: hidden;
    align-items: center;
    box-shadow: -4px -8px 0px var(--border-shadow-dark) inset, 4px 4px 0px var(--border-shadow-light) inset;
    position: relative;
}

.btn-mc:hover {
    border-color: var(--border-active);
    background-color: var(--background-active);
}

.btn-mc:active {
    background-color: var(--background-active);
    box-shadow: 0px -4px 0px var(--border-shadow-dark) inset, 8px 8px 0px var(--border-shadow-light) inset;
    padding-top: 8px;
    padding-left: 8px;
}

.btn-mc-txt {
    display: inline-block;
    transform: translateY(26%);
}

.btn-mc-icon {
    position: absolute;
    right: 10%;
    width: 3rem;
    height: auto;
    transform: translateX(-50%) translateY(10%);
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}

@media only screen and (orientation: landscape) {
    .btn-mc {
        min-width: 500px;
        width: 35vw;
        min-height: calc(5rem + 8px);
        height: 100%;

        line-height: 3.5rem;
        font-size: 2.5rem;
    }

    .btn-mc-icon {
        visibility: visible;
    }
}

@media only screen and (min-width: 800px) and (orientation: portrait) {
    .btn-mc {
        min-width: 300px;
        width: 35vw;
        min-height: calc(4rem + 8px);
        height: 100%;

        line-height: 3rem;
        font-size: 2.2rem;
    }

    .btn-mc-icon {
        visibility: hidden;
        display: none;
    }
}

@media only screen and (min-width: 350px) and (max-width: 799px) and (orientation: portrait) {
    .btn-mc {
        min-width: 250px;
        width: 35vw;
        min-height: calc(3.5rem + 8px);
        height: 100%;

        line-height: 2.5rem;
        font-size: 2rem;
    }

    .btn-mc-icon {
        visibility: hidden;
        display: none;
    }
}

@media only screen and (max-width: 349px)  and (orientation: portrait) {
    .btn-mc {
        min-width: 100px;
        width: 35vw;
        min-height: calc(2rem + 8px);
        height: 100%;

        line-height: 1.5rem;
        font-size: 1rem;
    }

    .btn-mc-icon {
        visibility: hidden;
        display: none;
    }
}