.login {
  padding-bottom: 80px;
  padding-top: 73px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 70px;
  align-items: center;
  width: 100%;
}

.login-title {
  font-family: var(--third-family);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: 0.03em;
  color: #000;
}

form {
  display: flex;
  gap: 28px;
  flex-direction: column;
  width: 100%;
}

.field-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.field-label {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.8);
}

.field-input {
  border-radius: 20px;
  width: 100%;
  border: 2px solid #000;
  font-size: 18px;
  font-weight: 500;
  padding: 0 16px;
  height: 80px;
  background-color: #fff;
}

.login-message {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.8);
}

.login-message:hover {
  color: #808080;
}

.form-button {
  padding: 20px 60px;
  border-radius: 15px;
  background-color: #318161;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  width: fit-content;
  transition: color 0.5s, background-color 0.5s;
}

.form-button:hover {
  background-color: #000;
  color: #fff;
}

.login-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 1023px) {
  .form-button {
    padding: 16px 30px;
  }

  .login-title {
    font-size: 32px;
  }
}