.controls select {padding:5px;margin-right:10px;font-family:Montserrat}
.controls {margin:0 auto;}
.controls button {padding: 10px 20px;background:#333;color:#fff;border-radius:10px;font-family:montserrat}

body {
            font-family: Montserrat, sans-serif;
            text-align: center;
            background-color: #fff;
        }

        h1 {
            margin-top: 20px;
        }

        .controls {
            margin: 20px;
     
        }

    .grid-background {
    display: grid;
    width: calc(19 * 40px);
    margin: 0 auto;
    grid-template-columns: repeat(19, 40px);
    grid-template-rows: repeat(24, 40px);
    /* Remove horizontal lines from background */
    background-color: white;
}

.problem-box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    height: 40px;
    width: 40px;
    border: 1px solid lightgray; /* Borders all around create grid lines */
    box-sizing: border-box;
}

      
        .operator-box {
            color: red;
            font-weight: bold;
            font-size: 30px;
        }

        /* Highlight the boxes in the carrying row (2 rows above the operator) */
        .carrying-row {
            background-color: #eee !important;
        }

        /* Heavier border for the answer row */
        .answer-row {
            border-top: 2px solid black;
            border-bottom: 2px solid black;
        }

        /* Print-specific styles */
        @media print {
          .controls {display:none}
          }
          @media (max-width: 768px) {
              
              
  .controls {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .controls select,
  .controls button {
    margin: 5px 0;
    width: 90%;
    max-width: 300px;
  }
}
@media (max-width: 767px) {
    .grid-background {
        width: calc(19 * 32px); /* 19 columns × 32px each */
        grid-template-columns: repeat(19, 32px);
        grid-template-rows: repeat(24, 32px);
        background-size: 100% 32px;
    }

    .problem-box {
        width: 32px;
        height: 32px;
        font-size: 18px; /* smaller font for smaller boxes */
    }
}