main {
  height: 100vh;
  width: 100%;
  -webkit-margin-before: 2rem;
  margin-block-start: 2rem;
}

.logo-mobile {
  display: none;
  position: absolute;
  top: 15px;
  left: 15px;
  width: 5rem;
  z-index: 100;
  --translateX: -50px;
}

main form {
  padding: 1rem;
  --gap: 2.6rem;
  color: var(--text-color);
  width: 28rem;
  -webkit-margin-before: auto;
  margin-block-start: auto;
}

main form h1 {
  font-size: clamp(1rem, 50vh, 2.525rem);
  line-height: 1.1;
  -webkit-margin-before: 0.67em;
  margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
  margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
  margin-inline-start: 0px;
  -webkit-margin-end: 0px;
  margin-inline-end: 0px;
}

form .input-group {
  width: 25rem;
  height: 3.5rem;
  border-radius: 0.625rem;
  border: 2px solid #bebebf;
  --font-size: 1.2rem;
  --gap: 0;
  /* background-color: #e8f0fe; */
  position: relative;
}
.input-group input {
  border-radius: inherit;
  height: 100%;
  background-color: transparent;
  color: var(--text-color);
}
.input-group:hover {
  border: 2px solid #1a1aeb;
}
.input-group:focus-within {
  border: 2px solid #1a1aeb;
}

.input-group label {
  position: absolute;
  transform: translateY(-1.5rem);
}

.submit:hover {
  --btn-background: #3c7eff;
}

.submit:active {
  --btn-background: #538af7;
}

textarea {
  color: white;
}