html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #fee0bd; /* Background color */
    cursor: url('assets/farmer-standing-right.png'), 16, 24, auto;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  canvas {
    display: block;
  }

  /* Define styles for the input field */
  .input-field {
    width: 145px;
    max-width: calc(100vw / 4 - 20px);
    height: 25px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s; /* Smooth transition for border color change */
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  /* Change the border color on focus */
  .input-field:focus {
    border-color: #a2e29e; /* Custom focus color */
    outline: none; /* Remove the default blue outline */
    box-shadow: 0 0 5px rgba(162, 226, 158, 0.5); /* Custom shadow effect */
  }

  /* Text selection specifically within input fields */
input::selection {
    background-color: #c6e6bc; /* Background color for text selection inside inputs */
  }

  /* WebKit browsers use a different pseudo-element */
  input::-moz-selection { /* Firefox-specific */
    background-color: #c6e6bc;
  }

  input::-webkit-selection { /* Safari/Chrome-specific */
    background-color: #c6e6bc;
  }

  .field-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center grid horizontally */
    gap: 40px 10px; /* Space between fields */
    margin: 20px auto; /* Center the grid with some margin */
    width: fit-content; /* Fit content width */
    max-width: 100vw;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .field {
    display: inline-block; /* Allow fields to line up horizontally */
  }

  /* Mobile adjustments */
  @media (max-width: 600px) {
    .field-grid {
      gap: 20px 6px;
      margin: 10px auto;
    }
    .input-field {
      width: 80px;
      height: 22px;
      padding: 2px;
    }
  }