@import '../public/common.css';
@import '../public/header-footer.css';

header {
  z-index:2;
}

section {
  height:calc(100vh - 64px);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:1rem 0 1rem 0;
}

.wrapper-whole {
  position:relative;
}

.graphic-1,
.graphic-2 {
  position:absolute;
  width:150px;
}

.graphic-1 {
  top:-4rem;
  left:-4rem;
  animation:pulse 10s infinite linear;
}

.graphic-2 {
  bottom:-6rem;
  right:-6rem;
  width:200px;
  animation:spin 30s infinite linear;
}

.container-form {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:1.5rem 2rem;
  background-color:rgba(255, 255, 255, 0.6);
  border-radius:15px;
  gap:1rem;
}

.wrapper-heading h2 {
  text-align:center;
  font-size:2rem;
  font-family:var(--font-crimson);
  font-style:italic;
  color:var(--col-text-heading);
  padding-bottom:.5rem;
}

.wrapper-heading h3 {
  font-size:1rem;
  font-weight:400;
}

.redirect-signup {
  color:var(--col-text-heading);
  font-weight:500;
}
.redirect-signup:hover {
  text-decoration:underline;
}

.error-box {
  max-width:350px;
}

.error-message {
  color:red;
  text-align:center;
  font-size:1.2rem;
  line-height:1.3rem;
}

form {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1rem;
}

form input {
  width:max(300px, 40vw);
  max-width:500px;
  min-height:32px;
  font-size:1.2rem;
  border:1px solid rgba(128, 128, 128, 0.5);
  border-radius:15px;
  padding:.5rem 2.3rem .5rem .5rem;
  outline:none;
}

.wrapper-names {
  width:max(300px, 40vw);
  max-width:500px;
  display:flex;
  gap:.5rem;
}

form input[type="email"] {
  padding:.5rem;
}

.input-name,
.input-username {
  width:100%;
  padding:.5rem
}

.wrapper-password {
  position:relative;
}

.wrapper-password i {
  width:2.2rem;
  position:absolute;
  right:.3rem;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.wrapper-password i img:hover {
  background-color:rgba(151, 151, 151, 0.2);
}

.wrapper-password i img {
  height:1.6rem;
  width:1.6rem;
  border-radius:calc(1.6rem / 2);
}

form button.btn {
  font-size:1.2rem;
  padding:.2rem 1rem;
}