.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--button-spacing);
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid black;
    padding: var(--button-padding-y) var(--button-padding-x);
    transition: all 0.3s ease;
    font-size: var(--hedera-font-xs);
    font-family: 'Catamaran', sans-serif;
}
.button-on-dark {
    color: white;
    background: black;
    border: 2px solid white;
}

.button-secondary {
    color: black;
    background: white;
}

.button-small {
    width: 20%
}
button:focus, .button:focus{
    outline: none !important;
    /* need to add the focus styling here */
}

@media (hover: hover) and (pointer: fine) {
    .button-on-dark:hover {
        color: white;
        box-shadow: inset 0 0 0 1px currentColor;
    }
    .button-secondary:hover {
        box-shadow: inset 0 0 0 1px currentColor;
    }
}
@media (max-width: 768px) {
    .button-small {
        width: 100%;
    }
}