:root {
    --color-primary: #3a71aa;
    --color-accent: #8eb6d9;
    --color-background: #272727;
    --color-on-primary: #ffffff;
    --color-surface: #ffffff;
    --color-on-surface: #272727;
    --color-backface: #f5f7f7;
    --color-on-backface: #272727;
    --background-fallback-color: #272727;
    --background-image: url("background.svg") no-repeat center center/cover fixed;
    --color-header-background: #3a71aa;
    --color-header-text: #ffffff;
    --color-progress-filled: #3a71aa;
    --color-progress-empty: #e4edf6;
    --color-button-background: #2b2829;
    --color-button-background-hover: #403c3d;
    --color-button-text: #ffffff;
    --color-button-text-hover: #ffffff;
    --button-border: 0;
    --button-border-hover: 0;
    --button-radius: 4px;
    --color-button-background-disabled: #e4edf6;
    --color-button-text-disabled: #272727;
    --color-link: #305d8c;
    --color-link-hover: #272727;
    --color-focus: #8eb6d9;
    --color-loader-indicator-top: #e4edf6;
    --color-loader-indicator-middle: #305d8c;
    --color-loader-indicator-bottom: #3a71aa;
}

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
button, .button, .selectable-method { letter-spacing: 0; }
button:focus-visible, .selectable-method:focus-visible {
    outline: 3px solid #8eb6d9;
    outline-offset: 2px;
}