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

body {
	font-family: 'Roboto Condensed', sans-serif;
	background:#333 url(img/bg-hk.jpg) center center no-repeat; font-weight:300;
	background-size:cover; background-attachment:fixed;
}
a {
	color:#ff4343; text-decoration:none;
}
a:hover {
	color:#f50000;
}
img {
	max-width:100%;
}
.theborder {
	border:1px solid #cd0000;
	box-shadow: 0 0 10px #cd0000;
}
.bgwrap {
	background-color: rgba(0, 0, 0, 0.25);
	border-top-width:30px;
}
.bgpg {
	background-color: #000000b3;
}
.border-danger {
	border-color:#cd0000 !important;
}
header {
	background:#191819;	text-align:center; padding:0;
}
#menu {
	list-style:none; margin:0; padding:0;
	display: flex; justify-content: left;
	background: #cd0000; position:relative;
}
#menu:after {
	display:block; width:100%; height:100%; content:'';
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0) 100%);
	z-index:1; position:absolute; left:0; top:0;
}
#menu li {
	padding:0; z-index:2; border-right:1px solid rgba(0,0,0,0.4); position:relative;
}
#menu li:first-child {
	margin-left:10px;
}
#menu li a {
	display:block; padding:11px 18px 11px; text-decoration:none; color:#FFF; font-weight:700;
	text-transform:capitalize; font-size:16px;
    text-shadow: 0 1px 2px #000;
}
#menu li a:hover {
	background:#FFF; color:#cd0000; text-decoration:none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.articles {
	font-size:15px;
}
.articles h1 {
	color:#ff4343; font-size:30px;
}
.articles h2 {
	color:#ff4343; font-size:24px;
}
.datapaito {
	width:100%; margin-bottom:30px; max-width:100%; margin-left:auto; margin-right:auto; background:#101010;
}
.datapaito td, .datapaito th {
	border:1px solid #353535; padding:4px 0;  font-weight:normal; text-align:center;
}
.datapaito .tahun th {
	background: #cd0000; padding:6px 0; font-size:120%; font-weight:bold; color:#FFF;
}
.datapaito .hari th {
	background: linear-gradient(to bottom,  #465063 0%,#2a3147 100%);
	font-weight:bold; width:14.2%;
	color:#FFF; text-shadow:0 1px 1px #000;
}
.datapaito tr:not(.hari):not(.tahun) td {
	background:transparent; color:#dbdbdb; font-size:14px;
}
#footer {
	background: #cd0000; position:relative;
}
#footer:after {
	display:block; width:100%; height:100%; content:'';
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0) 100%);
	z-index:1; position:absolute; left:0; top:0;
}
.copyright {
	color:#FFF; margin-bottom:0; font-size:14px; text-transform:uppercase; padding:10px 0; z-index:2; position:relative;
}
.copyright a {
	color:#FFF;
}
.copyright a:hover {
	text-decoration:underline;
}

@media (min-width: 760px){
	.container {
		max-width: 760px !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:first-child {
		margin-left: 0;
	}
	#menu li {
		display:block; margin:0;
		border-bottom:1px solid rgba(0,0,0,0.3);
	}
	#menu li a {
		display:block; text-align:center; padding-top:6px; padding-bottom:6px;
	}
	.datapaito tr:not(.hari):not(.tahun) td {
		font-size:12px;
	}
	.articles {
		font-size:13px;
	}
	.articles h1 {
		font-size:24px;
	}
	.articles h2 {
		font-size:18px;
	}
}
@media (max-width:330px){
	.datapaito tr:not(.hari):not(.tahun) td {
		font-size:11px;
	}
}