@font-face {
	font-family: "eko";
	src: url('../fonts/balo.ttf');
}

body {
	background-color: #e9ecef;
	overflow: hidden;
}

.garis-satu {
	width: 70%;
	height: 900px;
	transform: rotate(110deg);
	margin-top: -15%;
	margin-left: -20%;
	background-image: linear-gradient(89.6deg, rgba(240, 110, 170, 1) 2.4%, rgba(255, 139, 102, 1) 88.9%);
}

.kotak {
	width: 70%;
	height: 500px;
	margin: -45% auto 0 auto;
	position: relative;
	border-radius: 15px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

}

#foto-sekolah {
	width: 250px;
	height: 350px;
	margin: 16% 0 15.5% 21.5%;
}

.col-satu {
	width: 50%;
	float: left;
	background-image: radial-gradient(circle farthest-corner at 0.5% 3%, rgba(98, 50, 122, 1) 0%, rgba(56, 0, 92, 1) 90.1%);
	border-radius: 15px 0 0 15px;
}

.col-dua {
	width: 50%;
	float: left;
	height: 500px;
	background-color: #fbf9f9ed;
	border-radius: 0 15px 15px 0;
}

.judul-login {
	color: #E91E63;
	font-family: "eko";
	text-transform: uppercase;
	margin-left: 10%;
	font-size: 26px;
	margin-top: 4%;
}

.btn-login {
	width: 50%;
	height: 40px;
	text-transform: uppercase;
	font-family: "eko";
	background-color: #eb4863;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	transition: all 0.5s ease;
	border: none;
	animation: btn-log 0.5s ease;
	border-radius: 10px;
	color: #fff;
}

.btn-login:hover {
	width: 80%;
	transition: all 0.5s ease;
}

@media screen and (max-width: 1100px) {
	.garis-satu {
		display: none;
	}

	body {
		overflow-y: scroll;
	}

	#foto-sekolah {
		width: 150px;
		height: 150px;
		margin: 16% 0 20% 25.5%;
	}

	.kotak {
		margin: 10% auto 0 auto;
		border-radius: none;
		width: 90%;
	}

	#input {
		width: 90%;
		margin-left: 5%;
	}

	.col-satu {
		width: 100%;
		border-radius: 15px 15px 0 0;
	}

	.col-dua {
		width: 100%;
		border-radius: 0 0 15px 15px;
		height: 310px;
	}

	.btn-login {
		width: 100%;
	}
}