body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #636363;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

:root {
  --input-hover: rgba(253, 200, 43, 0.585);
  --bg-button: rgb(253, 201, 43);
}

input {
  background-color: #2e2e2e;
  color: #ffffff;
  border: 1px solid #555555;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  width: 200px;
  transition-duration: 0.5s;
}

input:hover {
  width: 250px;
  border-color: var(--input-hover);
}

input::placeholder {
  color: #aaaaaa;
}

input:focus {
  border-color: var(--bg-button);
  box-shadow: 0 0 5px var(--bg-button);
  width: 400px;
}

input:disabled {
  background-color: #444444;
  color: #777777;
  border-color: #666666;
  cursor: not-allowed;
}

button {
  background-color: var(--bg-button);
  color: #1e1e1e;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  color: #fff;
}

button:hover {
  background-color: #e5b700;
}

button:active {
  transform: scale(0.95);
}

.block {
  width: 500px;
  height: 350px;
  background-color: #1e1e1e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Add space between inputs and button */
}

#error {
  color: red;
}