html, body {
    height: 100%;
    margin: 0;
}
/*делаем чёрный фон и выравниваем всё по центру*/
.bodyDark {
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*толщина холста — 1 пиксель, белый цвет*/
.canvasDark {
  border: 1px solid white;
  background: black;
}

.checkDark {
  color: white;
}

/*делаем белый фон и выравниваем всё по центру*/
.bodyLight {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*толщина холста — 1 пиксель, белый цвет*/
.canvasLight {
  border: 1px solid rgb(215, 96, 96);
  background: white;
}

.checkLight {
  color: black;
}

.hidden {
  display: none;
}

  
.buttonAll {
    display: flex;
    flex-direction: column; 
    width: 180px;
    margin-right:30px;
    border: 5px solid rgb(63, 62, 62);
    background-color: rgb(63, 62, 62);
}

.button {
    height: 33.3%;
    border: 1px solid rgb(63, 62, 62);
    color: white;
    text-align: center;
    font-size: 35px;
    box-sizing: border-box;
}

.buttonStop {
    width: 100%;
    color: white;
    background-color: rgb(63, 62, 62);
    font-size: 35px;
}

.red {
    background-color: #851c1c;
}

.green {
    background-color: #25c735;
}