@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

body {
	margin: 0;
	font-family: "Roboto", sans-serif;
	background-color: #00ff88;
}

body * {
	box-sizing: border-box;
}

.mainLogin {
	width: 100vw;
	height: 100vh;
	background: #201b2c;
	display: flex;
	justify-content: center;
	align-items: center;
}

.leftLogin {
	width: 50vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.leftLogin > h1 {
	font-size: 3vw;
	color: #77ffc0;
}

.leftLoginImage {
	width: 35vw;
}

.rightLogin {
	width: 50vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cardLogin {
	width: 60%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 30px 35px;
	background: #2f2841;
	border-radius: 20px;
	box-shadow: 0px 10px 40px #00000056;
}

.cardLogin > h1 {
	color: #00ff88;
	font-weight: 800;
	margin: 0;
}

.textfield {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin: 10px 0px;
	width: 100%;
}

.textfield > input {
	width: 100%;
	border: none;
	border-radius: 10px;
	padding: 15px;
	background: #514869;
	color: #f0ffffde;
	font-size: 12pt;
	box-shadow: 0px 10px 40px #00000056;
	outline: none;
	box-sizing: border-box;
}

.textfield > label {
	color: #f0ffffde;
	margin-bottom: 10px;
}

.textfield > input::placeholder {
	color: #f0ffff94;
}

.btnLogin {
	width: 100%;
	padding: 16px 0px;
	margin: 25px;
	border: none;
	border-radius: 8px;
	outline: none;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 3px;
	color: #2b134b;
	background: #00ff88;
	cursor: pointer;
	box-shadow: 0px 10px 40px -12px #00ff8052;
}

@media only screen and (max-width: 950px) {
	.cardLogin {
		width: 85%;
	}
}

@media only screen and (max-width: 600px) {
	.mainLogin {
		flex-direction: column;
	}
	.leftLogin {
		width: 100%;
		height: auto;
	}
	.rightLogin {
		width: 100%;
		height: auto;
	}
	.leftLoginImage {
		width: 50vw;
	}
	.cardLogin {
		width: 90%;
	}
}