:root {
    --dp: 1px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: #0B0B0B;
    min-width: calc(1200 * var(--dp));
    scrollbar-width: thin; /* Firefox: make scrollbar thinner */
    scrollbar-color: #E20100 #000; /* Thumb and track colors */
}

#loading {
    color: #FFFFFF;
    font-family: sans-serif;
    text-align: center;
    margin-top: 20vh;
}

/* Стили для полосы прокрутки */
::-webkit-scrollbar {
    width: 6px;  /* Толщина вертикальной полосы */
    height: 6px; /* Толщина горизонтальной полосы */
}

::-webkit-scrollbar-track {
    background: #000; /* Цвет фона полосы прокрутки */
}

::-webkit-scrollbar-thumb {
    background: #E20100; /* Цвет ползунка */
}

::-webkit-scrollbar-thumb:hover {
    background: #E20100; /* Цвет ползунка при наведении */
}

canvas {
    background: #0B0B0B;
    min-width: calc(1200 * var(--dp));
}

@media (max-width: 600px) {
    :root {
        --dp: 0.5px;
    }
    html, body {
        min-width: 100%;
        overflow-x: hidden;
    }
    canvas {
        min-width: 100%;
    }
}