body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  font-size: 2em;
  color: #333;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  /* text-align: center; */
}

button {
  background-color: #333;
  color: #fff;
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: fit-content;
}

input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  /* margin-top: 5px; */
  /* width: 100%; */
  box-sizing: border-box;
}

input[type="text"]::placeholder {
  color: #ccc;
}

#inputs {
  display: flex;
  flex-direction: column;
  width: fit-content;
  flex-direction: column;
  padding: 10px;
  gap: 5px;
}

.favicons-container {
  display: flex;
  flex-wrap: wrap;
  width: 13rem;
  gap: 0.5rem;
  padding-top: 5px;
}

.favicon {
  border-radius: 0.25rem;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.favicon:hover {
  background-color: rgb(203 213 225);
  transform: translate(0, -0.25rem);
}

.colors-container {
  display: flex;
  flex-wrap: wrap;
  width: 13rem;
  gap: 0.5rem;
  padding-top: 5px;
}

.color {
  border-radius: 0.25rem;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.color:hover {
  transform: translate(0, -0.25rem);
}