:root {
    --default-font-family: "Resolve Sans", sans-serif;
    --header-font-family: "Resolve Sans Wide", sans-serif;
    --button-font-family: var(--default-font-family);

    /* Color Palette */

    --light-neutral-text: #051c2c;
    --dark-neutral-text: #ffffff;

    --light-neutral-text-weak: #374956;
    --dark-neutral-text-weak: #c2c2be;

    --light-selected-text: #772583;
    --dark-selected-text: #d99ce3;

    --light-selected-text-weak: #77258333;
    --dark-selected-text-weak: #d99ce333;

    --light-neutral-border: #181614;
    --dark-neutral-border: #ffffff66;

    --light-neutral-border-weak: #18161433;
    --dark-neutral-border-weak: #ffffff33;

    --light-neutral-surface: #ffffff;
    --dark-neutral-surface: #051c2c;

    --light-neutral-surface-weak: #ffffff33;
    --dark-neutral-surface-weak: transparent;

    --light-neutral-state-disabled: #f7f7f7;
    --dark-neutral-state-disabled: #ffffff0d;

    --light-danger-state-active: #ff3939;
    --dark-danger-state-active: #ff3939;

    --light-danger-state-active-weak: #ff393933;
    --dark-danger-state-active-weak: #ff393933;

    --page-background: linear-gradient(
        241.37deg,
        #a2e4b8 0%,
        #a2e4b7 0.01%,
        #5294ff 100%
    );
}

.xs1-background-container {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    overflow-x: hidden;
}

.xs1-background {
    opacity: 0.05;
    fill: var(--neutral-surface);
    min-width: 140%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    right: -10%;
    z-index: -2;
}

.btn-brand {
    background-image: linear-gradient(
        98.98deg,
        #ce7de0 -21.97%,
        #67a0ff 120.65%
    );
    border-radius: 23px;
}

body.background1 {
    background: url("/images/backgrounds/background1.png") no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 600px;
}

body.background2 {
    background: url("/images/backgrounds/background2.png") no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 300px;
}

body.background3 {
    background: url("/images/backgrounds/background3.png") no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 400px;
}

body.background4 {
    background: url("/images/backgrounds/background4.png") no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 350px;
}

body.background5 {
    background: url("/images/backgrounds/background5.png") no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 500px;
}

body.background6 {
    background: url("/images/backgrounds/background6.png") no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 800px;
}

body.background7 {
    background: url("/images/backgrounds/background7.png") no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 200px;
}
