:root {
    --angle: 8px;
    --angle-o: 4px;
}

.btn,
button.btn {
    font-family: inherit;
    top: 0;
    left: 0;
    transition: all .15s linear 0s;
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    margin: 0px 0 10px 10px;
    width: calc(100% - 10px);
    /* min-width: 300px; */
    background-color: var(--yellow);
    text-transform: uppercase;
    color: var(--brown);
    /* letter-spacing: 1px; */
    text-decoration: none;
    border: none;
    /* border-radius: 5px; */
    cursor: pointer;
    text-align: left;
    /* Key for 3D effect:  */
    box-shadow: -12px 12px 0 var(--brown), /* Main shadow */
        -8px 8px 0 var(--brown), /* Top-left connecting shadow */
        -4px 4px 0 var(--brown); /* Top-left connecting shadow (lighter) */
    font-size: 35px;
    font-style: normal;
}

.btn.disable,
button.btn.diable {
    background-color: var(--yellow50);
}

.btn:hover,
button.btn:hover {
    top: 6px;
    left: -6px;
    /* Adjusted shadows on hover */
    box-shadow: -6px 6px 0 var(--brown),
        -4px 4px 0 var(--brown),
        -2px 2px 0 var(--brown);
}


.btn::after,
button.btn::after {
    content: '';
    position: absolute;
    top: 4px;
    left: -8px;
    width: var(--angle);
    height: var(--angle);
    background-color: var(--brown);
    transform: rotate(45deg);
    z-index: -1;
}

.btn::before,
button.btn::before {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 4px;
    width: var(--angle);
    height: var(--angle);
    background-color: var(--brown);
    transform: rotate(45deg);
    z-index: -1;
}

.btn:hover::after,
button.btn:hover::after {
    top: 2px;
    left: -4px;
    width: var(--angle-o);
    height: var(--angle-o);
}

.btn:hover::before,
button.btn:hover::before {
    bottom: -4px;
    right: 2px;
    width: var(--angle-o);
    height: var(--angle-o);
}


a.btn,
button.btn {
    position: relative;
}

a:active.btn,
button:active.btn {
    top: 12px;
    left: -12px;
    box-shadow: none; /* Remove all shadows on active */
}

a:active.btn:before,
button:active.btn:before {
    bottom: 2px;
    right: 2px;
}

a:active.btn:after,
button:active.btn:after {
    top: 2px;
    left: 2px;
}

@media screen and (max-width: 800px) {
    .btn, button.btn {
        font-size: 30px;
    }
}