:root {
    --nav-background: rgba(136, 145, 144, 1.5);
    --header-background: rgba(136, 145, 144, 1.3);
    --accent1: rgb(242, 116, 5); /* */
    --accent1-rgba-07: rgba(242, 116, 5, 0.7);
    --accent2: rgb(242, 48, 5); /* */
    --accent2-rgba-07: rgba(242 49 5);
    --accent3: rgb(242, 92, 5); /* */
    --accent3-rgba-07: rgba(242, 92, 5, 0.7);
    --section-bg: rgba(136, 145, 144, 0.71);
    --dsection-bg: rgba(136, 145, 144, 0.938);
}

.buttons {
    margin: 1em;
}

.buttons a {
    --_shadow: var(--shadow, var(--accent1));
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: all 700ms;
    border: none;
    border-radius: 0.3em;
    padding: 1em;
    margin: 0.5em;
    box-shadow: 0 0 1em rgb(0 0 0 / 0.122), -0.3em -0.3em 0 0 var(--_shadow);
}

.buttons a:nth-child(2),
.card:nth-child(2) {
    --shadow: var(--accent2-rgba-07);
}

.buttons a:nth-child(3),
.card:nth-child(3) {
    --shadow: var(--accent3-rgba-07);
}

.buttons a:hover, .button:hover {
    transition: all 700ms;
    color: white;

    transform: translate(-0.3em, -0.3em) scale(0.3em, 0.3em);
    background-color: var(--_shadow);
    box-shadow: none;
}