/* General styling for the operation container */
        .operation {
            text-align: left;
            border: 2px solid #333;
            padding: 20px;
            border-radius: 8px;
            background-color: #f4f4f4;
            margin: 10px auto;
            width: 100%; /* Make the width 100% for all screen sizes */
            max-width: 100%; /* Ensure the container does not exceed the screen width */
            box-sizing: border-box; /* Include padding in width calculation */
            transition: all 0.3s ease; /* Smooth transition for resizing */
        }

        /* Make the container take more width on larger screens (desktop) */
        @media screen and (min-width: 1024px) {
            .operation {
                padding: 20px 40px; /* Add more padding on desktops */
            }
        }

        /* Adjust for tablets and smaller devices */
        @media screen and (max-width: 1024px) {
            .operation {
                padding: 15px 30px; /* Adjust padding for tablet sizes */
            }
        }

        /* Adjust for mobile devices */
        @media screen and (max-width: 600px) {
            .operation {
                padding: 15px; /* Adjust padding for small screens */
            }
        }
        
        
        
        
        .example {
            margin-bottom: 10px;
            font-size: 18px;
        }
        .fraction-bar {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }
        .fraction-bar div {
            width: 20px;
            height: 30px;
            border: 1px solid #333;
            background-color: #3498db;
            margin-right: 2px;
        }
        .fraction-bar .empty {
            background-color: #f4f4f4;
        }
        .mixed-bar {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }
        .mixed-bar .whole {
            width: 40px;
            height: 30px;
            background-color: #2ecc71;
            margin-right: 5px;
        }
        .mixed-bar .fraction-part {
            width: 20px;
            height: 30px;
            background-color: #3498db;
            margin-right: 2px;
        }
        
        
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        
        
            .box {
            width: 45%; /* Adjust the width to control the size of the containers - side by side container */
            padding: 20px;
            background-color: lightblue;
            border: 1px solid #333;
            margin: 10px;
        }
        
        b {
      color: #34495e;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }
    th, td {
      border: 1px solid #999;
      padding: 8px;
      text-align: center;
    }