body {
    background-image: url(./../images/login-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

body::before {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));

    display: block;

    position: absolute;
    top: 0;
    left: 0;

    content: "";

    width: 100%;
    height: 100%;
}

:root {
    --color-button-primary-background:#f6c445;
    --color-button-primary-hover-background: #e0a800;
    --color-button-primary-text: #3e464e;
    --color-button-primary-hover-text: #3e464e;
    --color-button-secondary-background: transparent;
    --color-button-secondary-hover-background: #5a656f;
    --color-button-secondary-text: #ced5e1;
    --color-button-secondary-hover-text: #ced5e1;
    --color-field-background: #4f5861;
    --color-field-border: #4f5861;
    --color-field-text: #fff;
    --color-form-background: #3e464e;
    --color-form-text: #fff;
    --color-link-primary: #ced5e1;
    --color-message-error: #da273b;
    --color-message-warning: orange;
    --color-page-background: #4f5861;
    --color-page-text: #fff
}

.silverstripe-brand .silverstripe-cms-logo .glyph,
.silverstripe-brand .silverstripe-cms-logo .text {
    fill:#fff
}

header,
footer,
main {
    z-index: 10;
}