body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Stack header and forms vertically */
  color: #2b4719 ;
  background-color: #44672d;
}

.home-container {
  margin: 0 auto;
  padding: 2rem;
  background-color: #f4f7e1;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: flex;
  height: 110px;
  align-items: center; /* Align items vertically in the center */
}

.home-container img {
  margin-right: 150px; /* Add some space between the image and the text */
}

#register-login {
  display: flex;
  justify-content: center;
  align-items: center;
}

#registrationForm, #loginForm {
  margin: 5px;
  padding: 20px;
  border: 3px solid #333;
  border-radius: 5px;
  text-align: center;
  height: 420px;
  background-color: #bdd09e;
  margin-top: 20px;
}

#registrationForm {
  display: grid; 
  place-items: center;
  grid-template-columns: 0.7fr 1.3fr; 
  grid-template-rows: 0.4fr 2.2fr 0.4fr;
  gap: 0px 20px; 
  grid-template-areas: 
    "Title Title"
    "Form Checkboxes"
    "Submit Submit"; 
  width: 450px;
}
.Title { 
  grid-area: Title; 
}

.Submit { 
  grid-area: Submit; 
  margin-bottom: 20px;
}

.Form { 
  grid-area: Form; 
}

.Checkboxes { 
  grid-area: Checkboxes; 
}

.labelReg{
  float:left;
  text-align: left;
}

#main-register input{
  width:170px;
  margin-bottom:10px;
  float: left;
}

#interests {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}

#interests label {
  display: flex;
  align-items: center;
}

#interestsPrompt {
  margin-bottom: 10px;
}

#interests input[type="checkbox"] {
  margin-right: 15px;
}

#registerButton, #loginButton, #resetPasswordButton {
  background-color: #ddd;
  color:#2b4719;
  border-style: solid;
  border-color: black;
  border-radius: 10px;
  text-align: center;
  padding: 5px 10px 5px 10px;
}

#loginForm {
  width: 200px;
}

#loginForm input {
  margin-bottom: 10px;
}

#passwordRequirements, #passwordStrength {
  font-size: 13px;
}

#passwordRequirements ul {
  text-align: left;
}

#passwordRequirements p {
  font-size: 16px; 
  margin-left: 20px;
}

#resetPasswordForm {
  margin-top: 100px;
}

.privacyButton {
  background-color: #0b4126;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-right: 100px;
  font-size: 16px;
  margin-top: 10px;
}

.continueButton {
  background-color: #0b4126;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  margin-top: 10px;;
}

#message {
  color: white;
}