body {
  display: flex; flex-direction: column;
  height: 100vh;
}
/* 
nav {
  display: none;
} */

#sign-in-main {
  height: 100%; display: flex; flex-direction: row;
  overflow: hidden;
}

#sign-in-container {
  width: 60%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3rem;
  background-color: var(--l0);
  padding: 2rem 4rem;
  font-family: 'Outfit';
  flex-shrink: 0;
}

#sign-in-form {
  display: flex; flex-direction: column;
  gap: 2rem;
  align-items: strech;
}


.sign-in-form-section {
  display: flex; flex-direction: column;
  gap: .75rem;
}

.sign-in-form-section label {
  color: var(--d1);
}

.sign-in-form-section input {
  font-size: 1.25rem;
  border: var(--l2) 1px solid;
  border-radius: var(--c2);
  padding: 1rem;
}

#sign-in-form div input::placeholder {
  color: var(--l2);
}

#sign-in-submit {
  border-radius: var(--c2); border: none;
  color: var(--d2);
  background-color: var(--p1);
  filter: drop-shadow(0 .4rem var(--p2));
  align-self: flex-end;
  cursor: pointer;
  font-family: var(--outfit); font-size: 1.25rem;
  width: 100%; height: 3rem;
  margin-top: 2rem;
  transition: .25s ease;
}

#sign-in-submit:hover {
    filter: drop-shadow(0 .2rem var(--p2));
    transform: translateY(.2rem);
}

#sign-in-name-section, #sign-in-password-section {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, min-content);
  grid-auto-flow: column;
  gap: .75rem;
  width: 100%;
  flex: 1;
}

#sign-in-name-section input, #sign-in-password-section input {
  /* width: auto; */
  min-width: 0;
  width: 100%;
}

#sign-in-img {
  /* filter: blur(.1rem); */
}

/* - - - - - - - - - - - - - - - - - - - - */