:root{
    --button-solid{

    }
}
.button{
    font-size: 20px;
    padding: 16px 48px;
    border-radius: 50px;
    border-width: 2px;
    border-color: transparent;
    color: var(--colour-light-100);
    cursor: pointer;
}
.btnSolid{
    background: var(--colour-primary-500);
}
.btnSolid:hover,.btnSolid:focus{
    background: var(--colour-primary-700);
}
.btnHollow{
    background: transparent;
    border: 2px solid var(--colour-primary-500);
    color: var(--colour-primary-500);
}
.btnHollow:hover, .btnHollow:focus{
    border: 2px solid var(--colour-primary-700);
    color: var(--colour-primary-700);
}
.btnHollowWhite{
    background: transparent;
    border: 2px solid var(--colour-light-100);
    color: var(--colour-light-100);
}
.btnHollowWhite:hover, .btnHollowWhite:focus{
    background: var(--colour-light-100);
    color: var(--colour-dark-500);
}
@media only screen and (max-width: 800px){
    .button{
        width: 100%;
        font-size: 16px;
    }
    a:has(.button) {
        width: 100%;
    }
}