/* DO NOT EDIT BELOW THIS LINE */
/* I apologize but my responsive styling keep messing up and i think this may fix it */

/* General layout adjustments */
html, body {
  height: 100%;
}

body {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center-align elements */
  justify-content: center;
}

/* Search container */
#search {
  text-align: center;
  margin: 1em auto; /* Add spacing around the search container */
  width: 100%; /* Ensure it spans the full width */
}

/* Button styles */
button {
  display: inline-block;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
  color: #757575;
  cursor: pointer; /* Change to pointer for better UX */
  font-family: Arial, sans-serif;
  font-size: 1em;
  font-weight: bold;
  padding: 0.5em 1em;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease; /* Add hover effect */
}

button:hover {
  background-color: #e0e0e0; /* Slightly darker background on hover */
  color: #333; /* Darker text color on hover */
}

/* Input field styles */
input {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC) no-repeat center right;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  border: 1px solid #aaa;
  display: block;
  padding: 1em;
  margin: 1em auto; /* Adjust spacing for better alignment */
  outline: none;
  line-height: 2em;
  width: 90%; /* Adjust width for smaller screens */
  max-width: 400px; /* Prevent input from growing too large */
}

/* Responsive adjustments */
@media (max-width: 480px) {
  /* Button styles */
  button {
    font-size: 0.7em; /* Slightly smaller font size for smaller screens */
    padding: 0.3em 0.6em; /* Reduce padding for compact buttons */
    max-width: 150px; /* Prevent buttons from growing too large */
    margin: 0.3em auto; /* Reduce vertical spacing */
  }

  /* Input field styles */
  input {
    width: 90%; /* Slightly reduce width for better alignment */
    padding: 0.5em; /* Reduce padding for a more compact input field */
    margin: 0.3em auto; /* Reduce vertical spacing */
    font-size: 0.8em; /* Keep font size smaller for smaller screens */
    max-width: 350px; /* Prevent the input field from growing too large */
  }

  /* Search container */
  #search {
    margin: 0.3em auto; /* Reduce vertical spacing around the search container */
    width: 100%; /* Ensure it spans the full width */
  }
}