.button-primary, .button-secondary, .button-secondary-outline {
    border-radius: calc(52px * 0.5);
    display: inline-block;
    padding: 1em;
    border: 0;
}
.button-primary, .button-secondary {
    
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-family: var(--quicksandFont);
    min-width: 100px;
}

.button-primary {
    background-color: var(--yellow);
    color: var(--blue);
    transition-duration: 0.5s;
}   
    .button-primary:hover {
        transition-duration: 0.5s;
        background-color: var(--darkYellow);
    }

/* Buttons */
.btn {
    font-family: var(--quicksandFont);
    font-weight: 700;
    font-size: 1em;
    text-decoration: none;
}
    .btn.small {
        padding: 0.25rem;
        border-radius: 0.5rem;
        font-size: 0.75rem;
    }
    .btn.medium {
        padding: 0.5rem;
        border-radius: 1rem;
        font-size: 1rem;
    }
    .btn.large {
        padding: 0.75rem;
        border-radius: 1.5rem;
        font-size: 1.5rem;
    }
    .btn.icon {
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
        padding: 0;
    }

    .btn.filled.primary {
        background-color: var(--yellow);
        color: var(--blue);
    }
    .btn.filled.primary:hover {
        background-color: var(--darkYellow);
    }

    .btn.filled.secondary {
        background-color: var(--blue);
        color: white;
    }
    .btn.filled.secondary:hover {
        background-color: var(--darkBlue);
    }

    .btn.filled.destructive {
        background-color: var(--darkRed);
        color: white;
    }
    .btn.filled.destructive:hover {
        background-color: var(--red);
    }

.btn.outline {
    background-color: transparent;
    border: 2px solid;
}

    .btn.outline.primary {
        color: var(--blue);
        border-color: var(--yellow);
    }
    .btn.outline.primary:hover {
        background-color: var(--lightYellow);
    }

    .btn.outline.secondary {
        color: var(--blue);
        border-color: var(--blue);
    }
    .btn.outline.secondary:hover {
        background-color: var(--lightBlue);
        color: white;
    }

    .btn.outline.destructive {
        color: var(--darkRed);
        border-color: var(--darkRed);
    }
    .btn.outline.destructive:hover {
        background-color: var(--lightRed);
    }

/* Ghost */
.btn.ghost {
    border: 0;
    background-color: transparent;
}
    .btn.ghost.primary {
        color: var(--yellow);
    }
    .btn.ghost.primary:hover {
        color: white;
        background-color: var(--darkYellow);
    }
    .btn.ghost.secondary {
        color: var(--blue);
    }
    .btn.ghost.secondary:hover {
        color: white;
        background-color: var(--lightBlue);
    }
    .btn.ghost.destructive {
        color: var(--red);
    }
    .btn.ghost.destructive:hover {
        color: white;
        background-color: var(--darkRed);
    }

/* Link */
.btn.link {
    border: 0;
    background-color: transparent;
}
    .btn.link.primary {
        color: var(--yellow);
    }
    .btn.link.primary:hover {
        color: var(--darkYellow);
    }
    .btn.link.secondary {
        color: var(--blue);
    }
    .btn.link.secondary:hover {
        color: var(--lightBlue);
    }
    .btn.link.destructive {
        color: var(--red);
    }
    .btn.link.destructive:hover {
        color: var(--darkRed);
    }