* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #fdfdfd;
	height: 100vh;
}

.halaman {
	height: 100%;
	display: flex;
	flex-direction: row;
}

.halaman .teks {
	width: 50%;
	display: flex;
}

.halaman .teks form {
	width: 80%;
	height: max-content;
	margin: auto;
}

.halaman .teks form .judul {
	margin-bottom: 30px;
}

.halaman .teks form .judul h5 {
	font-family: "nunito", sans-serif;
}

.halaman .teks form .judul h1 {
	font-family: "nunito", sans-serif;
	font-weight: 700;
	font-size: 32px;
}

.halaman .teks form label {
	margin-top: 20px;
	font-family: "nunito", sans-serif;
	font-size: 16px;
}

.halaman .teks form input:invalid {
	border: 2px solid red;
	animation: shake 0.2s;
}

@keyframes shake {
	25% {
		translate: 6px 0;
	}

	50% {
		translate: -6px 0;
	}

	75% {
		translate: 6px 0;
	}
}

.halaman .teks form .nama {
	display: flex;
	flex-direction: column;
}

.halaman .teks form .sandi {
	display: flex;
	flex-direction: column;
}

.halaman .teks form .tombol button {
	width: 100%;
	margin-top: 30px;
	font-family: "nunito", sans-serif;
	font-size: 16px;
}

.halaman .gambar {
	width: 50%;
	display: flex;
}

.halaman .gambar .cover {
	width: 80%;
	margin: auto;
	background-position: center;
	background-size: cover;
	aspect-ratio: 16 / 9;
}

.halaman .gambar .cover img {
	width: 100%;
}

.text-small {
	font-size: 12px;
}

/* Smartphone */
@media only screen and (max-width: 600px) {
	.halaman .teks {
		width: 100%;
	}
	.halaman .gambar {
		display: none;
	}
}

/* Tablet - Vertikal
@media only screen and (min-width: 601px) and (max-width: 768px) {
  .halaman .gambar .cover {
    height: 30%;
  }
}

Tablet - Horizontal
@media only screen and (min-width: 769px) and (max-width: 1279px) {
  .halaman .gambar .cover {
    height: 50%;
  }
} */