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

body {
	font-family: 'Roboto Slab', serif; font-size:14px;
	background:#000 url(img/blackbg.webp) 0 0 repeat; font-weight:400; color:#333;
}
a {
	color:#b35722; text-decoration:none;
}
a:hover {
	color:#632806;
}
img {
	max-width:100%;
}
.bgwrap {
	background:#FFF; text-align:left; margin:10px;
    box-shadow: 0 0 2px #924c24;
    border: 1px dashed #924c24;
	border-radius:20px;
}
.roundedbig {
	border-radius:30px; overflow:hidden;
}
.wrapborder {
	border:2px solid #924c24;
    box-shadow: 0 0 4px #924c24;
}
header {
	background:transparent;
	text-align:center; padding:0;
}
header img {
	width:800px; max-width:90%; margin:15px auto;
}
#menu-parent {
	margin:0 10px;
	border-radius:15px; overflow:hidden;
}
#menu {
	list-style:none; margin:0;
	display: flex; justify-content: center;
	background:#924c24;
}
#menu li {
	padding:0; border-right: 1px solid #6d2f0b;
    border-left: 1px solid #bb7249;
}
#menu li:first-child {	
    border-left: 1px solid #6d2f0b;
}
#menu li:first-child a {
    border-left: 1px solid #bb7249;
}
#menu li:last-child {
    border-right: 1px solid #bb7249;
}
#menu li:last-child a {
    border-right: 1px solid #6d2f0b;
}
#menu li a {
	display:block; padding:10px 18px 10px; text-decoration:none; color:#FFF; font-weight:700;
	text-transform:capitalize; font-size:14px;
}
#menu li a:hover {
	color:#FFF; text-decoration:none;
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%);
}
#dataresult {
	width:700px; margin-bottom:30px; max-width:100%; margin-left:auto; margin-right:auto; background:#FFF;
}
#dataresult td, #dataresult th {
	border:1px solid #b7b7b7; padding:4px 0;  font-weight:normal; text-align:center;
}
#dataresult td {
	background:transparent; color:#252525; font-size:14px;
}
#dataresult thead td {
	background: #924c24; font-weight:700;
	color:#FFF; text-shadow:0 1px 1px #000;
}
#dataresult>:not(:first-child) {
	border-top:none;
}
.bgwrap h1 {
	font-size:34px;
}
.bgwrap h2 {
	font-size:28px;
}
.bgwrap h3 {
	font-size:24px;
}
.copyright {
	color:#555; margin-bottom:10px; font-size:12px;
}
.copyright a {
	color:#666;
}
.copyright a:hover {
	color:#AAA;
}

@media (min-width: 950px){
	.container {
		max-width: 950px !important;
	}
}
@media (max-width:767px){
	.datapaito .tahun th {
		font-size:16px;
	}
	.datapaito td, .datapaito th {
		font-size:12px;
	}
	body > .container {
		width:auto; margin-left:10px; margin-right:10px;
		font-size:14px;
	}
	#menu {
		display: block; margin:0; padding:0;
	}
	#menu li {
		display:block;
		border-bottom:1px solid #6d2f0b;
		border-left:none !important; border-right:none !important;
	}
	#menu li a {
		display:block; text-align:center;
		font-size: 13px;
		border-left:none !important; border-right:none !important;
	}
	.headtitle {
		font-size: 32px;
	}
	header p {
		font-size:14px;
	}	
	.datapaito tr:not(.hari):not(.tahun) td {
		font-size:12px;
	}
	.bgwrap {
		line-height:1.3; font-size:12px;
		margin:5px;
	}
	.bgwrap h1 {
		font-size:24px;
	}
	.bgwrap h2 {
		font-size:20px;
	}
	.bgwrap h3 {
		font-size:16px;
	}
}
@media (max-width:340px){
	.datapaito tr:not(.hari):not(.tahun) td {
		font-size:10px;
	}
}