.background-shapes {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    max-width: 1600px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .background-shapes {
        max-width: 80vw;
    }
}

.background-shapes .shapes {
    position: relative;
    width: 100%;
    height: 100%;
}

.background-shapes svg {
    position: absolute;
    pointer-events: none;
    max-width: 200px;
    width: 10vw;
    height: auto;
    max-height: auto;
}

.background-shapes svg.big {
    max-width: 400px;
    width: 20vw;
}

.background-shapes svg.small {
    max-width: 100px;
    width: 5vw;
}

.background-shapes svg.xs {
    max-width: 50px;
    width: 4vw;
}

.background-shapes svg.xxs {
    max-width: 30px;
    width: 3vw;
}

.background-shapes svg.xxxs {
    max-width: 20px;
    width: 2vw;
}

.red {
    fill: #DD4048;
}

.purple {
    fill: #8761D2;
}

.blue {
    fill: #3896FA;
}

.pink {
    fill: #F198D8;
}

.green {
    fill: #56B269;
}

.yellow {
    fill: #F6DD79;
}

.white {
    fill: #F5F5F5;
}

.black {
    fill: #131315;
}

.red-stroke {
    stroke: #DD4048;
}

.purple-stroke {
    stroke: #8761D2;
}

.blue-stroke {
    stroke: #3896FA;
}

.pink-stroke {
    stroke: #F198D8;
}

.green-stroke {
    stroke: #56B269;
}

.yellow-stroke {
    stroke: #F6DD79;
}

.white-stroke {
    stroke: #F5F5F5;
}

.black-stroke {
    stroke: #131315;
}

.no-stroke {
    stroke: none;
}

.stroke-2 {
    stroke-width: 2;
}

.stroke-3 {
    stroke-width: 3;
}

.stroke-4 {
    stroke-width: 4;
}