body {
	font-family: sans-serif;
  	margin: 0;
  	padding: 0;
}

.container {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	min-height: 100vh;
  	position: relative;
}

.left-image {
  	display: none;
  	object-fit: cover;
}

body::before {
  	content: "";
  	background: url('../img/login_image_mo.png') no-repeat center center / cover;
  	position: fixed; 
  	top: 0; 
  	left: 0; 
  	right: 0; 
  	bottom: 0;
  	z-index: -1;
  	opacity: 1; 
}

.right-content {
  	background: rgba(255, 255, 255, 0.9);
  	padding: 20px;
  	border-radius: 15px;
  	text-align: center;
  	width: 90%;
  	max-width: 350px;
  	box-shadow: none;
}

.logo {
  	width: 150px;
}

.text-container {
  	margin-bottom: 20px;
  	text-align: center;
}

.text-container h2 {
  	margin: 10px 0;
}

.login-input {
  	width: 100%;
  	padding: 15px; 
 	margin: 5px 0;  
  	border: 1px solid #ddd;
  	border-radius: 5px;
  	box-sizing: border-box;
}

.login-button {
  	width: 100%;
  	padding: 15px; 
  	margin-top: 15px; 
  	background-color: #7ed957;
  	color: white;
  	font-weight: bold;
  	border: none;
  	border-radius: 5px;
  	cursor: pointer;
}

@media (min-width: 768px) {   
	.container {
    	flex-direction: row;
    	justify-content: stretch;
    	align-items: stretch;
    	height: 100vh;
    	padding: 0;
  	}

  	.login-input,
  	.login-button {
    	max-width: 350px;
  	}

  	body::before {
    	display: none;
  	}

  	.left-image {
    	flex: 1;
    	width: 50%;
    	height: 100vh;
    	object-fit: cover;
    	display: block;
    	margin: 0;
  	}

  	.right-content {
    	flex: 1;
    	width: 50%;
    	max-width: none;
    	background: white; 
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    	text-align: center;
    	box-shadow: none;
    	padding: 40px;
  	}

  	.text-container {
    	text-align: center;
  	}
}

@media (max-width: 767px) {
	.right-content {
    	box-shadow: 0 0 10px rgba(0,0,0,0.2);
  	}
}