@import url('fonts.css');

:root {
    --bs-orange: #ff4001;
    --bs-white-light: #e4e4e4;
    --bs-white: #fff;
    --bs-black: #000;
}

body {
    background-image: url('../images/bg/bg-block.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-color: var(--bs-white-light);
    background-size: 450px;
    font-family: 'CalpsSans', sans-serif;
    font-weight: 400;
}

@media (max-width: 1200px) {
    body {
        background-size: 400px;
    }
}

@media (max-width: 992px) {
    body {
        background-size: 300px;
    }
}

@media (max-width: 768px) {
    body {
        background-size: 250px;
    }
}

@media (max-width: 576px) {
    body {
        background-size: 200px;
    }
}

.bg-orange {
    background-color: var(--bs-orange);
}

.bg-black {
    background-color: var(--bs-black);
}

.text-orange {
    color: var(--bs-orange);
}

.text-black {
    color: var(--bs-black);
}

/*  */

.values-chart-lg {
    margin-top: -25px;
}

.values-chart-lg-title {
    font-size: 45px
}

.values-chart-lg-value {
    font-size: 45px
}

.values-chart-lg-value-max {
    font-size: 28px
}

.values-chart-lg-percent {
    font-size: 60px
}
/*  */
.values-chart-md {
    margin-top: -27px;
}

.values-chart-md-title {
    font-size: 45px
}

.values-chart-md-value {
    font-size: 45px
}

.values-chart-md-value-max {
    font-size: 30px
}

.values-chart-md-percent {
    font-size: 58px
}





@media (max-width: 576px) {
    .values-chart-lg {
        margin-top: -20px;
    }

    .values-chart-lg-title {
        font-size: 30px
    }

    .values-chart-lg-value {
        font-size: 30px
    }

    .values-chart-lg-value-max {
        font-size: 20px
    }

    .values-chart-lg-percent {
        font-size: 40px
    }
}