* {
	padding:0;
	margin:0;
}

body {
	display:flex;
	flex-direction:row;
}

#photo {
	margin:auto;
	overflow:hidden;
	position:relative;
	height:100vh; 
	margin:0;
	display:flex;
	width:45%;
	flex:1.5;
}

#photo h6 {
	position:absolute; 
	bottom:0; 
	left:25%;
	color:white;
	text-decoration:none;
	background-color:grey;
}

main {
	flex:2;
	display:flex;
	flex-direction:column;
}

#signform {
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:10px 10px;
	margin-top:0;
	margin:5%;
	padding:5%;
	box-sizing:border-box;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

}

.field {
	display: flex;
	flex-direction: column-reverse; 
	width:70%;
}

#welcometext {
	width:100%; 
	text-align:center; 
	margin:auto; 
	margin-bottom:40px; 
	padding:0; 
	font: 2.2em "Fira Sans", sans-serif;
}

#signform input {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	height:30px;
	border:0.5px solid #E5E7EB;
	border-radius:2px;
	outline: none; 
  	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#signform input:focus {
	border-color: #4a90e2; 
	box-shadow: 0 0 8px rgba(74, 144, 226, 0.5); 
}

#signform input:focus + label {
	color: #4a90e2;
	font-weight: bold;
}

#signform input:invalid{
	border-color: red;
}

#signform button {
	margin-top: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button {
	background-color: #596D48;
	color: white;
	width: 10rem;
	height:2.5rem;
	border-radius:4px;
	border:none;
	cursor:pointer;
}

#login {
	margin-top:15px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
}