canvas {
    position: fixed;
    top: 0;
    left: 0;
    /* z-index: -9999; */
}

.top-1 {
    top: calc(max(10px, 1%)) !important;
}

.top-3 {
    top: calc(max(30px, 3%)) !important;
}

.top-5 {
    top: calc(max(50px, 5%)) !important;
}

.top-7 {
    top: calc(max(70px, 7%)) !important;
}

.top-10 {
    top: calc(max(100px, 10%)) !important;
}

.top-15 {
    top: calc(max(150px, 15%)) !important;
}

.top-95 {
    top: 95% !important;
}

.bottom-3 {
    bottom: 3% !important;
}

.bottom-5 {
    bottom: 5% !important;
}

.start-10 {
    left: 10% !important;
}

.start-40 {
    left: 40% !important;
}

.end-25 {
    right: 25% !important;
}

.ratio-responsive {
    padding-top: 1% !important;
    padding-bottom: 1% !important;
}

@media (max-aspect-ratio: 1/1) {
    .ratio-responsive {
        padding-top: 20% !important;
        padding-bottom: 20% !important;
    }
}

.ratio-responsive-right-1-25 {
    right: 25% !important;
    transition: right 1s ease-in-out;
}

@media (max-aspect-ratio: 1/1) {
    .ratio-responsive-right-1-25 {
        right: 1% !important;
    }
}

.ratio-responsive-center {
    left: 40% !important;
    transition: left 1s ease-in-out;
}

@media (max-aspect-ratio: 1/1) {
    .ratio-responsive-center {
        left: 50% !important;
    }
}

.ratio-responsive-appear {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease-in-out;
}

@media (max-aspect-ratio: 1/1) {
    .ratio-responsive-appear {
        opacity: 0;
        pointer-events: none;
    }
}

.pointer-none {
    pointer-events: none;
}

.appear {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

    .appear.visible {
        opacity: 1;
        pointer-events: auto;
    }


/* Стилизация ползунка */
.form-range::-webkit-slider-thumb {
    background-color: silver; /* Цвет ползунка */
}

.css3d {
    
}