body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    /*overflow: hidden; /* обрезка всего что выходит за пределы body */
    display: flex;
    justify-content: center; /* Выравнивание по центру по горизонтали */
    align-items: center; /* Выравнивание по центру по вертикали */
}

#runButton {
    background-color: rgb(255, 255, 255);
    border: none;
    width: 100vw;
    height: 100vh;
    transition: all 0.3s ease; /*добавление плавной анимации*/
    font-size: 10vw;
}

#runButton:hover {
    color: red;
}

/* Стиль для элемента загрузки (полноэкранного оверлея) */
#loading {
    position: fixed; /* Фиксированное позиционирование (не скроллится) */
    top: 0; /* Прижато к верху */
    left: 0; /* Прижато к левому краю */
    width: 100vw; /* На всю ширину экрана */
    height: 100vh; /* На всю высоту экрана */
    background: rgba(255, 255, 255, 1); /* Белый полупрозрачный фон */
    display: flex; /* Используем flex-раскладку */
    justify-content: center; /* Выравнивание по центру по горизонтали */
    align-items: center; /* Выравнивание по центру по вертикали */
    flex-direction: column; /* Элементы внутри располагаются в колонку */
    z-index: 1000; /* Высокий z-index чтобы быть поверх других элементов */
}

#errorLoading {
    color: red;
    position: fixed; /* Фиксированное позиционирование (не скроллится) */
    top: 0; /* Прижато к верху */
    left: 0; /* Прижато к левому краю */
    width: 100vw; /* На всю ширину экрана */
    height: 100vh; /* На всю высоту экрана */
    background: rgba(255, 255, 255, 1); /* Белый полупрозрачный фон */
    display: none; /* Используем flex-раскладку */
    justify-content: center; /* Выравнивание по центру по горизонтали */
    align-items: center; /* Выравнивание по центру по вертикали */
    flex-direction: column; /* Элементы внутри располагаются в колонку */
    z-index: 1000; /* Высокий z-index чтобы быть поверх других элементов */
}

/* Стиль для анимированного спиннера (крутилки загрузки) */
#spinner {
    border: 5px solid #f3f3f3; /* Серая граница */
    border-top: 5px solid #3498db; /* Синяя граница только сверху */
    border-radius: 50%; /* Скругление углов делает элемент круглым */
    width: 50px; /* Ширина */
    height: 50px; /* Высота */
    animation: spin 1s linear infinite; /* Анимация spin длительностью 1 секунда, линейная, бесконечная */
}

/* Определение анимации spin */
@keyframes spin {
    0% { transform: rotate(0deg); } /* Начальное состояние - без вращения */
    100% { transform: rotate(360deg); } /* Конечное состояние - полный оборот */
}

/* Стиль для самого canvas элемента */
#appCanvas {
    display: block;
    margin: 0; /* внешние отступы */
    padding: 0; /* внутренние отступы */
    border: none; /* убрать границу (рамку) */
    width: 100vw; /* На всю ширину */
    height: 100vh; /* На всю высоту видимой области (viewport height) */
    display: none; /* Блочное отображение */
}