button:not(.nobutton), .button {
    border: none;
    font-family: var(--highlight-font);
    padding: calc(.5 * var(--padding)) calc(3 * var(--padding))
}
.headerteaser {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
body .headerbuttons > * {
    color: var(--light) !important;
    padding: calc(.5 * var(--padding));
    z-index: 1;
}
.headerbuttons:before {
    content: '';
    position: absolute;
    right: -100%;
    top: -50%;
    width: 200%;
    height: 150%;
    background-color: var(--color2);
    filter: blur(300px);
    mix-blend-mode: multiply
}
@media only screen  
    and (max-width: 812px) 
    and (-webkit-min-device-pixel-ratio: 3), 
    only screen 
    and (max-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2),
    (max-width: 500px)
{
    .headerteaser > div:first-child {
        z-index: 10;
        position: relative;
    }
    .headerteaser > div:last-child {
        transform: translateY(-100%)
    }
}