body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	font-family: 'Jost', sans-serif;
	background: linear-gradient(to bottom, #073b4a, #367180, #29d6a3);
  }
  
  .main {
	width: 500px; /* Adjusted width */
	height: 650px; /* Adjusted height */
	background: #e3eaeb;
	overflow: hidden;
	border-radius: 20px; /* Adjusted border radius */
	box-shadow: 5px 20px 50px #b2b2b2;
  }
  
  #chk {
	display: none;
  }
  
  .login {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 20px; /* Adjust margin as needed */
    border-radius: 5px; /* Add rounded corners to the login box */
	overflow-y: auto; /* Add vertical scrollbar if content exceeds height */
}

.login input[type="text"],
.login input[type="password"] {
    font-size: 1.2em; /* Increase the font size of the input text */
    /* Add any other styles you want for the input text */
}

  
  label {
	color: #073b4a;
	font-size: 2.3em;
	justify-content: center;
	display: flex;
	font-weight: bold;
	cursor: pointer;
	transition: .5s ease-in-out;
  }
  
  input {
	width: 70%; /* Adjusted input width */
	height: 30px; /* Adjusted input height */
	background: #fff;
	justify-content: center;
	display: flex;
	margin: 20px auto;
	padding: 10px;
	border: none;
	outline: none;
	border-radius: 5px;
  }
  
  button {
	width: 70%; /* Adjusted button width */
	height: 50px; /* Adjusted button height */
	margin: 10px auto;
	justify-content: center;
	display: block;
	color: #fff;
	background: #073b4a;
	font-size: 1em;
	font-weight: bold;
	margin-top: 20px;
	outline: none;
	border: none;
	border-radius: 5px;
	transition: .2s ease-in;
	cursor: pointer;
	font-size: 1.2em; /* Increase the font size of the button text */
  }
  
  button:hover {
	background: #29d6a3;
  }
  
  .signup {
	height: 600px; /* Adjusted signup box height */
	background: #fff;
	border-radius: 20% / 10%;
	transform: translateY(-180px);
	transition: .8s ease-in-out;
  }
  
  .signup label {
	color: #073b4a;
	transform: scale(.6);
  }
  
  #chk:checked~.signup {
	transform: translateY(-700px); /* Adjusted transform value */
  }
  
  #chk:checked~.signup label {
	transform: scale(1);
  }
  

  
  .image-container {
    width: 100%; /* Ensure full width */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Adjust margin from the top */
    margin-bottom: 20px; /* Adjust margin from the bottom */
}

.image-container img {
    width: 200px; /* Adjust image width as needed */
    height: auto; /* Maintain aspect ratio */
}

.error-message {
    background-color: #ffe5e5;
    border: 1px solid #ff9999;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
	text-align: center; /* Center-align the text */
	font-size: 1.2em; /* Increase the font size of the error message */
}

.error-message img {
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.error-message p {
    display: inline;
    color: #ff3333;
}

.success-message {
    background-color: #e6ffe6;
    border: 1px solid #66ff66;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center; /* Center-align the text */
    font-size: 1.2em; /* Increase the font size of the success message */
}

.success-message img {
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.success-message p {
    display: inline;
    color: #009933; /* Adjust the color of the success text */
}

.register-container {
    float: left; /* Float the register form container to the left */
    width: 50%; /* Adjusted width to occupy half of the container */
}

/* Adjusted styles for the suggestions container */
.suggestions-container {
    position: fixed;
    top: 50%; /* Adjust position from the top */
    right: 20px; /* Adjust position from the right */
    transform: translateY(-50%); /* Center vertically */
    width: 200px; /* Adjusted width */
    background-color: #fff; /* Background color for the box */
    border: 1px solid #ccc; /* Border style */
    border-radius: 5px; /* Border radius */
    padding: 10px; /* Padding inside the box */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow */
    z-index: 9999; /* Ensure it's above other elements */
}

/* Optional: Adjusted styles for the suggestions */
.suggestions {
    font-size: 0.8em;
    color: #666;
}