.input.valid.modified, .textarea.valid.modified {
    --bulma-input-h: var(--bulma-success-h);
    --bulma-input-s: var(--bulma-success-s);
    --bulma-input-l: var(--bulma-success-l);
    --bulma-input-focus-h: var(--bulma-success-h);
    --bulma-input-focus-s: var(--bulma-success-s);
    --bulma-input-focus-l: var(--bulma-success-l);
    --bulma-input-border-l: var(--bulma-success-l)
}

.input.invalid.modified, .textarea.invalid.modified {
    --bulma-input-h: var(--bulma-danger-h);
    --bulma-input-s: var(--bulma-danger-s);
    --bulma-input-l: var(--bulma-danger-l);
    --bulma-input-focus-h: var(--bulma-danger-h);
    --bulma-input-focus-s: var(--bulma-danger-s);
    --bulma-input-focus-l: var(--bulma-danger-l);
    --bulma-input-border-l: var(--bulma-danger-l)
}


.hero.hero-splash {
    background-image: url(/img/hero-background.png);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

    .hero.hero-splash .title, .hero.hero-splash .subtitle {
        color: hsl(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l));
    }


.hero.is-info.has-gradient {
    --rotation: 300deg;
    background: linear-gradient(var(--rotation), var(--bulma-info-50) 20%, var(--bulma-info-65) 80%);
}