style.css

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

.main-container {
  min-height: 100vh;
  display: grid;
  align-items: start;
}
/* register form */
.register-form-container {
  width: 90%;
  max-width: 500px;
  margin: 5rem auto;
  display: grid;
  gap: 1.5rem;
  padding: 1.3rem;
  border-radius: 5px;
  box-shadow: 3px 3px 10px -1px rgb(155, 155, 155);
}

.register-form-header {
  font-weight: 600;
  color: rgb(42, 42, 126);
  font-size: 1.45rem;
}

.register-form {
  display: grid;
  gap: 1.5rem;
}

.register-form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  letter-spacing: 0.05rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: rgb(39, 39, 39);
  border-radius: 5px;
  border: 1px solid rgb(170, 170, 170);
}

.register-form-input:focus {
  outline: 3px solid rgb(146, 216, 243);
  border: 1px solid transparent
}

.form-register-input-error {
  color: red;
  letter-spacing: 0.05rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.register-form-submit-btn {
  padding: 0.9rem 1rem;
  letter-spacing: 0.05rem;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 5px;
  background: rgb(24, 81, 238);
  border: none;
  color: white;
}

.register-form-already-registered {
  letter-spacing: 0.05rem;
  color: rgb(37, 37, 37);
  display: flex;
  align-items: center;
  gap: 0.5rem
}

.register-form-already-registered > a {
  color: rgb(255, 17, 0);
  font-weight: 600;
}