/* CLASSES */

.main-button {
    --r:10px;
    --b:2px;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding: 5px 10px;

    border-radius: var(--r);
    display: block;
    align-items: self-end;
    position: relative;
    z-index:0;
    text-decoration: none;
    transition: 0.3s;
    font-family: Belanosima;
}

.main-button::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset: 0;
    border: var(--b) solid transparent;
    border-radius: var(--r);
    background: inherit;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask:
            linear-gradient(#fff 0 0) padding-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-repeat: no-repeat;
}

.main-button:hover {
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

.main-button:hover::before {
    -webkit-mask:none;
}