.btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    background: $btn-bg;
    color: $fg;
    text-decoration: none;
    font-size: $font-nav;
    padding: 20px 45px;
    margin-right: 40px;
    border: none;
    border-radius: 5px;
    transition: 0.2s ease;

    &:hover {
        cursor: pointer;
        background: darken($btn-bg, 5%);
    }


    &::after {
        content: '';
        position: absolute;
        bottom: -7px;
        left: 0;
        width: 100%;
        height: 100%;
        background: darken($btn-bg, 30%);
        border-radius: 10px;
        z-index: -1;
    }
}

.btn-secondary {
    color: $fg;
    background: $secondary;

    &:hover {
        background: darken($secondary, 5%);
    }

    &::after {
        background: darken($secondary, 60%);
    }
}
