.button-background-effect-container{--button-background-effect-height:55px;--button-background-effect-padding-block:1rem;--button-background-effect-padding-inline:1.5rem;--button-background-effect-font-size:1.25rem;position:relative;width:-moz-fit-content;width:fit-content;margin-block:1.5rem;border-radius:20px;overflow:hidden;display:grid;justify-items:center;height:var(--button-background-effect-height)}.button-background-effect-container>*{font-family:var(--ff-primary);font-weight:500;cursor:pointer}.button-background-effect{z-index:2;color:var(--clr-dark);background-color:var(--clr-light);border-radius:20px}.black-background,.button-background-effect{position:relative;padding-block:var(--button-background-effect-padding-block);padding-inline:var(--button-background-effect-padding-inline);font-size:var(--button-background-effect-font-size)}.black-background{height:200%;width:108%;border-radius:80%;z-index:3;background-color:var(--clr-dark);color:var(--clr-light);transition:all .2s ease-out}.accent-background{background-color:var(--clr-accent)}.button-background-effect:hover{color:var(--clr-light)}.black-background:hover,.button-background-effect:hover+.black-background{transform:translateY(-75%)}@media (max-width:549px){.button-background-effect-container{--button-background-effect-height:39px;--button-background-effect-padding-block:0.75rem;--button-background-effect-padding-inline:1.25rem;--button-background-effect-font-size:0.8rem}}.button-size-small{--button-background-effect-padding-block:0.5rem;--button-background-effect-padding-inline:0.75rem;--button-background-effect-font-size:0.8rem;margin-block:.75rem}