:root {
    --body-bg: #f3f4f6;
    --main-bg: #FFF;
    --clicktask-gradient-bg: linear-gradient(to top left, #2563eb, #7c3aed);
    --left-content-bg: var(--clicktask-gradient-bg);
    --left-content-tc: #FFF;
    --decorative-circle-bc: rgba(255, 255, 255, .3);
}

body, html {
    background-color: var(--body-bg);
}

body > main {
    background-color: var(--main-bg);
    z-index: 1 !important;
}

.left-content {
    background: var(--left-content-bg);
    color: var(--left-content-tc);
    align-items: center !important;
    justify-content: space-around !important;
    overflow: hidden !important;
    position: relative !important;
}

.decorative-circle {
    width: 200px;
    height: 200px;
    border: 4px solid var(--decorative-circle-bc);
    border-top: 8px solid var(--decorative-circle-bc);
    border-radius: 50%;
    position: absolute;
}

.decorative-circle.circle-1 {
    bottom: -80px;
    left: -160px;
}

.decorative-circle.circle-2 {
    bottom: -100px;
    left: -80px;
}

.decorative-circle.circle-3 {
    top: -100px;
    right: 0;
}

.decorative-circle.circle-4 {
    top: -80px;
    right: -80px;
}

.clicktask-gradient {
    background: var(--clicktask-gradient-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}