@media screen and (width <= 1200px) {
    #main {
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;
    }

    #game-field {
        width: 100%;
        height: 65%;
        flex-direction: column;
        justify-content: space-between;
    }

    #game-info {
        width: 100%;
        height: 20%;
        flex-direction: row;
    }

    #cards {
        width: 100%;
        height: 20%;
        flex-direction: row;
    }

    #left-balls-table img:hover {
        transform: scale(1, 1);
    }

    #burger-toggle {
        display: flex;
    }

    #burger-menu {
        top: 100%;
        left: 0;
        flex-direction: column;
    }

    #burger-menu li {
        height: 0;
        background-color: var(--header-color);
        transition: height var(--time-of-highlighting);
    }

    /* cancel hover on the phone */
    #burger-toggle:hover #burger-button {
        transform: rotate(0deg);
    }

    #burger-button-toggle:checked ~ #burger-toggle #burger-button {
        transform: rotate(90deg);
    }

    #burger-button-toggle:checked ~ #burger-menu li {
        height: 12vh; /* 100% = CRASH - size of child mustn`t depend on parent size, size has to be known in advance */
        transition: height var(--time-of-highlighting); 
    }

    #burger-button-toggle:checked ~ #burger-menu li:last-child {
        border-end-start-radius: 12%;
        border-end-end-radius: 12%;
    } 

    .slide-window {
        width: 70%;
    }

    #left-balls {
        width: 50%;
    }
    
    .message {
        font-size: 12pt;
    }
}