#sign-in-screen {
  height: 100vh;
  width: 100%; /* Inherit #full-screens’s full width */
  max-width: calc(var(--screenScalingFactor) * 950px); /* Clamp at 700px scaled */
  margin: 0 auto; /* Center within #full-screens */
}

#sign-in-wrapper {
  height: 100vh;
  width: 100%;
  display: grid;
  justify-items: center;
  align-items: end;
  grid-template-columns: 11.77fr 76.46fr 11.77fr;
  grid-template-rows: 33.25fr 8.96fr 27.43fr 2.57fr 3.33fr 24.46fr;
}

#sign-in-logo {
  grid-row: 1;
  grid-column: 2;
  height: calc(var(--screenScalingFactor) * 524px); 
  width: auto;
  object-fit: contain;
}

#sign-in-header-text {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

#email-and-password-form {
  height: 100%;
  width: 100%;
  grid-column: 2;
  grid-row: 3;
  display: grid;
  align-items: end;
  grid-template-rows: auto auto 1fr auto;
}

#email-address-container {
  grid-row: 1;
  width: 100%;
  margin-top: 4%;
  margin-bottom: 4%;
}

#email-address,
#user-password,
#forgot-password-email-address {
  font-size: calc(var(--screenScalingFactor) * 40px);
}

#user-password-container {
  grid-row: 2;
  width: 100%;
}

#email-address-icon,
#user-password-lock-icon,
#user-password-eye-icon,
#forgot-password-email-address-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#email-address-icon,
#user-password-lock-icon,
#forgot-password-email-address-icon {  
  left: 5%; /* Adjust based on your design */
  width: auto;
  pointer-events: none; /* Makes sure clicks go through to the input for lock and email icons */
}
  
#user-password-eye-icon {
  right: 5%; /* Adjust based on your design */
  cursor: pointer;
  pointer-events: auto; /* Allow clicks on the eye icon */
}
  
/* Placeholder styling */
::placeholder {
  color: #aaa;
  opacity: 1; /* Firefox */
}

#user-sign-in-button {
  grid-row: 4;
  justify-self: center;
  height: calc(var(--screenScalingFactor) * 150px);
  width: 100%;
  border-radius: 2.75vh;
  font-size: calc(var(--screenScalingFactor) * 42px);
}

#sign-in-forgot-password-text {
  grid-row: 4;
  grid-column: 2;
  color: var(--secondary-text-color);
  font-size: calc(var(--screenScalingFactor) * 33px);
}

#sign-in-wrapper > p:last-child {
  grid-column: 2;
  grid-row: 5;
  display: inline-flex;
  align-items: baseline;
  font-size: calc(var(--screenScalingFactor) * 34px);
}

#sign-up-text-prefix {
  color: var(--text-color);
}

#sign-up-text-link {
  color: var(--secondary-text-color);
  margin-left: calc(var(--screenScalingFactor) * 10px);
}

#sign-up-screen {
  height: 100vh;
  width: 100%; /* Inherit #full-screens’s full width */
  max-width: calc(var(--screenScalingFactor) * 950px); /* Clamp at 700px scaled */
  margin: 0 auto; /* Center within #full-screens */
}

#sign-up-wrapper {
  height: 100vh;
  width: 100%;
  display: grid;
  justify-items: center;
  grid-template-columns: 11.77fr 76.46fr 11.77fr;
  grid-template-rows: 33.25fr 8.96fr 2fr 37.43fr 2fr 2.57fr 5fr 2fr 6.79fr;
}

#sign-up-logo {
  grid-row: 1;
  grid-column: 2;
  height: calc(var(--screenScalingFactor) * 524px); 
  width: auto;
  object-fit: contain;
  align-self: end;
}

#sign-up-header-text {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: end;
}

#sign-up-content {
  grid-column: 2;
  grid-row: 4;
  width: 100%; /* Ensure it fills the column for proper text wrapping */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Left-align the content (matches header); */
  justify-content: flex-start; /* Start stacking from the top */
  align-self: start; /* Ensure content starts at the top of row */
  gap: 1rem; /* Add space between paragraphs/list for readability */
}

.sign-up-text {
  margin: 0; /* Reset margins for clean stacking */
}

.sign-up-text ul {
  text-align: left; /* Align bullets and text to the left */
  padding-left: 1.5rem; /* Standard bullet indent */
  margin: 0; /* Reset margins */
}

#sign-up-button {
  grid-column: 2;
  grid-row: 6;
  justify-self: center;
  height: calc(var(--screenScalingFactor) * 150px);
  width: 100%;
  border-radius: 2.75vh;
  font-size: calc(var(--screenScalingFactor) * 42px);
}

#sign-up-return-text {
  grid-row: 8;
  grid-column: 2;
  color: var(--secondary-text-color);
  font-size: calc(var(--screenScalingFactor) * 33px);
}

#forgot-password-screen {
  height: 100vh;
}

#forgot-password-wrapper {
  height: 100vh;
  display: grid;
  justify-items: center;
  align-items: end;
  grid-template-columns: 11.77fr 76.46fr 11.77fr;
  grid-template-rows: 33.25fr 8.96fr 27.43fr 2.57fr 3.33fr 24.46fr;
}

#forgot-password-logo {
  grid-row: 1;
  grid-column: 2;
  height: calc(var(--screenScalingFactor) * 524px); 
  width: auto;
  object-fit: contain;
}

#forgot-password-header-text {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

#forgot-password-form {
  height: 100%;
  width: 100%;
  grid-column: 2;
  grid-row: 3;
  display: grid;
  align-items: end;
  grid-template-rows: 25.10fr 27.88fr 47.02fr;
  grid-template-columns: 100fr;
}

#forgot-password-container {
  grid-row: 1;
  width: 100%;
}

#forgot-password-text {
  grid-row: 2;
  align-self: center;
  text-align: center;
}

#forgot-password-submit-button {
  grid-row: 3;
  justify-self: center;
  align-self: center;
  height: calc(var(--screenScalingFactor) * 150px);
  width: 100%;
  border-radius: 2.75vh;
  font-size: calc(var(--screenScalingFactor) * 42px);
}

#forgot-password-return-to-sign-in-text {
  grid-row: 4;
  grid-column: 2;
  color: var(--secondary-text-color);
  font-size: calc(var(--screenScalingFactor) * 31.4px);
}

#splash-screen {
  height: 100vh;
}

#splash-wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 50% 25% 25%;
  grid-template-columns: 100%;
}

#splash-logo {
  grid-row: 1;
  justify-self: center;
  align-self: end;
	height: 30%;
	width: auto;
	animation: splash-logo linear 2s infinite;
}

@keyframes splash-logo {
  0% {
    transform: scale(1);
    opacity: .0;
  }
  25% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

#splash-loading-text {
  font-size: calc(var(--screenScalingFactor) * 40px);
  grid-row: 2;
  justify-self: center;
  align-self: end;
  color: var(--accent-color);
  animation: splash-loading-text linear 3s infinite;
}

@keyframes splash-loading-text {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}