style.css

body {
  text-align: center;
  margin-top: 50px;
  animation: gradientAnimation 10s linear infinite;
  font-family: "Roboto", sans-serif;
}

h1 {
  margin-bottom: 20px;
}

@keyframes gradientAnimation {
  0% { background: linear-gradient(to right, #ff8888, #88ff88); }
  25% { background: linear-gradient(to right, #88ff88, #8888ff); }
  50% { background: linear-gradient(to right, #8888ff, #ffff88); }
  75% { background: linear-gradient(to right, #ffff88, #ff88ff); }
  100% { background: linear-gradient(to right, #ff88ff, #88ffff); }
}

.signup-box {
  width: 360px;
  height: 620px;
  margin: auto;
  background-color: white;
  border-radius: 3px;
}

.login-box {
  width: 360px;
  height: 280px;
  margin: auto;
  border-radius: 3px;
  background-color: white;
}

h1 {
  text-align: center;
  padding-top: 15px;
}

h4 {
  text-align: center;
}

form {
  width: 300px;
  margin-left: 20px;
}

form label {
  display: flex;
  margin-top: 20px;
  font-size: 18px;
}

form input {
  width: 100%;
  padding: 7px;
  border: none;
  border: 1px solid gray;
  border-radius: 6px;
  outline: none;
}
input[type="button"] {
  width: 320px;
  height: 35px;
  margin-top: 20px;
  border: none;
  background-color: #49c1a2;
  color: white;
  font-size: 18px;
}
p {
  text-align: center;
  padding-top: 20px;
  font-size: 15px;
}
.para-2 {
  text-align: center;
  color: white;
  font-size: 15px;
  margin-top: -10px;
}
.para-2 a {
  color: #49c1a2;
}