@charset "UTF-8";

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

body{
	padding: 20px 16px 80px;
	max-width: 480px;
	 margin: 0 auto;
}

h1,h2,h3,h4,form,.center-btn{
	text-align: center;
}
h1{
	color:#99b3ff;
}

.req,.error-message{
	color:red;
}

.signup-btn{
	display:inline-block;
	font-size:16px;
	cursor:pointer;
	padding:12px 40px;
	background:#beedbe;
	color:#000000;
	border:2px solid #5d995d;
}
.signup-btn:hover{
	background: #ffffff;
	color:#000000;
}

.signin-btn{
	display:inline-block;
	font-size:16px;
	cursor:pointer;
	padding:12px 40px;
	background:#ffffff;
	color:#000000;
	border:2px solid #5d995d;
	text-decoration: none;
}

.signin-btn:hover{
	background: #beedbe;
	color:#000000;
	
}
.password-wrapper {
  position: relative;
  display: inline-block;
}

.password-wrapper input {
	width:130px;
  padding-right: 35px;
}

.toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
}

footer{
	position: fixed;
	bottom: 0;
 	width: 100%;
	padding: 20px 0; 
	background: #f7f7f7; 
	text-align: center;
}
footer p{
	margin: 0; 
	font-size: 14px; 
	color: #555;
}