.square-row {
    display: flex;
}
body{
    background-color:  rgb(70, 70, 124);
}

.square {
    width: 32px;
    height: 32px;
     margin: 3px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.square_rule{
    width: 30px;
    height: 30px;
    margin: 3px;
    border-radius: 5px;
    cursor: pointer;

    display: flex;
    justify-content: center; 
    align-items: center;
}
.square.selected {
    transform: scale(1.1);
}

#canvasContainer {
    background-color: rgb(180, 180, 214);
    height: 100%;
    position: relative;
}

#highlight {
    position: absolute;
    pointer-events: none;
    border: 2px solid red;
    box-sizing: border-box;
}
#infoPanel{
    background-color: rgb(180, 180, 214);
    bottom: 0;
    right: 0;
    width: 300px;
    height: 100%;
    border-radius: 10px;
    position: absolute;
}
#myCanvas{
    margin: auto;
    display: block;
}
.text{
    font-size: 40px;
    margin: auto;
    color: rgb(0, 0, 0);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
.littleText{
    margin: auto;
    font-size: 20px;
    color: rgb(56, 74, 97);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

@media (max-width: 768px) { /* Примерная ширина для перехода на мобильный дизайн */
    #canvasContainer {
      flex-direction: column; /* Меняем направление для мобильных устройств */
    }
  
    #infoPanel{
      width: 100%; /* Занимаем всю ширину на мобильных устройствах */
      height: 350px; /* Высота панели на мобильных устройствах */
      position: absolute;
      bottom: 0;
    }
  }