style.css

:root {
  --background-image-light: linear-gradient(
    80deg,
    rgb(207, 232, 204) 0%,
    rgb(225, 214, 244) 100%
  );

  --background-image-dark: linear-gradient(
    rgb(245, 198, 137),
    rgb(195, 237, 186)
  );
  --text-color: rgb(46, 24, 73);
  --color: rgb(255, 249, 249);
  --accent-lime: rgb(251, 247, 216);
  --accent-green: rgb(226, 234, 181);
  --accent-purple: 46, 24, 73;
  --accent-yellow: rgb(244, 223, 171);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  max-width: 70%;
  margin: 5% auto;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: var(--text-color);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.header {
  display: contents;
}
.password {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: left;
  gap: 1.5rem;
  padding: 5rem 2rem 4rem 2rem;
  border-radius: 1rem;
  background-color: var(--accent-lime);
}

.login {
  border: none;
  border-radius: 2rem;
  padding: 0.8rem 10rem 0.8rem 1.5rem;
  margin-right: 0.8rem;
  color: rgba(var(--accent-purple), 0.5);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

.login::placeholder {
  color: rgba(var(--accent-purple), 0.3);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}
h1,
p {
  margin: 0 0 2rem 0;
}

h1 {
  color: var(--accent-yellow);
  font-size: 6rem;
}

.signin {
  background-color: var(--accent-green);
  border: none;
  border-radius: 0.4rem;
  padding: 0.8rem 2rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 600;
}

#password-visibility {
  font-size: 1.3rem;
  color: rgba(var(--accent-purple), 0.6);
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bear {
  max-width: 20%;
  margin: 2rem 0 -4rem 0;
  position: relative; /* Ensure the image is positioned relative to its container */
  z-index: 1;
  transition: 2s;
}