/* styles-responsive.css */

/* General adjustments for all screen sizes */
.max-w-lg {
  max-width: 32rem; /* Adjust max width for all screen sizes */
}

.p-6 {
  padding: 2rem; /* Increase padding for better spacing */
}

.text-4xl {
  font-size: 2.5rem; /* Increase font size for headings */
}

.text-2xl {
  font-size: 1.75rem; /* Increase font size for labels */
}

.mb-4 {
  margin-bottom: 1.5rem; /* Adjust margin bottom for input sections */
}

.input-field,
.btn-primary {
  width: calc(100% - 1rem); /* Make input fields and buttons full width */
}

.mt-6,
.mt-4 {
  margin-top: 2rem; /* Adjust margin top for sections */
}

.text-xl {
  font-size: 1.5rem; /* Adjust font size for list items */
}

.mt-8 {
  margin-top: 2rem; /* Increase margin top for the container */
}

.ml-2 {
  margin-left: 0.75rem; /* Adjust margin left for buttons */
}

.clipboard-icon {
  font-size: 2rem; /* Increase font size for clipboard icon */
}

.error-message {
  font-size: 1rem; /* Adjust font size for error messages */
}

/* Adjustments for small screens */
@media (max-width: 640px) {
  .max-w-lg {
    max-width: 90%; /* Adjust max width for small screens */
  }

  .p-6 {
    padding: 1.5rem; /* Increase padding for better spacing */
  }

  .text-4xl {
    font-size: 2rem; /* Reduce font size for headings */
  }

  .text-2xl {
    font-size: 1.5rem; /* Reduce font size for labels */
  }

  .mb-4 {
    margin-bottom: 1rem; /* Adjust margin bottom for input sections */
  }

  .input-field,
  .btn-primary {
    width: 100%; /* Make input fields and buttons full width */
  }

  .mt-6,
  .mt-4 {
    margin-top: 1.5rem; /* Adjust margin top for sections */
  }

  .text-xl {
    font-size: 1.25rem; /* Adjust font size for list items */
  }

  .mt-8 {
    margin-top: 1rem; /* Reduce margin top for the container */
  }

  .ml-2 {
    margin-left: 0.5rem; /* Adjust margin left for buttons */
  }

  .clipboard-icon {
    font-size: 1.5rem; /* Adjust font size for clipboard icon */
  }

  .error-message {
    font-size: 0.875rem; /* Adjust font size for error messages */
  }
}

/* Adjustments for large screens */
@media (min-width: 1024px) {
  .max-w-lg {
    max-width: 36rem; /* Increase max width for large screens */
  }

  .p-6 {
    padding: 3rem; /* Increase padding for better spacing */
  }

  .text-4xl {
    font-size: 3rem; /* Increase font size for headings */
  }

  .text-2xl {
    font-size: 2rem; /* Increase font size for labels */
  }

  .mb-4 {
    margin-bottom: 2rem; /* Increase margin bottom for input sections */
  }

  .input-field,
  .btn-primary {
    width: calc(100% - 1.5rem); /* Make input fields and buttons full width */
  }

  .mt-6,
  .mt-4 {
    margin-top: 3rem; /* Increase margin top for sections */
  }

  .text-xl {
    font-size: 1.75rem; /* Increase font size for list items */
  }

  .mt-8 {
    margin-top: 3rem; /* Increase margin top for the container */
  }

  .ml-2 {
    margin-left: 1rem; /* Increase margin left for buttons */
  }

  .clipboard-icon {
    font-size: 2.5rem; /* Increase font size for clipboard icon */
  }

  .error-message {
    font-size: 1.125rem; /* Adjust font size for error messages */
  }
}