header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 3rem;
}

header > img {
  width: 4rem;
  height: 4rem;
}

button {
  width: auto;
  min-width: clamp(160px, 18vw, 220px);
  margin-top: 12px;
  margin-bottom: 6px;
  padding: clamp(1rem, 1.2vw, 1.25rem) clamp(1.2rem, 1.5vw, 1.5rem);
  font-size: clamp(1.3rem, 1.4vw, 1.8rem);
  white-space: nowrap;
  overflow: visible;
  text-overflow: initial;
  background-color: #AF7F42;
  color: #141212;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}

a {
    align-self: center;
    text-decoration: none;
    color: #7A7979;
    font-size: 25px;
}

form {
  margin: auto;
  background-color: #141212;
  padding: 6rem;
  padding-top: 2rem;
  width: 28rem;
  gap: 20px;
  border: 3px solid #AF7F42;
  border-radius: 16px;
}

h2 {
  text-align: center;
  color: #D5C7AE;
  font-size: clamp(1.8rem, 2vw, 2.5rem);
  margin-bottom: 2rem;
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #AF7F42;
  border-radius: clamp(10px, 1vw, 12px);
  background-color: #141212;
}

input {
  width: 100%;
  height: 3.5rem;
  border: none;
  background: transparent;
  padding-left: 3.5rem;
  padding-right: 1.5rem;
  color: #D5C7AE;
  outline: none;
  font-size: clamp(1.1rem, 1.2vw, 1.4rem);
}

input::placeholder {
  color: #888;
}

.error-message {
    color: #C83E4D;
}

/* Icons */
.mail-icon {
  color: #D5C7AE;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 28px;
  height: 28px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7.175q.125 0 .263-.038t.262-.112L19.6 8.25q.2-.125.3-.312t.1-.413q0-.5-.425-.75T18.7 6.8L12 11L5.3 6.8q-.45-.275-.875-.012T4 7.525q0 .25.1.438t.3.287l7.075 4.425q.125.075.263.113t.262.037'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.lock-icon {
  color: #D5C7AE;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 28px;
  height: 28px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 22V8h3V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h3v14zm8-5q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.person-icon {
  color: #D5C7AE;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 28px;
  height: 28px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12q-1.65 0-2.825-1.175T8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12m-8 8v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}