*{
	font-family: roboto;
	padding: 0;
	margin: 0;
}

.container{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 5px;

}

.judul{
	grid-column: 1/-1;
	grid-row: : 1/2;
	background: #30336b;
	padding: 20px;
	text-align: center;
	color: white;
}

.konten{
	grid-column: 1/-1;
	grid-row: 2/3;
	background: #dff9fb;
	align-items: center;
	padding: 20px;
}

.tombol{
	background: #2C97DF;
	color: white;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 5px solid #2A80B9;
	padding: 10px 20px;
	font-size: 11pt;
}

.tombol:hover{
	background: #2980b9;
	color: white;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 5px solid #2c3e50;
	padding: 10px 20px;
	font-size: 11pt;
}

.kotak{
	padding: 10px;
	border: 4px solid #3498db;
	border-radius: 5px;
	color: #333;
	transition: all 0.3s ease-out;
}

.footer{
	background: #535c68;
	padding: 30px 20px;
	color: white;
}